reactjs - socket.io 传输错误

Question

我正在尝试将 Web Sockets 与 socket.io 一起用于我的个人项目，但到目前为止，我什至没有让客户端连接。

我正在使用 express 提供 api：

import cors from 'cors';
import express from 'express';
import http from 'http';
import { Server } from 'socket.io';
import log from '../util/log';

const start_api = () => {
    const app = express();
    const server = http.createServer(app);
    const io = new Server(server, {
        cors: {
            origin: '*',
            methods: ['GET', 'POST'],
        },
    });

    app.use(
        cors({
            origin: '*',
        }),
    );

    app.get('/', (req, res) => {
        res.status(200).send('hello from /');
    });

    io.on('connection', (socket) => {
        log.info('A user connected.');
    });
    io.on('connect_error', (err) => {
        console.log(`connect_error due to ${err.message}`);
    });

    server.listen(8080);
    log.info('API is listening on port 8080');
};

export { start_api };

我正在尝试在反应应用程序中连接到服务器：

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

const socket = io('ws://localhost:8080');

function App() {
  return (
    <div>
      <h1>HI</h1>
    </div>
  );
}

export default App;

在浏览器中运行反应应用程序时，套接字未连接。这是控制台中 socket.io 的日志（对我来说不是很有帮助）：

有趣的是，我在调试工具的网络选项卡中看不到任何与 socket.io 相关的内容，尽管 socket.io 的日志表明它正在尝试获取http://localhost:8080/socket.io/?EIO=4&transport=polling&t=Nm0A2td&b64=1当0{"sid":"Cb-c7ZYNJVZRBSpnAAAB","upgrades":["websocket"],"pingInterval":25000,"pingTimeout":20000}我用浏览器打开它或当我取它。

我还尝试从 express 本身提供一个 index.html，它运行脚本const socket = io();并且有效。但是我在我的反应应用程序中没有做任何不同的事情......

在这一点上，我不知道这里可能会发生什么，并感谢您的帮助。提前致谢！

标签： reactjsexpresssocket.io