Frontend Academy · 课时

Socket.io 客户端集成

Q: 「Socket.io 客户端集成」这节课中我会学到什么？

连接 Socket.io 客户端，监听命名事件，向服务器发送数据，处理重连逻辑，并在客户端管理房间。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

连接 Socket.io 客户端，监听命名事件，向服务器发送数据，处理重连逻辑，并在客户端管理房间。

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

Socket.io 相比原生 WebSocket 的新增功能

Socket.io 是构建在 WebSocket 之上的热门库。它增加了：自动重新连接、长轮询回退、房间/命名空间、确认回调和命名事件。它将客户端库与服务器库（Node.js）配套使用。

安装客户端

请安装 socket.io-client。它必须与服务器的主版本匹配。

npm install socket.io-client

连接

导入 io 并连接到服务器 URL。该操作会返回一个套接字实例。

import { io } from 'socket.io-client';

const socket = io('https://api.example.com', {
  transports: ['websocket'], // skip polling fallback for speed
  auth: { token: localStorage.getItem('jwt') }
});

socket.on('connect', () => console.log('connected', socket.id));

发送事件

socket.emit(eventName, payload) 会发送带数据的命名事件——比原生 send 加 JSON.parse 整洁得多。

socket.emit('chat-message', {
  room: 'general',
  text: 'Hello everyone!'
});

socket.emit('typing', { user: 'Alice' });

监听事件

socket.on(eventName, handler) 会注册监听器。服务器发送的事件会在这里到达。

socket.on('chat-message', (msg) => {
  console.log(`${msg.user}: ${msg.text}`);
  appendMessage(msg);
});

socket.on('user-joined', (user) => {
  console.log(`${user.name} joined`);
});

确认（确认回调）

将回调作为 emit 的最后一个参数传入——服务器可以使用响应调用它。这类似于 RPC。

socket.emit('create-post', { title: 'Hello' }, (response) => {
  if (response.error) {
    console.error(response.error);
  } else {
    console.log('Created post', response.id);
  }
});

基于 Promise 的 emitWithAck

现代 Socket.io 提供了会返回 promise 的 emitWithAck。

try {
  const response = await socket.emitWithAck('create-post', { title: 'Hello' });
  console.log('Created', response.id);
} catch (err) {
  console.error('Failed', err);
}

房间

房间是服务器端对套接字进行分组的机制。客户端通过发送事件加入或离开房间；服务器使用 io.to(room).emit() 进行广播。

// Client:
socket.emit('join-room', { roomId: 'general' });

// Listen to messages in any room you've joined:
socket.on('room-message', ({ room, message }) => {
  if (room === activeRoom) appendMessage(message);
});

// Leave:
socket.emit('leave-room', { roomId: 'general' });

命名空间

命名空间是同一服务器上的独立通信频道，例如 /chat 和 /admin。将命名空间追加到 URL 末尾即可连接。

const chatSocket = io('https://api/chat');
const adminSocket = io('https://api/admin');

内置重新连接

Socket.io 会使用指数退避自动重新连接。您可以通过选项进行配置。

const socket = io({
  reconnection: true,
  reconnectionAttempts: Infinity,
  reconnectionDelay: 1000,
  reconnectionDelayMax: 30000,
  randomizationFactor: 0.5
});

socket.on('reconnect', (attempt) => console.log('reconnected after', attempt));
socket.on('reconnect_attempt', (attempt) => console.log('trying...', attempt));

断开连接处理

请监听断开事件以更新界面（显示“正在重新连接……”横幅）。

socket.on('disconnect', (reason) => {
  console.log('Disconnected:', reason);
  if (reason === 'io server disconnect') {
    // Server kicked us — must reconnect manually
    socket.connect();
  }
});

React 集成

请将套接字生命周期封装在自定义钩子或 Context 提供程序中。

// useSocket.ts
import { useEffect, useState } from 'react';
import { io, Socket } from 'socket.io-client';

let socket: Socket;

export function useSocket() {
  const [connected, setConnected] = useState(false);
  useEffect(() => {
    if (!socket) socket = io('/');
    socket.on('connect', () => setConnected(true));
    socket.on('disconnect', () => setConnected(false));
    return () => { /* keep socket alive across remounts */ };
  }, []);
  return { socket, connected };
}

何时使用 Socket.io，何时使用原生 WebSocket

Socket.io：当您希望开箱即用地获得房间、确认回调、自动重新连接和传输回退时使用。原生 WebSocket：当您需要直接控制协议、最小化包体积，或需要与非 Socket.io 服务器互操作时使用。

快速检查

Socket.io 的 emit(event, payload, callback) 第三个参数中的回调可以实现什么功能？

回顾：Socket.io 客户端

这是构建在 WebSocket 之上的库，提供房间、命名空间、确认、自动重新连接和轮询回退。io(url, options) 用于连接。emit(event, payload) 发送命名事件；on(event, handler) 负责监听。第三个参数中的回调或 emitWithAck 可用于 RPC 风格的调用。房间由服务器管理，命名空间通过 URL 后缀指定。重新连接功能是内置的。在 React 中使用钩子封装生命周期。

常见问题解答

「Socket.io 客户端集成」课时是免费的吗？

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

「Socket.io 客户端集成」这节课中我会学到什么？

连接 Socket.io 客户端，监听命名事件，向服务器发送数据，处理重连逻辑，并在客户端管理房间。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

「Socket.io 客户端集成」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Frontend Academy