Redux & Socket IO代理错误：登录后初始化Socket实例的实现问题

我之前做项目时也碰到过一模一样的需求——想用redux-socket.io管理Socket连接，但又不想在创建Redux Store时就初始化，得等用户登录后再建立连接。折腾了一阵后，找到了可行的实现方式，分享给你：

核心思路 #

redux-socket.io其实暴露了动态替换Socket实例的方法，我们可以先给一个空的“占位socket”让中间件初始化，等登录成功后再换成真实的Socket.IO连接，登出时再清理掉。

步骤1：创建Store时用空Socket占位 #

创建Store的时候，先不传真实的Socket实例，而是搞个模拟了基本方法的空对象，避免中间件初始化报错：

import { createStore, applyMiddleware } from 'redux';
import createSocketIoMiddleware from 'redux-socket.io';

// 空Socket占位，模拟socket的基础方法
const emptySocket = {
  on: () => {},
  off: () => {},
  emit: () => {},
  connect: () => {},
  disconnect: () => {}
};

// 创建socket中间件，先传入空占位
const socketIoMiddleware = createSocketIoMiddleware(emptySocket, 'socket/');

// 初始化Store
const store = createStore(
  rootReducer,
  applyMiddleware(socketIoMiddleware)
);

// 导出store和中间件，后续用来更新socket实例
export { store, socketIoMiddleware };

步骤2：登录成功后替换为真实Socket连接 #

等用户登录成功（比如拿到鉴权token后），再初始化真实的Socket.IO连接，然后用中间件的setSocket方法替换掉之前的空占位：

import io from 'socket.io-client';
import { socketIoMiddleware, store } from './store';

// 登录成功后的处理函数
const handleLoginSuccess = (token) => {
  // 初始化真实Socket连接，带上token做鉴权
  const realSocket = io('你的Socket服务地址', {
    query: { token }
  });

  // 替换redux-socket.io里的socket实例
  socketIoMiddleware.setSocket(realSocket);

  // 监听连接状态，同步到Redux
  realSocket.on('connect', () => {
    console.log('Socket连接成功');
    store.dispatch({ type: 'SOCKET_CONNECTED' });
  });

  realSocket.on('disconnect', () => {
    console.log('Socket断开');
    store.dispatch({ type: 'SOCKET_DISCONNECTED' });
  });
};

步骤3：登出时清理Socket连接 #

用户登出时，记得断开当前Socket连接，再换回空占位，避免后续操作报错：

const handleLogout = () => {
  const currentSocket = socketIoMiddleware.getSocket();
  // 断开连接
  currentSocket.disconnect();
  
  // 换回空占位
  const emptySocket = {
    on: () => {},
    off: () => {},
    emit: () => {},
    connect: () => {},
    disconnect: () => {}
  };
  socketIoMiddleware.setSocket(emptySocket);

  // 通知Redux用户已登出
  store.dispatch({ type: 'USER_LOGOUT' });
};

这个方法我在实际项目中用过，完全能满足“登录后才建立Socket连接”的需求，而且和redux-socket.io的适配也很好，不会有冲突问题。

内容的提问来源于stack exchange，提问作者red house 87