反应客户端：websocket.js:83 WebSocket 连接到 'ws://localhost:3009/socket.io/?EIO=4&transport=websocket' 失

Posted 2023-02-21

【中文标题】反应客户端：websocket.js:83 WebSocket 连接到 \'ws://localhost:3009/socket.io/?EIO=4&transport=websocket\' 失败：

【英文标题】：react client: websocket.js:83 WebSocket connection to 'ws://localhost:3009/socket.io/?EIO=4&transport=websocket' failed:反应客户端：websocket.js:83 WebSocket 连接到 'ws://localhost:3009/socket.io/?EIO=4&transport=websocket' 失败：

【发布时间】：2021-07-08 10:53:49

【问题描述】：

我有一个使用 socket io 的节点后端

首先在 app.js 中初始化应用

const express = require("express")

const app = express()

module.exports = 
    app,
    express

然后在 io.js 中，我创建套接字服务器

const  app  = require("./app");
const http = require("http");
const socketio = require("socket.io");
const server = http.createServer(app);
const io = socketio(server);

module.exports = io;

然后首先在 server.js 中导入 app.js 以进行 api 调用，然后导入 io.js

require("dotenv").config();
const  app, express  = require("./app");
const logger = require("./logger");

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

然后我只需在 server.js 中添加发射监听代码

io.on("connection", (socket) => 
  console.log("we have a new connection");

  socket.on("disconnect", () => 
    console.log("the socket disconnected");
  );

  socket.on("join", ( user_id , callback) => 
    // const notification = getListNotifications(user_id);
    // const popup = getUserPopup(user_id);
    // socket.emit("nofication",  popup: popup.count, notification );
    socket.emit("nofication",  popup: 3, notificaton:  a: 1  );
    socket.join(user.room);
    callback();
  );

然后我以开发模式 nodemon server.js 运行 server.js 文件

然后在反应中我只需使用 socket.io

import io from "socket.io-client";

useEffect(() => 
    socket = io("ws://localhost:3009", 
      "force new connection": true,
      reconnectionAttempts: "Infinity",
      timeout: 10000,
      transports: ["websocket"],
    );

   

    return () => 
      socket.disconnect();
    ;
  , []);

它在浏览器控制台中给了我这个错误

服务器 node.js 控制台正在接收 https 协议

我在其他答案中发现这可能是一些协议问题。

很高兴向您学习。提前致谢

【问题讨论】：

你是如何解决这个问题的（如果是的话）？

【参考方案1】：

发生在我身上，我正在使用 app.listen 监听服务器，它只接收 https 协议....但是我创建了一个单独的 ws 服务器，它的 server 变量应该监听一个端口，以便服务器可以接收 ws连接...

更好地使用这个库npm link 将使工作更容易......