Сервер Socket.io Emit работает только после перезапуска сервера

Question

Пожалуйста, прости меня, если это действительно глупый вопрос.
Я смотрел учебник по Socket.io, и все работало отлично. Поэтому я хотел попробовать это в reactjs приложении. Но проблема заключается в том, что, хотя я могу осуществлять излучение на стороне клиента, я не могу сделать это на стороне сервера.
Излучение работает, если я перезагружаю сервер и под этим я подразумеваю, что когда я запускаю приложение, изначально сервер регистрирует сообщение, а после перезапуска клиент регистрирует сообщение.

на стороне клиента

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

Я думаю, что проблема может быть в используемом вами URL-адресе - socket.io может быть привередливым, поскольку это не строго веб-сокет, а оболочка для длинных опросов и веб-сокетов. Поэтому вам, возможно, придется указать, какой транспорт использовать, поскольку обработка сокетов выполняется на том же порту, что и обработка http.

Попробуйте этот URL со стороны клиента:

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

Answer 2

Таким образом, проблема заключалась в том, что я слушал события в copmponentDidMount (), но с помощью componentDidMount () решил эту проблему.

Компонент приложения

    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
        })
    }

Но я не уверен, что это правильный способ сделать это