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 实现实时聊天功能,包括客户端与服务器的连接、消息发送和接收。

相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
uhakadotcom9 小时前
视频直播与视频点播:基础知识与应用场景
后端·面试·架构
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
快速开始使用 n8n
后端·面试·github
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github