Socket.io 客户端未连接到服务器 React 和 Express

Question

我正在使用带有 express 后端的 React 前端。

React 套接字代码

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 应该打印出“New client connected”，但这并没有发生。

Answer 1

您没有向后端名为 connection 的侦听器发送消息。你必须在后端与监听器通信

import io from "socket.io-client";

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

    socket.emit('connection');
   
}

Answer 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/

Answer 3

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

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

Socket.io 客户端未连接到服务器 React 和 Express

Socket.io client not connecting with server React and Express

websocket

express

socket.io

reactjs