Socket.io Server Emit 仅在服务器重启后有效

Question

如果这是一个非常愚蠢的问题，请原谅我。
我正在观看有关 Socket.io 的教程，一切都很好。所以我想在 reactjs 应用程序中尝试一下。 但问题是，虽然我能够从客户端发射，但我无法从服务器端发射。
如果我重新启动服务器，发射就可以工作 strong> 我的意思是，当我运行应用程序时，最初服务器会记录消息，重新启动后，客户端会记录消息。

客户端

import React, { Component } from 'react';
import socket from '../socketConfig'

class App extends Component {
    componentDidMount(){
        socket.on('hello',(data)=>{
            console.log(data);
        })
        socket.emit('call','this is from client');
    }
    render(){
        return (
            <div></div>
        )
    }
}
export default App;

socketConfig

import openSocket from 'socket.io-client';

const socket = openSocket("http://localhost:4000/");

export default socket;

服务器端

var express = require('express');

var socket = require('socket.io');
var app = express();
var server = app.listen(4000, function () {
  console.log('listening for requests on port 4000,');
});

app.use(express.static('public'));

var io = socket(server);

io.sockets.on('connection', (socket) => {
  socket.emit('hello','msg from server');
  socket.on('call', (data)=>{console.log(data)});
}

Answer 1

我认为问题可能出在您使用的网址中 - socket.io 可能很挑剔，因为它不是严格意义上的网络套接字，它是长轮询和网络套接字的包装器。因此，您可能必须指定要使用的传输方式，因为套接字处理是在与 http 处理相同的端口上完成的。

从客户端试试这个网址：

ws://localhost:4000/socket.io/?EIO=3&transport=websocket

Answer 2

所以问题是我正在监听 compponentDidMount() 中的事件，但使用 componentDidUpdate() 解决了这个问题。

应用组件

    state = {
        socket:null
    }
    componentDidMount(){
        this.setState({
            socket:io("http://localhost')
        })  

    }
    componentDidUpdate(){
        let sokt = this.state.socket;
        sokt.on('connect',()=>{
            sokt.on('hello',(data)=>console.log(data)); //logged: msg from server
            sokt.emit('call',"This is from client"); //logged: This is from client
        })
    }

但我不确定这是否是正确的方法