react、socketio等を使用して作ったチャットアプリを実行する際のエラー
当方かなりのプログラミング初心者です。
Reactで簡単なチャットアプリを作っています。
サーバー側のプログラム（chat-server.js）を「npm start（node chat-server.js）」にて実行する際にエラーが生じ、また、チャット機能の実行が出来ません（UIは開きます。）
解決方法を教えていただきたいです。
windows 10 64bit
発生しているエラーメッセージ ↓
Uncaught TypeError: e.split is not a function index.js:24
at Object.decodePayload (index.js:24)
at n.value (polling.js:105)
at n. (polling-xhr.js:101)
at n.r.emit (index.js:145)
at n.value (polling-xhr.js:262)
at n.value (polling-xhr.js:329)
at XMLHttpRequest.hasXDR.t.onreadystatechange (polling-xhr.js:217)
ソースコード ↓
chat/src/index.js ↓
import React from 'react'
import ReactDOM from 'react-dom'
import styles from './styles.js'
// Socket.IOでWebSocketサーバに接続する
import socketio from 'socket.io-client'
const socket = socketio.connect('http://localhost:3001')
// 書き込みフォームのコンポーネント
class ChatForm extends React.Component {
constructor (props) {
super(props)
this.state = { name: '', message: '' }
}
nameChanged (e) {
this.setState({name: e.target.value})
}
messageChanged (e) {
this.setState({message: e.target.value})
}
// サーバに名前とメッセージを送信
send () {
socket.emit('chat-msg', {
name: this.state.name,
message: this.state.message
})
this.setState({message: ''}) // フィールドをクリア
}
render () {
return (
名前:
onChange={e => this.nameChanged(e)} />
メッセージ:
onChange={e => this.messageChanged(e)} />
this.send()}>送信
)
}
}
// チャットアプリのメインコンポーネント定義
class ChatApp extends React.Component {
constructor (props) {
super(props)
this.state = {
logs: []
}
}
// コンポーネントがマウントされたとき
componentDidMount () {
// リアルタイムにログを受信するように設定
socket.on('chat-msg', (obj) => {
const logs2 = this.state.logs
obj.key = 'key_' + (this.state.logs.length + 1)
console.log(obj)
logs2.unshift(obj) // 既存ログに追加
this.setState({logs: logs2})
})
}
render () {
// ログ一つずつの描画内容を生成
const messages = this.state.logs.map(e => (
{e.name}
: {e.message}
))
return (
リアルタイムチャット
)
}
}
// DOMにメインコンポーネントを書き込む
ReactDOM.render(
,
document.getElementById('root'))
chat/chat-server.js ↓
// --------------------------------------------------------
// リアルタイムチャットのサーバ
// --------------------------------------------------------
// HTTPサーバを作成(アプリを送信するため) --- (※1)
const express = require('express')
const app = express()
const server = require('http').createServer(app)
const portNo = 3001
server.listen(portNo, () => {
console.log('起動しました', 'http://localhost:' + portNo)
})
// publicディレクトリのファイルを自動で返す --- (※2)
app.use('/public', express.static('./public'))
app.get('/', (req, res) => { // ルートへのアクセスを/publicへ。
res.redirect(302, '/public')
})
// WebSocketサーバを起動 --- (※3)
const socketio = require('socket.io')
const io = socketio.listen(server)
// クライアントが接続したときのイベントを設定 --- (※4)
io.on('connection', (socket) => {
console.log('ユーザが接続:', socket.client.id)
// メッセージ受信時の処理を記述 --- (※5)
socket.on('chat-msg', (msg) => {
console.log('メッセージ', msg)
// 全てのクライアントに送信 --- (※6)
io.emit('chat-msg', msg)
})
})
chat/package.json ↓
{
"name": "chat",
"version": "1.0.0",
"description": "",
"main": "chat-server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node chat-server.js",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"socket.io-client": "^3.0.0",
"socketio": "^1.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/preset-env": "^7.12.1",
"@babel/preset-react": "^7.12.5",
"babel-loader": "^8.1.0",
"webpack": "^4.44.2",
"webpack-cli": "^4.2.0"
}
}
chat/webpack.config.js ↓
const path = require('path')
module.exports = {
entry: path.join(dirname, 'src/index.js'),
output: {
path: path.join(dirname, 'public'),
filename: 'bundle.js'
},
devtool: 'inline-source-map',
module: {
rules: [
{
test: /.js$/,
loader: 'babel-loader',
options: {
presets: ['@babel/env', '@babel/react']
}
}
]
},
performance: {hints: false}
}
試したこと ↓
エラー内容に全く見当がつかず、具体的にはこの状態からほとんど何もできていないです・・・。
e.splitがどこにあるのかすらもわかりません・・・。
index.jsの24行目は
name: this.state.name,
となっています。
プログラミング経験が浅く、質問内容も要領を得ていないかもしれませんが、
どなたか教えていただけますと幸いです。
