在Socket.IO连接中实现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事件监听 ...

export default socket;

// src/utils/socketInitializer.js
import io from "socket.io-client";

/**
 * 根据给定的Access Token初始化并返回一个新的Socket.IO连接实例。
 * @param {string} accessToken - 用于认证的Access Token。
 * @returns {Socket} - Socket.IO连接实例。
 */
const initializeSocket = (accessToken) => {
  if (!accessToken) {
    console.warn("未提供Access Token，Socket连接可能无法认证。");
    // 或者可以返回一个空对象/null，或者抛出错误，取决于业务需求
  }

  const socket = io("https://localhost:3000", {
    extraHeaders: {
      Authorization: `Bearer ${accessToken}`,
    },
    // 可选：添加其他配置，例如重连策略
    reconnectionAttempts: 5,
    reconnectionDelay: 1000,
  });

  socket.on("connect", () => {
    console.log("Socket连接已建立，ID:", socket.id);
  });

  socket.on("disconnect", (reason) => {
    console.log("Socket连接已断开:", reason);
  });

  socket.on("connect_error", (error) => {
    console.error("Socket连接错误:", error.message);
  });

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

  return socket;
};

export default initializeSocket;

// src/utils/tokenWatcher.js
import initializeSocket from "./socketInitializer"; // 导入新的初始化函数

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

/**
 * 获取当前有效的Access Token。
 * @returns {string | null} Access Token 或 null。
 */
const getAccessToken = () => {
  return window.localStorage.getItem("accessToken");
};

/**
 * 初始化Socket连接。
 * 如果存在旧连接，会先断开。
 */
const connectSocket = () => {
  const newAccessToken = getAccessToken();
  if (currentSocket) {
    console.log("检测到旧Socket连接，正在断开...");
    currentSocket.disconnect(); // 断开旧连接
    currentSocket = null;
  }

  if (newAccessToken) {
    console.log("使用新的Access Token建立Socket连接...");
    currentSocket = initializeSocket(newAccessToken); // 建立新连接
  } else {
    console.warn("当前没有Access Token，无法建立Socket连接。");
  }
};

/**
 * 启动监听localStorage中accessToken变化的机制。
 * 当accessToken变化时，断开旧连接并建立新连接。
 */
const listenForTokenChanges = () => {
  // 首次调用时，立即尝试建立连接
  connectSocket();

  window.addEventListener("storage", (event) => {
    // 仅处理accessToken键的变化
    if (event.key === "accessToken") {
      const newAccessToken = event.newValue;
      const oldAccessToken = event.oldValue;

      // 只有当Token实际发生变化时才执行重连
      if (newAccessToken !== oldAccessToken) {
        console.log("localStorage中的accessToken发生变化。");
        connectSocket(); // 重新连接Socket
      }
    }
  });
};

/**
 * 获取当前活动的Socket实例。
 * @returns {Socket | null} 当前Socket实例或null。
 */
const getSocketInstance = () => currentSocket;

export { listenForTokenChanges, getSocketInstance };

// src/App.js 或 src/components/YourAppComponent.js
import React, { useEffect } from "react";
import { listenForTokenChanges, getSocketInstance } from "./utils/tokenWatcher";

const App = () => {
  useEffect(() => {
    // 在组件挂载时启动Token监听和Socket连接
    listenForTokenChanges();

    // 可选：在组件卸载时清理事件监听器和Socket连接
    return () => {
      // 注意：由于listenForTokenChanges内部会处理断开，这里通常不需要额外处理
      // 但如果需要完全移除storage监听器，可以在tokenWatcher中暴露一个cleanup函数
      // window.removeEventListener("storage", handler);
      const socket = getSocketInstance();
      if (socket) {
        socket.disconnect();
      }
    };
  }, []); // 空依赖数组确保只在组件挂载和卸载时执行一次

  // 可以在这里或其他子组件中使用 getSocketInstance() 来获取当前的socket实例
  // 例如：
  // const socket = getSocketInstance();
  // if (socket) {
  //   socket.emit("message", "Hello from client!");
  // }

  return (
    <div>
      <h1>我的实时应用</h1>
      {/* 你的其他组件和路由 */}
    </div>
  );
};

export default App;