如何使用React客户端自动接收Socket.io服务端推送的消息

算力阿峰

2026-9-25

问题解决方案

1. 修正socket实例初始化方式

禁止在组件渲染逻辑内直接创建socket实例，避免每次重渲染生成新实例导致监听绑定失效，推荐在组件外全局初始化：

import { io } from 'socket.io-client'
// 全局初始化，整个应用共用一个socket实例
const socket = io('你的服务端访问地址')

function ChatPage() {
  // 组件业务逻辑
}

如果需要在组件内初始化，用useRef存储实例避免被重渲染重置：

import { useRef, useEffect } from 'react'
import { io } from 'socket.io-client'

function ChatPage() {
  const socketRef = useRef(null)
  useEffect(() => {
    socketRef.current = io('你的服务端访问地址')
    // 组件卸载时断开连接
    return () => socketRef.current.disconnect()
  }, [])
}

2. 调整监听事件注册逻辑

必须将socket.on监听逻辑放在依赖项为空的useEffect中，确保组件挂载完成后立刻注册监听，不要和按钮点击逻辑绑定：

import { useState, useEffect } from 'react'

function ChatPage() {
  const [messageList, setMessageList] = useState([])

  useEffect(() => {
    // 定义消息处理函数
    const handleReceiveMsg = (msg) => {
      // 必须返回新的数组引用，触发React重渲染，禁止直接push修改原state
      setMessageList(prevList => [...prevList, msg])
    }
    // 注册监听
    socket.on('send_message', handleReceiveMsg)
    // 组件卸载时移除监听，避免内存泄漏和重复触发
    return () => socket.off('send_message', handleReceiveMsg)
  }, []) // 空依赖，仅在组件挂载时执行一次
}