时间戳

首页 > 解决方案 > 从 React 应用程序发出套接字 io 事件并且在 Node js 服务器上没有接收到它

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

问题描述

我试图在我的反应应用程序中使用 Socket IO，由于某种原因，我无法从我的反应客户端在我的节点服务器上获取任何事件。不过，我可以在我的 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”。请大家帮忙赐教，万分感谢！

标签： reactjssocket.ioreact-hooks

解决方案

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

推荐阅读