如何在Socket.IO连接中自动更新并使用新的访问令牌

// socketUtils.js
import io from "socket.io-client";

// 在模块加载时获取accessToken
const accessToken = window.localStorage.getItem("accessToken");

const socket = io("https://localhost:3000", {
  extraHeaders: {
    Authorization: `Bearer ${accessToken}`,
  },
});

socket.on("connect", () => {
  console.log("Socket connected");
});

socket.on("connect_error", (error) => {
  console.error("Socket connection error:", error);
});

// ... 其他事件监听

export default socket;

// socketUtils.js
import io from "socket.io-client";

/**
 * 初始化并返回一个Socket.IO客户端实例。
 * @param {string} accessToken - 用于认证的访问令牌。
 * @returns {Socket} Socket.IO客户端实例。
 */
const initializeSocket = (accessToken) => {
  const socket = io("https://localhost:3000", {
    extraHeaders: {
      Authorization: `Bearer ${accessToken}`,
    },
    // 可选：添加其他配置，例如重连策略
    reconnectionAttempts: 5,
    reconnectionDelay: 1000,
  });

  socket.on("connect", () => {
    console.log("Socket connected with new token.");
  });

  socket.on("connect_error", (error) => {
    console.error("Socket connection error:", error);
  });

  socket.on("disconnect", (reason) => {
    console.log("Socket disconnected:", reason);
  });

  // ... 其他事件监听

  return socket;
};

export default initializeSocket;

// tokenUtils.js
import initializeSocket from "./socketUtils"; // 导入重构后的Socket初始化函数

let currentSocket = null; // 用于存储当前的Socket实例

/**
 * 监听localStorage中accessToken的变化，并据此管理Socket连接。
 * 当accessToken变化时，断开旧连接并建立新连接。
 */
const listenForTokenChanges = () => {
  // 首次调用时，尝试使用当前存储的令牌初始化Socket
  const initialAccessToken = window.localStorage.getItem("accessToken");
  if (initialAccessToken) {
    currentSocket = initializeSocket(initialAccessToken);
  }

  // 监听localStorage的storage事件
  window.addEventListener("storage", (event) => {
    // 检查变化的键是否是"accessToken"
    if (event.key === "accessToken") {
      const newAccessToken = event.newValue; // 获取新的accessToken值

      if (newAccessToken) {
        // 如果有新的令牌，且存在旧的Socket连接，则先断开
        if (currentSocket) {
          currentSocket.disconnect();
          console.log("Old socket disconnected due to token change.");
        }
        // 使用新的令牌初始化新的Socket连接
        currentSocket = initializeSocket(newAccessToken);
        console.log("New socket initialized with updated token.");
      } else {
        // 如果newAccessToken为空（例如用户登出，令牌被清除）
        if (currentSocket) {
          currentSocket.disconnect();
          currentSocket = null; // 清除Socket实例
          console.log("Socket disconnected as accessToken was removed.");
        }
      }
    }
  });
};

/**
 * 获取当前的Socket实例。
 * @returns {Socket|null} 当前的Socket实例，如果未初始化则为null。
 */
const getSocketInstance = () => currentSocket;

export { listenForTokenChanges, getSocketInstance };

// YourAppComponent.jsx (例如 App.js 或 Layout.js)
import React, { useEffect } from "react";
import { listenForTokenChanges } from "./tokenUtils";

const YourAppComponent = () => {
  useEffect(() => {
    // 组件挂载时调用，开始监听令牌变化
    listenForTokenChanges();

    // 可选：如果需要在组件卸载时移除storage事件监听器，可以返回一个清理函数
    // 但对于全局监听，通常不需要在组件级别移除，除非有特殊需求。
    // return () => {
    //   window.removeEventListener("storage", handler);
    // };
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  return (
    <div>
      {/* 你的应用内容 */}
      <h1>Welcome to the Realtime App!</h1>
    </div>
  );
};

export default YourAppComponent;