20、Socket.io 入门指南

于 2025-11-16 15:15:04 发布
阅读量8 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 深入浅出MEAN全栈开发 文章标签： Socket.io 实时通信 Node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/perl8/article/details/155116126

Socket.io 入门指南

1. Socket.io 简介

Socket.io 由 JavaScript 开发者 Guillermo Rauch 在 2010 年创建，旨在简化 Node.js 实时应用程序的开发。经过多年发展，它经历了多次重大版本更新，最新版本拆分为两个不同的模块：engine.io 和 socket.io。

早期的 Socket.io 版本因稳定性问题受到批评，它们尝试先建立最先进的连接机制，失败后再回退到更原始的协议，这在生产环境中会引发严重问题。为解决此问题，Socket.io 团队重新设计了它，并将核心功能封装在名为 Engine.io 的基础模块中。

Engine.io 的设计理念是创建一个更稳定的实时模块，它先打开长轮询 XHR 通信，然后尝试将连接升级到 WebSockets 通道。新版 Socket.io 使用 Engine.io 模块，并为开发者提供了各种功能，如事件、房间和自动连接恢复等。

2. Socket.io 对象

当引入 socket.io 模块时，会得到两个对象：负责服务器功能的 socket 服务器对象和处理浏览器功能的 socket 客户端对象。

2.1 Socket.io 服务器对象

Socket.io 服务器对象是一切的起点。可以通过以下方式创建一个独立的 Socket.io 服务器： 

const io = require('socket.io')();
io.on('connection', function(socket){ /* ... */ });
io.listen(3000);

上述代码会在 3000 端口打开一个 Socket.io 服务器，并在 http://localhost:3000/socket.io/socket.io.js 提供 socket 客户端文件。

若要将 Socket.io 服务器与 Express 应用结合使用，代码如下： 

const app = require('express')();
const server = require('http').Server(app);
const io = require('socket.io')(server);
io.on('connection', (socket) =>  { /* ... */ });
server.listen(3000);

这里先使用 Node.js 的 http 模块创建一个服务器并包装 Express 应用，然后将服务器对象传递给 socket.io 模块，这样服务器就能同时处理 Express 应用和 Socket.io 服务器。

2.2 Socket.io 握手过程

当客户端想要连接 Socket.io 服务器时，会先发送一个握手 HTTP 请求。服务器会分析该请求，收集通信所需的信息，然后查找并执行注册的配置中间件，最后触发连接事件。当客户端成功连接到服务器时，连接事件监听器会执行，并暴露一个新的 socket 实例。

以下是处理客户端断开连接事件的示例： 

const app = require('express')();
const server = require('http').Server(app);
const io = require('socket.io')(server);
io.on('connection', (socket) => { 
  socket.on('disconnect', () => {
    console.log('user has disconnected');
  });
});
server.listen(3000);

Socket.io 提供了一种使用配置中间件拦截握手过程的方法： 

const app = require('express')();
const server = require('http').Server(app);
const io = require('socket.io')(server);
io.use((socket, next) => {
  /* ... */
  next(null, true);
});
io.on('connection', (socket) => { 
  socket.on('disconnect', () => {
    console.log('user has disconnected');
  });
});
server.listen(3000);

io.use() 方法的回调接受两个参数：socket 对象和 next 回调。next 回调用于告诉 Socket.io 是否继续握手过程。

2.3 Socket.io 客户端对象

Socket.io 客户端对象负责实现浏览器与 Socket.io 服务器的 socket 通信。可以通过以下方式简单实现： 

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
  socket.on('connect', function() {
      /* ... */
  });
</script>

默认情况下， io() 方法会自动尝试连接到默认的基础路径，也可以传递不同的服务器 URL 作为参数。

3. Socket.io 事件

Socket.io 使用模仿 WebSockets 协议的结构来处理客户端和服务器之间的通信，并通过服务器和客户端对象触发事件消息。事件分为两种类型：系统事件和自定义事件。

3.1 系统事件
  • 服务器端系统事件 ：
  • io.on('connection', ...) ：新 socket 连接时触发
  • socket.on('message', ...) ：使用 socket.send() 方法发送消息时触发
  • socket.on('disconnect', ...) ：socket 断开连接时触发
  • 客户端系统事件 ：
  • socket.io.on('open', ...) ：socket 客户端与服务器打开连接时触发
  • socket.io.on('connect', ...) ：socket 客户端连接到服务器时触发
  • socket.io.on('connect_timeout', ...) ：socket 客户端与服务器连接超时触发
  • socket.io.on('connect_error', ...) ：socket 客户端连接服务器失败触发
  • socket.io.on('reconnect_attempt', ...) ：socket 客户端尝试重新连接服务器时触发
  • socket.io.on('reconnect', ...) ：socket 客户端重新连接到服务器时触发
  • socket.io.on('reconnect_error', ...) ：socket 客户端重新连接服务器失败触发
  • socket.io.on('reconnect_failed', ...) ：socket 客户端多次重新连接服务器失败触发
  • socket.io.on('close', ...) ：socket 客户端关闭与服务器的连接时触发
