不可能当socket.io页面被更改或刷新时，您不能保持相同的www.example.com或WebSocket客户端连接。浏览器根本不会这样做。当加载新页面或刷新当前页面时，浏览器将关闭并释放前一页面中的所有资源，包括socket.io/webSocket连接。
因此，您的服务器必须从新加载的页面期待一个新的socket.io连接。如果您使用cookie或服务器端会话对象，您可以在服务器上识别何时连接来自您以前见过的客户端，然后服务器可以相应地采取行动，以意识到这只是以前的客户端在新页面上重新连接。

现在看来，WebWorker是一种更广泛的技术，它可以用于共享WebSocket。
正如本文所解释的，https://crossbario.com/blog/Websocket-Persistent-Connections/ Webworker是在“页面线程”之外运行的JavaScript，因此不会在页面更改时删除。请注意，它只在同一个域中运行。你也可以在这里看看Kanaka的答案How to maintain a WebSockets connection between pages?（2012-2017答案当心）

这是不可能的（几乎不浪费你的时间），如果你做一个F5，例如，因为所有的JavaScript执行上下文对象将被重置。
但如果您希望在多个选项卡之间保持套接字连接，则可以这样做。
使用API它将帮助同步多个选项卡之间的套接字连接，确保连接保持活动状态。
当在一个选项卡中建立套接字连接时，它将通过Broadcast Channel API发送消息，通知其他选项卡也建立其套接字连接。这允许套接字连接跨多个选项卡共享，并且只要至少一个选项卡保持打开状态，套接字连接就保持活动。（相同的起源）。
首先，你需要在react组件之外创建一个服务。保持对象的引用。

import io from 'socket.io-client';
import {BroadcastChannel} from 'broadcast-channel';

class SocketService {
  constructor() {
    this.socket = null;
    this.broadcastChannel = null;
    this.channelName = 'socketConnectionChannel';
  }

  initializeBroadcastChannel() {
    this.broadcastChannel = new BroadcastChannel(this.channelName);

    this.broadcastChannel?.addEventListener('message', (event) => {
      if (event.data === 'connect') {
        this.connect();
      } else if (event.data === 'disconnect') {
        this.disconnect();
      }
    });
  }

  connect() {
    this.socket = io('your-socket-server-url');
    // Set up event listeners or any other necessary configuration
  }

  disconnect() {
    if (this.socket) {
      this.socket.disconnect();
      this.socket = null;
    }
  }

  sendBroadcastMessage(message) {
    if (this.broadcastChannel) {
      this.broadcastChannel?.postMessage(message);
    }
  }

  // Additional methods 'sending data'... etc.
}

export default new SocketService();

在react组件中的用法：

import React, { useEffect } from 'react';
// ther service we created
import socketService from './socketService';

const MyComponent = () => {
  useEffect(() => {
    // Initialize the Broadcast Channel
    socketService?.initializeBroadcastChannel();

    // Connect to the socket when the component mounts
    socketService?.connect();

    // Clean up the socket connection when the component unmounts
    return () => {
      socketService?.disconnect();
      socketService?.sendBroadcastMessage('disconnect');
    };
  }, []);

  // Render your component

  return <div>My Component</div>;
};

export default MyComponent;

边注：如果您希望在页面重新加载期间保持套接字连接而不关闭它。你需要在服务器上存储连接状态，并在页面重新加载时恢复连接。
但这种方法将在后端，它的复杂性足以不浪费你的时间
您观察到的套接字连接关闭并在页面重新加载时重新建立的行为是正常的。我会争辩。