Node.js精进（11）——Socket.IO
Socket.IO 是一个建立在 WebSocket 协议之上的库，可以在客户端和服务器之间实现低延迟、双向和基于事件的通信。
并且提供额外的保证，例如回退到 HTTP 长轮询、自动重连、数据包缓冲、多路复用等。
WebSocket 是一种基于 TCP 协议在服务器和浏览器之间提供全双工和低延迟通道的通信协议。
注意，Socket.IO 不是 WebSocket 的实现。尽管 Socket.IO 确实在可能的情况下使用 WebSocket 进行传输，但它为每个数据包添加了额外的元数据。
这就是为什么 WebSocket 客户端将无法成功连接到 Socket.IO 服务器，而 Socket.IO 客户端也将无法连接到普通的 WebSocket 服务器。
如果需要一个普通的 WebSocket 服务器，可以使用 ws 或 µWebSockets.js。
在 Socket.IO 的底层依赖 Engine.IO 引擎，它是跨浏览器/跨设备双向通信层的实现，可处理各种传输、升级机制和断线检测等。
刚刚所说的自动重连、数据包缓冲、多路复用等附加功能都是 Engine.IO 引擎提供的能力。
本系列所有的示例源码都已上传至Github，点击此处获取。
一、广播
现在来建立一个提供表单和消息列表的简单 HTML 网页，用 Socket.IO 广播消息（如下图所示），并且可以在页面中呈现消息内容。
1） HTTP 服务器
首先安装 socket.io 包：npm install socket.io。
然后创建一个 HTTP 服务器，用于接收 HTML 和 JavaScript 文件的请求，内部实现了个简单的路由。
其中 URL 实例用于解析请求地址，最终响应的内容是通过 fs.readFileSync() 同步读取到的。
index.html 文件的内容会在后文给出，socket.io.js 是从 node_modules/socket.io/client-dist/socket.io.js 目录中复制过来的。
const http = require('http');
const fs = require('fs');
// HTTP服务器
const server = http.createServer((req, res) => {
// 实例化 URL 类
const url = new URL(req.url, 'http://localhost:1234');
const { pathname } = url;
// 路由
if(pathname === '/') {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(fs.readFileSync('./index.html'));
}else if(pathname === '/socket.io.js') {
res.writeHead(200, { 'Content-Type': 'application/javascript' });
res.end(fs.readFileSync('../socket.io.js'));
}
});
// 监控端口
server.listen(1234);
2）Socket.IO 服务器
接着是创建 Socket.IO 服务器，其中 socket.id 是每个新连接都会被分配到的一个随机的 20 个字符的标识符，此标识符与客户端的值同步。
connection 是建立连接时的事件，disconnect 是断开连接时的事件，chat message 是注册的接收消息的自定义事件。
const { Server } = require("socket.io");
const io = new Server(server);
io.on('connection', (socket) => {
console.log('id', socket.id);
// socket.broadcast.emit('hi'); // 广播给其他人，除了自己
console.log('a user connected');
// 注册断开连接事件
socket.on('disconnect', () => {
console.log('user disconnected');
});
// 注册接收消息事件
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
// 触发事件
io.emit('chat message', msg);
});
});
3）广播页面
在广播页面中，先给出 HTML 结构和 CSS 样式，在表单中有一个按钮和文本框，如下图所示。
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO broadcast</title>
<style>
body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
#input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
#input:focus { outline: none; }
#form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages > li { padding: 0.5rem 1rem; }
#messages > li:nth-child(odd) { background: #efefef; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
<script src="../socket.io.js"></script>
</body>
</html>
在页面的内嵌脚本中，先初始化 socket，io() 中的协议既可以是 http 也可以是 ws。
其中 WS 是 WebSocket 协议的缩写，WSS（Web Socket Secure）是 WebSocket 的加密版本。WS 一般默认是 80 端口，而 WSS 默认是 443 端口。
var socket = io("ws://localhost:1234");
然后是注册表单提交事件，在文本框中输入内容后，触发 chat message 事件发送消息到服务器中，服务器情况如下图所示。
var messages = document.getElementById("messages");
var form = document.getElementById("form");
var input = document.getElementById("input");
// 注册表单提交事件
form.addEventListener("submit", function (e) {
e.preventDefault();
if (input.value) {
socket.emit("chat message", input.value);
input.value = "";
}
});
最后注册 chat message 事件，和服务器中的事件同名，在接收到从服务器传回的消息时，就在页面中增加一栏消息（如下图所示），类似于聊天记录。
socket.on("chat message", function (msg) {
var item = document.createElement("li");
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
客户端中的 socket 实例有 3 个保留事件，connect、connect_error 和 disconnect。
其中 connect_error 会在底层连接失败或中间件拒绝连接时触发。
下面是一张客户端 socket 连接的生命周期图，在建立连接时会分两种情况，在断开连接时还会自动重连。
4）请求头和消息
下图是一个请求头，状态码是 101 表示可以使用新协议，Connection: Upgrade 指示这是一个升级请求，Upgrade 指定 websocket 协议。
一旦这次升级完成后，连接就变成了双向管道。sid 参数表示一个会话 ID。
下图一系列的消息，每条消息的开头都是 1 到 2 个数字，它们都有各自的含义。
第四条是发送的消息，第五条是接收的消息。
第一个数字是 Engine.IO 的通信类型。
| key | value |
| 0 | open |
| 1 | close |
| 2 | ping |
| 3 | pong |
| 4 | message |
| 5 | upgrade |
| 6 | noop |
第二个数字是 Socket.IO 的操作类型。
| key | value |
| 0 | CONNECT |
| 1 | DISCONNECT |
| 2 | EVENT |
| 3 | ACK |
| 4 | ERROR |
| 5 | BINARY_EVENT |
| 6 | BINARY_ACK |
二、附加功能
附加功能包括命名空间、专属通道和适配器。
1）命名空间（namespace）
命名空间是一种通信通道，允许通过单个共享连接拆分应用程序的逻辑，即多路复用，适合一台服务器提供多条不同长连接业务的场景。
如下图所示，分配了两个命名空间，通过一条管道连接了客户端和服务器。
在服务端，注册 connection 事件之前需要先调用 of() 方法，参数要和客户端请求地址中的路径一致。
注意，与之前不同的是，触发事件的对象是 socket 而不是 io，也就是调用 socket.emit() 才能发送消息。
const io = new Server(server);
io.of("/orders").on('connection', (socket) => {
socket.on('chat message', (msg) => {
console.log('orders message: ' + msg);
socket.emit('chat message', msg);
});
});
io.of("/users").on('connection', (socket) => {
socket.on('chat message', (msg) => {
console.log('users message: ' + msg);
socket.emit('chat message', msg);
});
});
2）专属通道（room）
room 可以建立专属于几条 socket 的通道，用于向一部分客户端广播事件，如下图所示。
类似于微信群的概念，发送的消息，只能群里的人收到。
注意，room 是服务端的概念，客户端是不知道 room 的存在。
客户端延续命名空间中的代码不需要改造，在服务端调用 join() 方法加入一个 room，leave() 方法可以离开一个 room。
然后在接收消息时调用 to() 方法给指定 room 中的 socket 发送消息，但不包括自己，效果如下图所示。
io.of("/orders").on('connection', (socket) => {
socket.join("one room");
// 注册接收消息事件
socket.on('chat message', (msg) => {
socket.to("one room").emit('chat message', msg);
});
});
socket.to() 的效果其实就是这条消息不会让自己收到，与 io.to() 的区别是后者可以让自己也收到。
不过在调试的时候，调用 io.to() 后，不知为何，客户端都收不到消息。
在做即时通信的项目时，采用 socket.to() 更合适，自己发送的消息完全可以通过脚本添加到聊天界面中。
3）适配器（adapter）
适配器是一个服务端组件，负责将事件广播到所有或部分客户端。
当扩展到多个 Socket.IO 服务器时，需要集群部署时，就得将默认的内存适配器替换为另一种，例如 Redis、MongoDB 等。
这样做的目的，就是为了将事件正确路由到所有客户端。
在下图中，客户端触发事件后，经过适配器路由到集群的 Socket.IO 服务器中。
以 redis 为例，首先安装 @socket.io/redis-adapter 和 ioredis 库，前者在 v7 版本之前叫 socket.io-redis。
然后是改造服务端，客户端不用做调整，引入两个库。本机已安装 redis 环境，若未安装不知道会不会报错。
const { Server } = require("socket.io");
const { createAdapter } = require("@socket.io/redis-adapter");
const { Cluster } = require("ioredis");
接着连接 redis 库，调用 adapter() 方法选择适配器。
const io = new Server(server);
const pubClient = new Cluster([
{
host: "localhost",
port: 6380,
}
]);
const subClient = pubClient.duplicate();
io.adapter(createAdapter(pubClient, subClient));
参考资料：
socket.io namespaces and rooms (译)
Node.js精进（11）——Socket.IO的更多相关文章
- [Node.js] Level 6. Socket.io
6.2 Setting Up socket.io Server-Side So far we've created an Express server. Now we want to start bu ...
- node.js中使用socket.io + express进行实时消息推送
socket.io是一个websocket库,包含客户端的js和服务端的node.js,可以在不同浏览器和移动设备上构建实时应用. 一.安装 socket.io npm install socket. ...
- node基于express的socket.io
前一段事件,我一个同学给他们公司用融云搭建了一套web及时通信系统,然后之前我的公司也用过环云来实现web及时通信,本人对web及时通信还是非常感兴趣的.私下读了融云和环信的开发文档,然后发现如果注册 ...
- CentOS 下安装 Node.js 8.11.3 LTS Version
Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google Chrome V8 JavaScript引擎,简单说是运行在服务端的 JavaScript.下面我们来演示一下Cen ...
- dotnet调用node.js写的socket服务（websocket/socket/socket.io）
https://github.com/jstott/socketio4net/tree/develop socket.io服务端node.js,.里面有js写的客户端:http://socket.io ...
- Node.js精进（2）——异步编程
虽然 Node.js 是单线程的,但是在融合了libuv后,使其有能力非常简单地就构建出高性能和可扩展的网络应用程序. 下图是 Node.js 的简单架构图,基于 V8 和 libuv,其中 Node ...
- Node.js入门：异步IO
异步IO 在操作系统中,程序运行的空间分为内核空间和用户空间.我们常常提起的异步I/O,其实质是用户空间中的程序不用依赖内核空间中的I/O操作实际完成,即可进行后续任务. 同步IO的并行模式 ...
- Node.js学习(11)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端.http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js ...
- Node.js精进（3）——流
在 JavaScript 中,一般只处理字符串层面的数据,但是在 Node.js 中,需要处理网络.文件等二进制数据. 由此,引入了Buffer和Stream的概念,两者都是字节层面的操作. Buff ...
随机推荐
- 【openstack】cloudkitty组件，入门级安装（快速）
@ 目录 前言 架构 安装 配置 启动 检索并安装 CloudKitty 的仪表板 前言 什么是CloudKitty? CloudKitty是OpenStack等的评级即服务项目.该项目旨在成为云的退 ...
- HTML5 Canvas 超逼真烟花绽放动画
各位前端朋友们,大家好!五一假期即将结束,在开启加班模式之前,我要给大家分享一个超酷超逼真的HTML5 Canvas烟花模拟动画.这次升级版的烟花动画有以下几个特点: 烟花绽放时,将展现不同的色彩,不 ...
- Linux系统创建可执行文件软链接
技术背景 由于创建软链接这个事情,在算法开发的日常中使用到的并不是很多,因此本文也是做一个简单的回顾.这里我们使用的案例是通过TMalign这个蛋白质打分文件,在编译好可执行文件之后,可以使用建立软链 ...
- python二分法、牛顿法求根
二分法求根 思路:对于一个连续函数,左值f(a)*右值f(b)如果<0,那么在这个区间内[a,b]必存在一个c使得f(c)=0 那么思路便是取中间点,分成两段区间,然后对这两段区间分别再比较,跳 ...
- Redisson批量操作类RBuckets和管道利器RBatch
<Spring Boot 整合Redisson配置篇> <Spring Boot 整合Redisson操作Redis基础篇> <Redisson批量操作类RBuckets ...
- 【Java面试】Zookeeper中的Watch机制的原理？
一个工作了7年的粉丝,遇到了一个Zookeeper的问题. 因为接触过Zookeeper这个技术,不知道该怎么回答. 我说一个工作了7年的程序员,没有接触过主流技术,这不正常. 于是我问了他工资以后, ...
- 一些GIT操作的技巧
一.git stash 我们有时会遇到这样的情况,正在分支a上开发一半,然后分支b上发现Bug,需要马上处理.这时候分支a上的修改怎么办呢,git add 是不行的,有的git客户端版本会提示还有ad ...
- 亿信BI——EXCEL组件使用流程
功能模块: 用户点击"excel输入"模块进行excel文件导入操作,excel导入页面的顶部导航栏包括基本属性.文件设置.格式设置和字段列表四部分. 基础属性: 在基本属性模块部 ...
- RabitMQ 发布确认
每日一句 军人天生就舍弃了战斗的意义! 概述 RabitMQ 发布确认,保证消息在磁盘上. 前提条件 1.队列必须持久化 队列持久化 2.队列中的消息必须持久化 消息持久化 使用 三种发布确认的方式: ...
- nginx 代理请求导出功能bug解决方法
问题描述: nginx代理的ip直接访问可以直接下载文件,但是通过nginx访问就报502,nginx错误日志:upstream sent invalid chunked response while ...