从 React 应用程序发出套接字 io 事件并且不在 Node js 服务器上接收它

Question

我正在尝试在我的 React 应用程序中使用 Socket IO，但出于某种原因，我无法从我的 React 客户端在我的节点服务器上获取任何事件。不过，我可以在我的 React 应用程序中接收到从 Node 服务器发出的事件。

我的节点服务器是这样的：

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

const app = express();
const httpServer = http.createServer(app);
const io = socketio(httpServer, {
  cors: {
    origin: "http://localhost:3000",
    methods: ["GET", "POST"],
  }
});
const port = 4000;

io.on('connect', (socket) => {
  console.log('socket io connected');
  io.emit('message', 'a dog');
  io.emit('baby', 'a cat');
  io.on('baby', (msg) => {
    console.log(msg);
  });
  io.on('disconnect', (msg) => {
    console.log('io disconnected');
  });
});

httpServer.listen(port, () => {
  console.log(`App listening at http://localhost:${port}`);
});

而我的 React 应用只有 App.js，它看起来像这样：

import './App.css';
import socketClient from "socket.io-client";

const URL = "http://localhost:4000";
const socket = socketClient(URL);
socket.on('connect', () => {
  console.log(`I'm connected with the back-end`);
  socket.emit('baby', 'what is going on');
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});
socket.on('message', (msg) => {
  console.log(msg);
});
socket.on('baby', (msg) => {
  console.log(msg);
});
socket.emit('baby', 'what is going on');

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

就像我上面提到的，我只能从我的节点服务器接收套接字事件，并在我的浏览器控制台上看到打印出的消息，但我在我的节点服务器上看不到任何消息日志。即使我刷新浏览器或关闭 React 应用程序，它也不会打印 'io disconnected'。我在 Node 服务器日志中看到的唯一内容是消息 'socket io connected'。请大家帮忙赐教，万分感谢！

Answer 1

将服务器上的 io.on('baby') 和 io.on('disconnect') 更改为 socket.on('baby') 和 socket.on('disconnect')。基本上，io.emit 可用于向所有连接的套接字发送消息，但是当你想在服务器上接收消息时，你需要在各个套接字上监听该消息，否则你将无法区分连接到服务器的不同客户端。另请注意，当您只想向 1 个客户端发送消息时，您将再次使用 socket.emit，而不是 io.emit。

从 React 应用程序发出套接字 io 事件并且不在 Node js 服务器上接收它

Emit socket io event from React app and doesn't receive it at Node js server

socket.io

reactjs

react-hooks