Socket.io 客户端未与服务器 React 和 Express 连接答案

【问题标题】：Socket.io client not connecting with server React and ExpressSocket.io 客户端未与服务器 React 和 Express 连接
【发布时间】：2021-05-06 17:09:16
【问题描述】：

我正在使用 react 前端和 express 后端。

反应套接字代码

import io from "socket.io-client";

function ReactComponent() {
    const socket = io("http://localhost:5000");

    socket.on('connection', () => {
        console.log("connection")
    });

    useEffect(() => {
        socket.emit('new-user', "hello");
    }, []);

    return(<p>Test text</p>);
}
    
export default ReactComponent;

表达套接字代码

const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

io.on('connection', (socket) => {
    console.log("New client connected");

    socket.on('new-user', (room) => {
        socket.join(room);
        socket.to(room).broadcast.emit('user-connected', "thx for info");
    })
});

通过查看文档和其他示例，这应该可以工作，如果可以，express 应该打印出“新客户端已连接”，但这种情况不会发生。

【问题讨论】：

标签： reactjs express websocket socket.io

【解决方案1】：

您不会在后端向名为 connection 的侦听器发送数据。您必须与后端的侦听器进行通信

import io from "socket.io-client";

function ReactComponent() {
    const socket = io("http://localhost:5000");

    socket.emit('connection');
   
}

【讨论】：

【解决方案2】：

花了一段时间才找到这个。希望这对将来的其他人有所帮助！

在我以前的快递上：

const http = require('http').Server(app);
const io = require('socket.io')(http);

const port = process.env.PORT || 5000;
app.listen(port);

相反，它应该是：

const port = process.env.PORT || 5000;
var server = app.listen(port);

var io = require('socket.io')().listen(server);

请注意没有提到 http 模块，因为大多数其他答案都需要它。

这里有一个有助于理解问题的有用线程：Express.js - app.listen vs server.listen

此外，这里的文档是： https://socket.io/docs/v4/server-initialization/

【讨论】：

【解决方案3】：

如果您在代码中使用了app.listen()，则需要将其更改为http.listen()，然后它应该可以工作。

因为在创建http 服务器时已经传递了app。这意味着这个http 需要监听某个端口，而不是app。

【讨论】：