反应客户端：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 协议

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

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

【问题讨论】：

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

标签： node.js reactjs sockets websocket socket.io

【解决方案1】：

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

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

【讨论】：