3.2 自定义事件

使用 on() 方法绑定事件处理程序，使用 emit() 方法触发事件。

  • 服务器端绑定自定义事件 ： 
const app = require('express')();
const server = require('http').Server(app);
const io = require('socket.io')(server);
io.on('connection', function(socket){ 
  socket.on('customEvent', (customEventData) => {
    /* ... */
  });
});
server.listen(3000);
  • 客户端绑定自定义事件 ： 
<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
  socket.on('customEvent', function(customEventData) {
    /* ... */
  });
</script>
  • 服务器端触发自定义事件 ： 
// 发送给单个客户端
io.on('connection', (socket) => { 
  socket.emit('customEvent', customEventData);
});
// 发送给所有客户端
io.on('connection', (socket) => { 
  io.emit('customEvent', customEventData);
});
// 发送给除发送者外的所有客户端
io.on('connection', (socket) => { 
  socket.broadcast.emit('customEvent', customEventData);
});
  • 客户端触发自定义事件 ： 
const socket = io();
socket.emit('customEvent', customEventData);
4. Socket.io 命名空间和房间

为了更好地管理 socket 连接，Socket.io 提供了命名空间和房间两种分组方式。

4.1 命名空间

开发者可以使用命名空间根据用途拆分 socket 连接，使用同一个服务器创建不同的连接端点。

  • 服务器端创建命名空间 ： 
const app = require('express')();
const server = require('http').Server(app);
const io = require('socket.io')(server);
io.of('/someNamespace').on('connection', (socket) => { 
  socket.on('customEvent', (customEventData) => {
    /* ... */
  });
});
io.of('/someOtherNamespace').on('connection', (socket) => { 
  socket.on('customEvent', (customEventData) => {
    /* ... */
  });
});
server.listen(3000);
  • 客户端使用命名空间 ： 
<script src="/socket.io/socket.io.js"></script>
<script>
  var someSocket = io('/someNamespace');
  someSocket.on('customEvent', function(customEventData) {
    /* ... */
  });
  var someOtherSocket = io('/someOtherNamespace');
  someOtherSocket.on('customEvent', function(customEventData) {
    /* ... */
  });
</script>
4.2 房间

Socket.io 房间允许动态地将连接的 socket 划分为不同的组。

  • 加入和离开房间 ： 
io.on('connection', (socket) => {
    socket.on('join', (roomData) => {
        socket.join(roomData.roomName);
    })
    socket.on('leave', (roomData) => {
        socket.leave(roomData.roomName);
    })
});
  • 向房间内的所有 socket 发送事件 ： 
io.on('connection', (socket) => { 
  io.in('someRoom').emit('customEvent', customEventData);
});
  • 向房间内除发送者外的所有 socket 发送事件 ： 
io.on('connection', (socket) => { 
  socket.broadcast.to('someRoom').emit('customEvent', customEventData);
});
5. 安装和配置 Socket.io
5.1 安装

在使用 socket.io 模块之前，需要使用 npm 进行安装。修改 package.json 文件如下： 

{
  "name": "MEAN",
  "version": "0.0.9",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "app": "node server",
    "start": "concurrently \"npm run tsc:w\" \"npm run app\" ",
    "postinstall": "typings install"
  },
  "dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/router": "3.1.1",
    "body-parser": "1.15.2",
    "core-js": "2.4.1",
    "compression": "1.6.0",
    "connect-flash": "0.1.1",
    "ejs": "2.5.2",
    "express": "4.14.0",
    "express-session": "1.14.1",
    "method-override": "2.3.6",
    "mongoose": "4.6.5",
    "morgan": "1.7.0",
    "passport": "0.3.2",
    "passport-facebook": "2.1.1",
    "passport-google-oauth": "1.0.0",
    "passport-local": "1.0.0",
    "passport-twitter": "1.0.4",
    "reflect-metadata": "0.1.8",
    "rxjs": "5.0.0-beta.12",
    "socket.io": "1.4.5",
    "systemjs": "0.19.39",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "concurrently": "3.1.0",
    "traceur": "0.0.111",
    "typescript": "2.0.3",
    "typings": "1.4.0"
  }
}

