Socket.io-客户端会循环并且从不响应事件

Socket.io-client would loop and never respond to an event

我有一个 socket.io 聊天应用程序,我正在尝试为其制作反应前端。但是,socket.io-client 会无休止地连接到我的服务器,而不会进行任何调用,例如 socket.emit() 或使用 socket.on() 响应事件。这是我的后端:

var app = require('express')();
var http = require('http');
var server = http.createServer(app);
var io = require('socket.io')(server);
app.use(require('cors')());

io.on('connection', (socket) => {
    console.log('new user connected');
    io.to(socket.id).emit('msg', 'hello there');

    socket.on('joining msg', ({id, username}) => {
        console.log(username);
        socket.broadcast.emit('chat message', `Everybody welcome ${username}\n`);
    })
});

server.listen(4001, () => {
    console.log('Server listening on :4001');
});

而我的前端是:

import React from "react";
import io from 'socket.io-client';

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: ''
        }
    }

    componentDidMount() {
        const socket = io("http://localhost:4001");
        socket.emit('joining msg', {id: 'test', username: 'test'})
        socket.on('msg', (msg) => {
            this.setState('data', msg);
        });
    }

    render() {
        return (
            <p>{this.state.data}</p>
        );
    }
}

服务器控制台会无休止地记录 new user connected 但实际上从未记录它发出的客户端的用户名。如何防止循环并让我的应用程序运行?

我所要做的就是在我的服务器上更新 socket.io 版本,就是这样!