最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

webSocket 连接到 'ws:localhost:8000socket.io?EIO=4&transport=websocket' 失败:当我尝试将 socket io 客户端连接到服务器时

网站源码admin36浏览0评论

webSocket 连接到 'ws://localhost:8000/socket.io/?EIO=4&transport=websocket' 失败:当我尝试将 socket io 客户端连接到服务器时

webSocket 连接到 'ws://localhost:8000/socket.io/?EIO=4&transport=websocket' 失败:当我尝试将 socket io 客户端连接到服务器时

我在将 websocket 从 Next.js 客户端连接到节点 js 服务器端时遇到问题..

错误是:

webSocket connection to 'ws://localhost:8000/socket.io/?EIO=4&transport=websocket' failed:

我从昨天开始处理它,但仍然无法连接到服务器端,我也不知道为什么会这样,节点 js 在端口 8000 上运行,而 Next js 在端口 3001 上运行。

这是我的代码:

节点js

import http from "http";
import { Server } from "socket.io";

const app = express();
const server = http.createServer(app);
const io = new Server(server, {
  cors: {
    origin: ["*"],
  },
});

....

const PORT = process.env.PORT || 8000;

io.on("connection", (socket) => {
  console.log(socket);
  console.log("a user connected");
});

app.listen(PORT, (err) => {
  if (err) {
    console.log(err);
  } else {
    console.log("Server is running on PORT", PORT);
  }
});

这是下一个 js 代码:

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

const socket = io.connect("http://localhost:8000", {
  transports: ["websocket"],
});

const IndexPage = (props) => {
  return (
    <>
      <Head>
        <title>Investment spot</title>
      </Head>
      <Navbar />

      <h1 className="text-center   my-5" style={{ color: "#FFBA00" }}>
        The winners
      </h1>

      <Container fluid className="mt-5">
        <Row>
          <Col xs={6}>
            <Winners data={props.data} />
          </Col>
          <Col xs={6} className="d-flex align-items-start mb-5">
            <Prizes data={props.image} />
          </Col>
        </Row>
      </Container>
    </>
  );
};

export default IndexPage;

我尝试用 stack overflow 和 chatGPT 中其他问题中提供的代码来解决,但对我不起作用。

回答如下:

您设置服务器的方式不正确。 检查 npm 文档

const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
io.on('connection', () => { /* … */ });
server.listen(3000);

您正在启动快递应用程序

app.listen(PORT, (err) => {}

应该是

server.listen(PORT)

您可能还需要添加 cors 策略来表达

const cors = require("cors");
const app = express();
// always register middlewares first
app.use(cors());
发布评论

评论列表(0)

  1. 暂无评论