React Academy · 课时

在 React 中使用 Socket.IO

Q: 「在 React 中使用 Socket.IO」这节课中我会学到什么？

从 React 连接 Socket.IO 服务器，监听事件，并通过钩子发送消息。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

从 React 连接 Socket.IO 服务器，监听事件，并通过钩子发送消息。

第 2 / 4 课13 个步骤

在 React 中使用 Socket.IO 是 CoddyKit 上的免费 React Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

为什么选择 Socket.IO

Socket.IO 在 WebSockets 之上增加了房间、命名空间、自动重连和基于事件的消息传递，并支持回退到 HTTP 长轮询——比原生 WebSocket 更易于使用。

安装客户端

安装 Socket.IO 客户端包。

npm install socket.io-client

创建套接字实例

在 React 组件之外调用 io(url)，这样连接可以共享，不会在每次重新渲染时重新创建。将其导出为单例。

// src/lib/socket.ts
import { io } from 'socket.io-client';

export const socket = io('https://api.example.com', {
  autoConnect: false, // connect manually
  withCredentials: true,
});

在 useEffect 中连接

组件挂载时连接，卸载时断开连接，以避免留下悬挂连接。

useEffect(() => {
  socket.connect();

  return () => {
    socket.disconnect();
  };
}, []);

监听事件

使用 socket.on('event', handler) 进行订阅。在清理函数中移除监听器，以防止重新渲染时出现重复处理程序。

useEffect(() => {
  function onMessage(data) {
    setMessages(prev => [...prev, data]);
  }

  socket.on('message', onMessage);

  return () => {
    socket.off('message', onMessage);
  };
}, []);

触发事件

调用 socket.emit('event', data) 向服务器发送数据。您也可以选择将回调函数（确认回调）作为最后一个参数传入。

function sendMessage(text) {
  socket.emit('message', { text, timestamp: Date.now() }, (ack) => {
    console.log('Server acknowledged:', ack);
  });
}

自定义 useSocket 钩子

将套接字连接逻辑封装到自定义钩子中，以便在多个组件之间复用。

function useSocket(event, handler) {
  useEffect(() => {
    socket.on(event, handler);
    return () => socket.off(event, handler);
  }, [event, handler]);
}

// Usage:
useSocket('message', (data) => setMessages(m => [...m, data]));

房间与命名空间

通过触发加入事件加入房间（由服务器端处理）。使用命名空间（io('/chat')）在连接层级划分套接字流量。

// Join a room
socket.emit('join-room', 'room-123');

// Connect to a namespace
const chatSocket = io('https://api.example.com/chat');

连接状态

通过 connect、disconnect 和 connect_error 事件跟踪连接状态。

const [isConnected, setIsConnected] = useState(socket.connected);

useEffect(() => {
  socket.on('connect', () => setIsConnected(true));
  socket.on('disconnect', () => setIsConnected(false));
  return () => {
    socket.off('connect');
    socket.off('disconnect');
  };
}, []);

易失性发送

对于偶尔丢失数据包也可以接受的消息（例如光标位置、游戏状态），请使用 socket.volatile.emit()。

// Position updates — OK to lose some
function onMouseMove(e) {
  socket.volatile.emit('cursor', { x: e.clientX, y: e.clientY });
}

Socket.IO 与原生 WebSocket

Socket.IO 在 WebSocket 之上增加了房间管理、命名空间、自动重连和二进制支持。如果您需要最小开销，或服务器不支持 Socket.IO，请使用原生 WebSocket。

快速检查

为什么应在 useEffect 清理过程中移除 Socket.IO 事件监听器？

在交互式课程中回答

要点回顾

使用 io(url, { autoConnect: false }) 创建单例 socket 实例。在 useEffect 中连接和断开连接，始终在清理过程中移除监听器，并使用 socket.emit() 触发事件。将逻辑封装到自定义钩子中以便复用。

免费开始

用 AI 导师学习 React — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 88
课程: 324

免费开始学习查看完整课程

常见问题解答

「在 React 中使用 Socket.IO」课时是免费的吗？

是的 — 「在 React 中使用 Socket.IO」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「在 React 中使用 Socket.IO」这节课中我会学到什么？

从 React 连接 Socket.IO 服务器，监听事件，并通过钩子发送消息。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「在 React 中使用 Socket.IO」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy