在前端开发中，实时通信是非常重要的。Socket.io 是一个基于 Node.js 的实时通信库，提供了简单、易用的 API，用于创建实时应用程序和游戏。若你想深入了解 Socket.io 的使用方法，本文将为你提供详细的介绍，包括Socket.io 的基本使用、websocket、socket.io的进阶用法以及高级使用示例等内容。
基本使用
安装
使用 Socket.io 需要 Node.js 的支持，因此需要在本地安装 Node.js。安装完成后，在 Node.js 项目中使用以下命令安装 Socket.io：
npm i socket.io
创建 Socket.io 服务器
在 Node.js 中，使用 Socket.io 创建服务器非常简单。可以通过以下代码实现：
// www.javascriptcn.com code example
const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
io.on('connection', (socket) => {
console.log('a user connected');
});
http.listen(3000, () => {
console.log('listening on *:3000');
});上述代码通过 Express 框架创建了一个服务器，并使用 Socket.io 获取到 http 对象 。当客户端连接到服务器时，会触发 connection 事件，该事件将用户的 socket 对象作为其参数。在事件处理程序中，使用 console.log 打印了“a user connected”信息。最后，服务器在端口 3000 上进行监听，并使用 console.log 打印“listening on *:3000 ”信息。
可以通过如下方式在客户端与服务器建立连接：
const socket = io('http://localhost:3000');上述代码中参数为服务器地址。
监听事件
在 Socket.io 中，可以使用 emit 发送事件，使用 on 监听事件。下面的示例演示了如何给客户端发送消息，并在客户端接收消息：
服务端代码：
io.on('connection', (socket) => {
socket.emit('message', 'Welcome to Socket.io!');// 使用 emit 发送事件
socket.on('sendMessage', (data) => {
io.emit('message', data); // 使用 io.emit 发送事件，消息将会广播到所有连接的客户端
});
});客户端代码：
socket.on('message', (data) => {
console.log(data);
});
socket.emit('sendMessage', 'Hello World!');上述代码中，服务器将一个欢迎消息发送到客户端，并在 sendMessage 事件触发时将客户端发送的信息广播给所有已连接的客户端。
WebSocket
WebSocket 是 HTML5 新增加的协议，提供了双向通信的能力。使用 WebSocket 可以使数据从服务器主动传输到客户端，并在此后建立的连接上发送数据。客户端和服务器只需发送一个 HTTP 请求和响应，就可以建立一个 WebSocket 连接，这样建立的 WebSocket 连接只需要占用一部分 TCP 连接，相比传统的 HTTP 协议，具有高效、实时和双向性等优势。Socket.io 底层使用 WebSocket 协议实现，而在不同浏览器中，WebSocket 的支持是不一致的，因此 Socket.io 会自适应地使用 WebSocket 和其他浏览器支持的技术，例如 Ajax long polling 等。
使用 WebSocket 协议
Socket.io 默认使用 WebSocket 协议进行通信，无需进行任何配置。只需确保客户端和服务器的连接地址正确即可。
以下是客户端代码：
const socket = io('http://localhost', {
transports: ['websocket']
});此代码告诉 Socket.io 使用 WebSocket 进行通信。如果不指定传输方式，则 Socket.io 将会自动选择可用的传输方式。当客户端和服务器连接成功时，Socket.IO 自动交换数据以确定哪种传输方式对于双方最有效。
轮询
传统的 HTTP 请求是请求-响应的形式，每次客户端都必须发送一个新的请求，服务器响应才能收到，这种方式导致资源的浪费和延迟。轮询（polling）是一种有效的解决方案，它解决了 HTTP 请求的问题，但轮询在每个请求之间总是存在延迟。
在轮询方式下，客户端每隔一定时间向服务器发送请求，并在收到服务器响应后处理数据。例如：
// www.javascriptcn.com code example
setInterval(() => {
const xhr = new XMLHttpRequest();
xhr.open('GET', '/news', true);
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();
}, 3000);上述代码中，客户端每隔3秒就发送一次 GET 请求到服务器，当服务器返回的状态码为 200 OK 时，客户端使用 console.log 打印请求的响应文本（假设服务器返回了一个新闻消息）。
进阶用法
命名空间
Socket.io 支持将客户端分组，并在分组中进行广播，从而实现更加复杂的应用程序。使用命名空间（Namespaces）可以将不同的连接分类，以便进行针对性的操作。
以下是 Server 端代码：
// www.javascriptcn.com code example
const adminNamespace = io.of('/admin');
adminNamespace.on('connection', (socket) => {
console.log('someone connected to admin');
adminNamespace.emit('welcome', 'Welcome to admin.');
socket.on('disconnect', () => {
console.log('someone disconnected from admin');
});
});客户端代码：
const socket = io('/admin');
socket.on('welcome', (data) => {
console.log(data);
});上述代码中服务端创建了一个命名空间 admin，在命名空间的 connection 事件中，socket.emit 将 "welcome" 发送给客户端，客户端将监听这个事件，并使用 console.log 打印 "welcome" 信息。
房间
房间（Rooms）是一种更高级的分组方法，客户端可以加入服务器中的房间，然后向房间内的所有客户端发送消息。使用房间可以实现更加细粒度的通信控制。
以下是 Server 端代码：
// www.javascriptcn.com code example
io.on('connection', (socket) => {
console.log('a user connected');
// 将其加入房间
socket.join('test_room');
// 向房间内所有客户端发送消息
io.in('test_room').emit('welcome', 'Welcome to test_room.');
// 当客户端发送disconnect事件时触发
socket.on('disconnect', () => {
console.log('user disconnected');
});
});以下是 Client 端代码：
const socket = io();
socket.on('welcome', (data) => {
console.log(data);
});上述代码中，服务器在客户端连接成功后将其加入房间，并发送"welcome" 消息到该房间。客户端只需监听 "welcome" 事件即可。
Middleware
中间件（Middleware）是一种在服务器的请求处理过程中将请求连续传递到另一个函数的方法。在 Socket.io 中，可以通过中间件来扩展 Socket.io 的功能，实现更加复杂的应用程序。
以下是 Server 端代码：
io.use((socket, next) => {
console.log(socket.handshake.query.token);
next();
});
io.on('connection', (socket) => {
console.log('user connected')
});上述代码中，io.use() 方法就是一个中间件，使用该方法时，将可以访问所有连接到服务器的 socket 实例。可以通过 socket.handshake.query 获取请求中传递的参数。此外，还需要调用 next() 方法实现中间件的连续传递。客户端连接成功后，服务器将记录Token，以便其他操作使用。
以下是 Client 端代码：
const socket = io({
query: {
token: 'myToken'
}
});客户端连接到服务器时，将会自动传递Token。
高级使用
身份验证
加入房间会带来身份验证的问题，Socket.io 提供了身份验证方案。以下是 Server 端代码：
// www.javascriptcn.com code example
io.use((socket, next) => {
const token = socket.handshake.query.token;
// 模拟身份验证
if (token === '123456') {
return next();
}
return next(new Error('authentication failed'));
});在 middleWare 中完成身份验证，并对不合法的接收连接请求的人员返回异常：next(new Error('authentication failed'))。
防火墙翻译
在实际应用程序中，服务器有可能需要被放在内网或配置的防火墙后。但是，外网的客户端也需要连接到服务器。
可以使用一些中间件或专业软件来实现连接外界的需求，这里演示的是使用 socket.io-proxy 实现端口穿透：
以下是 Server 端代码：
// www.javascriptcn.com code example
const ioProxy = require('socket.io-proxy');
const server = ioProxy.listen(3000, {
path: '/',
proxyServer: 'https://ifr.ovh',
proxyServerPort: 443,
encrypt: true
});
server.on('connection', (socket) => {
console.log('user connected');
socket.emit('message', 'Welcome to Socket.io!');
socket.on('sendMessage', (data) => {
server.emit('message', data);
});
socket.on('disconnect', () => {
console.log('user disconnected');
});
});上述代码使用 socket.io-proxy 创建了一个代理服务器，并可以通过配置参数 path 控制访问地址。在 proxyServer 配置点，我们可以设定防火墙之外机器的ip/域名及端口，当然如果需要使用加密，则需要配置加密详情。
以下是 Client 端代码：
const socket = io.connect('//ifr.ovh', {
path: '/',
query: {
token: 'myToken'
}
});这里的 io.connect('//ifr.ovh') 方法表示向端口进行连接，而接下来的 path 和 query 则负责传递参数。
小结
本文提供了 Socket.io 的基本使用和进阶应用技巧。通过 Socket.io，我们可以轻松地实现实时通信。要成为一个熟练的 Socket.io 开发者，需要掌握以下三个方面的知识：
- Socket.io 的基本 API，包括创建服务器、连接服务器、广播信息等。
- WebSocket 协议的原理和使用方法，以及如何针对浏览器兼容性问题进行处理。
- Socket.io 的进阶用法，包括命名空间、房间、中间件等。同时，我们还需要学会如何使用身份验证和防火墙穿透等高级技术。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67cfce34e46428fe9ebd4bbd