socket.io で接続は確認できるがイベントに反応してくれない問題の解決

socket.io で接続は確認できるがイベントに反応してくれない問題の解決

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
// server 
const express = require('express');
const app = express();
http = require('http').createServer(app);
const io = require('socket.io')(http, {
cors: {
origin: '*',
}
})
...

// client (React)
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);
})
...
}
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×