然后在应用程序的根文件夹中执行以下命令： 

$ npm install
5.2 配置

安装完成后，需要在 Express 应用中配置 Socket.io。修改 config/express.js 文件如下： 

const path = require('path');
const config = require('./config');
const http = require('http');
const socketio = require('socket.io');
const express = require('express');
const morgan = require('morgan');
const compress = require('compression');
const bodyParser = require('body-parser');
const methodOverride = require('method-override');
const session = require('express-session');
const flash = require('connect-flash');
const passport = require('passport');
module.exports = function() {
  const app = express();
  const server = http.createServer(app);
  const io = socketio.listen(server);
  if (process.env.NODE_ENV === 'development') {
    app.use(morgan('dev'));
  } else if (process.env.NODE_ENV === 'production') {
    app.use(compress());
  }
  app.use(bodyParser.urlencoded({
    extended: true
  }));
  app.use(bodyParser.json());
  app.use(methodOverride());
  app.use(session({
    saveUninitialized: true,
    resave: true,
    secret: config.sessionSecret
  }));
  app.set('views', './app/views');
  app.set('view engine', 'ejs');
  app.use(flash());
  app.use(passport.initialize());
  app.use(passport.session());
  app.use('/', express.static(path.resolve('./public')));
  app.use('/lib', express.static(path.resolve('./node_modules')));
  require('../app/routes/users.server.routes.js')(app);
  require('../app/routes/articles.server.routes.js')(app);
  require('../app/routes/index.server.routes.js')(app);
  return server;
};

上述配置使用 http 模块创建一个服务器对象，将 Express 应用包装在其中，然后使用 socket.io 模块的 listen() 方法将 Socket.io 服务器附加到该服务器对象上。最后返回新的服务器对象，这样服务器启动时就会同时运行 Express 应用和 Socket.io 服务器。

Socket.io 工作流程 mermaid 流程图 

graph LR
    classDef startend fill:#F5EBFF,stroke:#BE8FED,stroke-width:2px
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px
    classDef decision fill:#FFF6CC,stroke:#FFBC52,stroke-width:2px

    A([客户端发起连接]):::startend --> B(发送握手 HTTP 请求):::process
    B --> C{服务器分析请求}:::decision
    C -->|查找配置中间件| D(执行配置中间件):::process
    D --> E(触发连接事件):::process
    E --> F([客户端与服务器建立连接]):::startend
    F --> G{事件处理}:::decision
    G -->|系统事件| H(执行系统事件处理程序):::process
    G -->|自定义事件| I(执行自定义事件处理程序):::process
    H --> J{是否断开连接}:::decision
    I --> J
    J -->|是| K(触发断开连接事件):::process
    J -->|否| G
    K --> L([客户端与服务器断开连接]):::startend

Socket.io 事件类型表格

事件类型 服务器端事件 客户端事件
系统事件 io.on('connection', ...)
socket.on('message', ...)
socket.on('disconnect', ...) 		socket.io.on('open', ...)
socket.io.on('connect', ...)
socket.io.on('connect_timeout', ...)
socket.io.on('connect_error', ...)
socket.io.on('reconnect_attempt', ...)
socket.io.on('reconnect', ...)
socket.io.on('reconnect_error', ...)
socket.io.on('reconnect_failed', ...)
socket.io.on('close', ...)
自定义事件 socket.on('customEvent', ...) socket.on('customEvent', ...)

通过以上内容，你可以全面了解 Socket.io 的基本概念、使用方法以及如何在 Express 应用中安装和配置它。希望这篇文章能帮助你顺利开展实时应用程序的开发。

Socket.io 入门指南

6. 利用 Socket.io 实现实时交互的优势

Socket.io 为实时应用开发带来了诸多显著优势，使其成为开发者的首选工具之一。

  • 跨浏览器兼容性 ：不同浏览器对 WebSockets 协议的支持程度存在差异，而 Socket.io 会自动检测浏览器的能力，并选择最合适的传输机制，如长轮询、WebSocket 等，确保在各种浏览器中都能实现稳定的实时通信。
  • 自动重连机制 ：在网络不稳定的情况下，Socket.io 能够自动尝试重新连接服务器，保证通信的连续性。当网络恢复后，客户端会自动重新建立与服务器的连接，无需用户手动干预。
  • 事件驱动架构 ：采用事件驱动的方式处理通信，使得代码结构清晰，易于维护和扩展。开发者可以根据不同的业务需求定义各种自定义事件，将业务逻辑与通信逻辑分离，提高代码的可维护性。
  • 分组管理功能 ：命名空间和房间的概念为管理大量连接提供了便利。通过将连接分组，可以针对不同的用户群体或业务场景进行精细化管理，提高系统的性能和可扩展性。
