socket.io 客户端建立了 2 个连接

Question

我尝试使用 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

Answer 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>
  );
}

socket.io 客户端建立了 2 个连接

socket.io client making 2 connections

javascript

websocket

node.js

socket.io

reactjs