socket.io客户端建立2个连接[重复]答案

【问题标题】：socket.io client making 2 connections [duplicate]socket.io客户端建立2个连接[重复]
【发布时间】：2022-01-15 12:30:38
【问题描述】：

我尝试使用 socketio 网站上提到的options 来增加重新连接之前的时间，禁用从 http 到 websocket 的连接升级，启用 forceNew 选项。但是每当客户端页面加载时，总会有 2 个连接。任何人都知道发生了什么。如果需要，我渴望提供更多信息。感谢您阅读本文。

客户端代码（React.js + TailwindCSS）

import "./App.css";
import { io } from "socket.io-client";
import Home from "./pages/Home/Home";

function App() {
  const socket = io("http://localhost:3000/");
  socket.on("connect", () => {
    console.log(socket.id);
    console.log(socket.connected);
  });
  return (
    <div className="App">
      <Home />
    </div>
  );
}

服务器代码 (Node.js)

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

const app = express();
const server = http.createServer(app);
const io = new Server(server, {
  cors: {
    origin: "http://localhost:3001",
    methods: ["GET", "POST"],
  },
});

io.on("connection", (client) => {
  console.log("client connected", client.id);
  client.on("event", (data) => {});
  client.on("disconnect", () => {});
});

server.listen(3000);
server.on("listening", () => console.log("listening"));

客户端控制台

2zcCMTkpbDtW-R5jAAA-
true
KdzGTWRxUIhlk0bKAAA_
true

服务器控制台

listening
client connected zh1zj5dnUb55zUdrAAAB
client connected rQexCoY7B6Es_r_RAAAD

【问题讨论】：

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

【解决方案1】：

您需要在useEffect 钩子内启动套接字，否则，它会在每次您的组件重新渲染时运行。

在这种情况下，io 函数只会触发一次，因为useEffect 没有依赖关系，所以它只会运行一次。另外，请确保在卸载您的应用后关闭连接

function App() {
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    const s = io("http://localhost:3000/");
    setSocket(s);

    return () => s.disconnect();
  }, [setSocket]);

  return (
    <div className="App">
      <Home />
    </div>
  );
}

【讨论】：