Question

我正在使用反应前端和快速后端。

反应套接字代码

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 应该打印出“新客户端已连接”，但这并没有发生。

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()，然后它应该可以工作。

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

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

3 个答案: