Socket.IO 简明教程：实时通信的基础知识

Socket.IO 是一个强大的 JavaScript 库，用于实现客户端和服务器之间的实时、双向通信。它广泛应用于实时聊天、游戏、直播等场景。以下是 Socket.IO 的一些基本概念和使用方法。

1. 连接和断开事件

io.on("connection", (socket) => {...}): 当客户端连接到服务器时触发。
socket.on("disconnect", () => {...}): 当客户端断开连接时触发。

示例代码

javascript 复制代码

// 服务器端
const io = require('socket.io')(3000);

io.on('connection', (socket) => {
  console.log('客户端连接');
  
  socket.on('disconnect', () => {
    console.log('客户端断开连接');
  });
});

2. 事件发送和监听

socket.emit(eventName, ...args): 向客户端或服务器发送事件。
socket.on(eventName, (args) => {...}): 监听来自客户端或服务器的事件。

示例代码

javascript 复制代码

// 服务器端
io.on('connection', (socket) => {
  socket.on('hello', (arg) => {
    console.log(arg); // 'world'
    socket.emit('hello', 'got it'); // 回复客户端
  });
});

// 客户端
const socket = io('http://localhost:3000');
socket.emit('hello', 'world');
socket.on('hello', (arg) => {
  console.log(arg); // 'got it'
});

3. 房间管理

socket.join(roomName): 将客户端加入到指定房间。
socket.leave(roomName): 将客户端从指定房间移除。
io.to(roomName).emit(eventName, ...args): 向指定房间内的所有客户端发送事件。

示例代码

javascript 复制代码

// 服务器端
io.on('connection', (socket) => {
  socket.join('room1');
  io.to('room1').emit('message', 'Hello, room1!');
});

4. 错误处理

socket.io.on("error", (error) => {...}): 监听连接错误。

示例代码

javascript 复制代码

socket.io.on("error", (error) => {
  console.log('连接错误:', error);
});

5. 重新连接

socket.io.on("reconnect", (attempt) => {...}): 监听成功重新连接事件。
socket.io.on("reconnect_attempt", (attempt) => {...}): 监听重新连接尝试事件。

示例代码

javascript 复制代码

socket.io.on("reconnect", (attempt) => {
  console.log('成功重新连接，尝试次数:', attempt);
});

6. 心跳机制

Socket.IO 自带心跳机制，用于检测连接状态。心跳间隔可以通过配置进行调整。

7. 数据缓冲

当客户端断开连接时，数据会被缓冲，直到客户端重新连接。这种机制确保了数据不丢失。

总结

Socket.IO 为开发实时应用提供了强大的支持。通过这些基本的 API，你可以轻松实现实时通信、房间管理、错误处理等功能。以下是一个完整的示例代码，展示了如何使用 Socket.IO 建立一个简单的实时聊天应用：

javascript 复制代码

// 服务器端
const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('客户端连接');
  
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });
  
  socket.on('disconnect', () => {
    console.log('客户端断开连接');
  });
});

server.listen(3000, () => {
  console.log('服务器启动，监听端口 3000');
});

// 客户端（index.html）

  const socket = io('http://localhost:3000');
  
  document.getElementById('send').addEventListener('click', () => {
    const message = document.getElementById('message').value;
    socket.emit('chat message', message);
    document.getElementById('message').value = '';
  });
  
  socket.on('chat message', (msg) => {
    const item = document.createElement('li');
    item.textContent = msg;
    document.getElementById('messages').appendChild(item);
  });

这个示例展示了如何使用 Socket.IO 实现实时聊天功能，包括客户端与服务器的连接、消息发送和接收。