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

Question

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

NodeJS 服务器实例监听 8000 端口（基于此处的示例：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 传输不支持 cookie 等 http 标头，但在客户端存在能耗问题时最好使用它。您也可以强制 socket.io 服务器只支持确定的传输模式。请参阅 socket.io 文档。