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

相关推荐
zwjapple2 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20204 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem5 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊5 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术5 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing5 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止5 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall5 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴5 小时前
简单入门Python装饰器
前端·python
袁煦丞6 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作