7. Socket.io 在实际项目中的应用场景

Socket.io 的强大功能使其在多个领域都有广泛的应用，以下是一些常见的应用场景。

  • 在线聊天应用 ：实时聊天是 Socket.io 最典型的应用场景之一。通过 Socket.io 可以实现一对一聊天、群组聊天等功能，用户发送的消息能够实时显示在其他用户的界面上，提供流畅的聊天体验。
  • 实时协作工具 ：如在线文档编辑、实时绘图等应用，多个用户可以同时对同一个文档或绘图进行编辑，所有的操作都会实时同步到其他用户的界面上，实现高效的协作。
  • 实时数据监控 ：在物联网、金融等领域，需要实时监控各种数据的变化。Socket.io 可以将传感器数据、股票行情等实时数据推送给客户端，让用户及时了解数据的最新情况。
  • 多人游戏 ：在多人在线游戏中，Socket.io 可以实现玩家之间的实时交互，如位置同步、动作反馈等，为玩家提供沉浸式的游戏体验。
8. 优化 Socket.io 性能的技巧

为了确保 Socket.io 应用在高并发场景下的性能和稳定性，需要采取一些优化措施。

  • 合理使用命名空间和房间 ：根据业务需求合理划分命名空间和房间，避免将过多的连接集中在一个命名空间或房间中，减少不必要的消息广播，提高系统的性能。
  • 压缩数据传输 ：在发送数据时，可以对数据进行压缩处理，减少数据传输量，提高传输效率。例如，使用 JSON 压缩库对 JSON 数据进行压缩。
  • 优化事件处理逻辑 ：避免在事件处理程序中执行耗时的操作，如数据库查询、文件读写等。可以将这些操作异步化，避免阻塞事件循环，确保系统的响应速度。
  • 使用负载均衡 ：在高并发场景下，可以使用负载均衡器将客户端的连接均匀分配到多个服务器上，避免单个服务器负载过高。常见的负载均衡器有 Nginx、HAProxy 等。
9. 常见问题及解决方案

在使用 Socket.io 过程中，可能会遇到一些常见的问题，以下是一些问题及对应的解决方案。

  • 连接不稳定 ：检查网络环境是否稳定，确保服务器和客户端之间的网络畅通。可以尝试增加自动重连的重试次数和间隔时间，提高连接的稳定性。
  • 消息丢失 ：确保消息的发送和接收逻辑正确，避免在处理消息时出现异常。可以使用确认机制，让客户端在收到消息后发送确认信息，确保消息的可靠传输。
  • 性能问题 ：按照前面提到的优化技巧进行性能优化，如合理使用命名空间和房间、压缩数据传输等。可以使用性能分析工具对应用进行性能分析，找出性能瓶颈并进行优化。

Socket.io 应用优化步骤列表

  1. 分析业务需求 ：明确应用的功能和性能要求，确定是否需要使用命名空间和房间进行分组管理。
  2. 优化数据传输 ：对发送的数据进行压缩处理，减少数据传输量。
  3. 异步处理耗时操作 ：将事件处理程序中的耗时操作异步化，避免阻塞事件循环。
  4. 使用负载均衡 ：在高并发场景下，使用负载均衡器将客户端的连接均匀分配到多个服务器上。
  5. 性能测试和调优 ：使用性能分析工具对应用进行性能测试，找出性能瓶颈并进行优化。

Socket.io 常见问题及解决方案表格

问题 可能原因 解决方案
连接不稳定 网络环境不佳、服务器负载过高 检查网络连接、增加自动重连重试次数和间隔时间、使用负载均衡
消息丢失 消息处理逻辑错误、网络波动 检查消息处理逻辑、使用确认机制确保消息可靠传输
性能问题 命名空间和房间使用不合理、数据传输量大、事件处理程序耗时 合理使用命名空间和房间、压缩数据传输、异步处理耗时操作

Socket.io 性能优化 mermaid 流程图 

graph LR
    classDef startend fill:#F5EBFF,stroke:#BE8FED,stroke-width:2px
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px

    A([开始优化]):::startend --> B(分析业务需求):::process
    B --> C(优化数据传输):::process
    C --> D(异步处理耗时操作):::process
    D --> E(使用负载均衡):::process
    E --> F(性能测试和调优):::process
    F --> G([优化完成]):::startend

通过以上对 Socket.io 的深入介绍，你已经了解了它的基本概念、使用方法、应用场景以及优化技巧。希望这些内容能帮助你在实际项目中更好地使用 Socket.io，开发出高效、稳定的实时应用程序。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值