无法使用 ReactJS 独立连接到 NodeJS socket.io

Question

我正在为物联网项目寻找最好的 WS 解决方案。我目前正在使用 Web Sockets 测试我的选项。到目前为止，我已经尝试了两个 NPM 库 'ws' 和 'websockets'。他们工作得很好，NodeJS 和 ReactJS 实现都很简单。我现在正在尝试 websocket.io。阅读文档我努力创建一个简单的工作示例，直接从文档中复制代码。由于测试代码如此简单，我真的很困惑，尤其是在对之前两个包的积极体验之后。我很确定我做错了什么，但我无法发现我的错误。我真的很感谢任何人帮助发现我做错了什么。

侦听端口 8000 的 NodeJS 服务器实例（基于此处的示例：https://socket.io/docs/v4/server-initialization/）：

const io = require("socket.io")();

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

io.listen(8000);

React 客户端尝试从端口 2000 连接到 NodeJS 服务器：

import React from "react";
import { io } from "socket.io-client";


class Io extends React.Component {

state = {
   wsConnected: false
}

componentDidMount() {
  const socket = io.connect('http://localhost:8000');
  socket.on("connect", () => {
    console.log('connect',socket.id); 
  });
}

render() {
   const { wsConnected } = this.state;
   return (
     <div>{wsConnected ? 'on' : 'off'}</div>
   )
}

}

export default Io

Answer 1

您在 polling 传输模式下似乎遇到了 CORS 问题，因此您可以在使用 polling 时像这样使用 Socket.io 独立服务器:

const io = require("socket.io")(
    {
        cors: {
            origin: '*',
        }
    }
);

io.on("connection", socket => {
    console.log(`${socket.handshake.headers.origin} connected`);
 });

io.listen(8000);

但如果您需要持久的 http 连接，最好使用 websocket 传输。当您使用 websocket 交通模式时，没有 CORS 政策。

websocket 传输不支持 http headers 之类的 cookie 等，但最好在客户端存在能耗问题时使用它。您也可以强制 socket.io 服务器仅支持确定的传输模式。请参阅 socket.io 文档。

无法使用 ReactJS 独立连接到 NodeJS socket.io

Unable to connect to NodeJS standalone socket.io with ReactJS

node.js

socket.io

reactjs