socket.io でサーバーに接続されてそうだけどそれ以上何もしてくれなくて困った話．
結論
socket.io のバージョンはクライアントとサーバーで揃えよう
事象
環境: Node.js + Express / React
サーバー側に
1
2
3
4
5
| io.on('connection', function (socket) {
socket.on('message', (msg) => {
console.log('socketio connected')
})
});
|
と書くとたしかに socket.io が接続されているログが流れるのに emit とか on には何も反応してくれない．
localStorage.debug = '*'; でデバッグするとどうやら
1
2
3
4
5
6
7
| browser.js:181 engine.io-client:socket socket receive: type "error", data "parser error" +8ms
browser.js:181 engine.io-client:socket socket error {"code":"parser error"} +0ms
browser.js:181 socket.io-client:manager error +8ms
browser.js:181 socket.io-client:manager cleanup +0ms
browser.js:181 socket.io-client:manager reconnect attempt error +1ms
browser.js:181 socket.io-client:manager will wait 2696ms before reconnect attempt +0ms
browser.js:181 engine.io-client:socket socket close with reason: "transport error" +1ms
|
と，エラーが出ていることは確認できるけどコードは正しそう．
解決
クライアントの socket.io のバージョンが 2.0.3，サーバーのバージョンが 3.0.3 だった．
両者を 3.0.3 に揃えたらうごいた．
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
const express = require('express');
const app = express();
http = require('http').createServer(app);
const io = require('socket.io')(http, {
cors: {
origin: '*',
}
})
...
import io from "socket.io-client";
const socket = io.connect(":3000");
...
class BulletinBoard extends React.Component<
...
componentDidMount() {
socket.on('message', function(data: any) {
console.log(data);
})
...
}
|
