自动更新Socket连接中的Access Token并处理存储变化

// socketUtils.js (原始实现)
import io from "socket.io-client";

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 - 用于认证的Access Token。
 * @returns {Socket} Socket.IO连接实例。
 */
const initializeSocket = (accessToken) => {
  if (!accessToken) {
    console.warn("Access Token is missing for Socket connection.");
    // 可以选择返回null或抛出错误，或建立一个未认证的连接
    // 对于需要认证的场景，通常不建议在无token时建立连接
    // return null;
  }

  const socket = io("https://localhost:3000", {
    extraHeaders: {
      Authorization: accessToken ? `Bearer ${accessToken}` : '', // 确保在无token时不会发送无效头
    },
    // 可以在这里添加其他配置，例如 reconnectionAttempts, reconnectionDelay等
  });

  socket.on("connect", () => {
    console.log("Socket connected with token:", accessToken ? "present" : "missing");
  });

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

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

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

  // 在这里可以添加更多的通用事件监听器

  return socket;
};

export default initializeSocket;

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

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

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

/**
 * 监听localStorage中Access Token的变化，并动态更新Socket连接。
 */
export const listenForTokenChanges = () => {
  // 初始化时，尝试获取localStorage中的token并建立初始连接
  const initialAccessToken = window.localStorage.getItem("accessToken");
  if (initialAccessToken) {
    currentSocket = initializeSocket(initialAccessToken);
  } else {
    console.warn("No initial Access Token found. Socket connection might not be established.");
  }

  // 注册storage事件监听器
  window.addEventListener("storage", (event) => {
    // 检查是否是accessToken键发生了变化
    if (event.key === "accessToken") {
      const newAccessToken = event.newValue; // 获取新的Access Token

      if (newAccessToken) {
        // 如果有新的Access Token
        if (currentSocket) {
          // 如果存在旧的Socket连接，先断开它
          console.log("Disconnecting old socket due to token change...");
          currentSocket.disconnect();
        }
        // 使用新的Access Token建立新的Socket连接
        console.log("Establishing new socket connection with updated token.");
        currentSocket = initializeSocket(newAccessToken);
      } else {
        // 如果新的Access Token为空（例如用户注销）
        if (currentSocket) {
          console.log("Disconnecting socket as Access Token was removed.");
          currentSocket.disconnect();
          currentSocket = null; // 清除socket引用
        }
      }
    }
  });
};

// YourComponent.jsx
import React, { useEffect } from "react";
import { listenForTokenChanges, getSocket } from "./tokenUtils"; // 导入监听函数和获取socket的函数

const YourComponent = () => {
  useEffect(() => {
    // 组件挂载时，启动Access Token变化监听
    listenForTokenChanges();

    // 如果需要直接在组件中使用socket实例，可以在这里获取
    // const socket = getSocket();
    // if (socket) {
    //   // 可以在这里添加组件特有的socket事件监听
    //   socket.on("someEvent", (data) => {
    //     console.log("Received some event:", data);
    //   });
    // }

    // 返回一个清理函数，在组件卸载时移除事件监听器 (可选，但推荐)
    // 注意：这里的清理仅针对 storage 事件，socket的断开由tokenUtils内部处理
    return () => {
      // 理论上，如果socket是全局管理的，这里不需要特殊清理storage事件，
      // 因为它是在模块级别注册的。但如果你的应用有特殊生命周期管理，可以考虑
      // window.removeEventListener("storage", yourStorageEventHandler);
      // 但对于本例的全局监听，通常不需要在这里移除。
    };
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  // 假设你的组件需要渲染一些内容
  return (
    <div>
      <h1>实时聊天应用</h1>
      <p>Socket连接状态将根据Access Token自动更新。</p>
      {/* 你的其他UI和逻辑 */}
    </div>
  );
};

export default YourComponent;