初学 Socket.io

概念

Socket.io 是一个支持客户端和服务器之间的低延迟、双向和基于事件的通信的库，除了支持 JavaScript 以外，还支持 Java、Python、Golang。

Socket.io 构建在 WebSocket 协议之上，并提供了额外的保证，如回退到 HTT P长轮询或自动重新连接。和 Ajax、Fetch、Axios 不一样的是，WebSocket 支持客户端与服务器之间一直保持通信，除非其中一方主动断开连接。

开始

下面将从三个章节开始。第一个章节——建立项目；第二个章节——服务端，演示如何创建 Socket 服务；第三个章节——客户端，演示如何创建接收 Socket 服务的客户端。

建立项目

随便在你的电脑上创建一个父工程，我这里取名父工程为socketio。子工程依赖于父工程的node_modules，因此子工程无需再在 package.json 添加任何 dependencies 和 devDependencies。

父工程下创建两个子工程server和client。所以，工程项目的目录结构是：

socketio
	-node_modules
	-server
		-src
			index.js
		package.json
	-client
		-src
			index.js
		package.json
	package.json
	package-lock.json

导入依赖

导入 socket.io 和 socket.io-client 两个依赖包，外加热部署的 nodemon。

npm i socket.io socket.io-client nodemon

服务端

package.json

该子工程不需要添加任何依赖，依赖全部在父工程中。在 package.json 我们配置启动脚本：

{
  "name": "server",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "serverStart": "nodemon ./src/index.js"
  }
}

创建服务端

在这里我们使用 ES6 模块导入语法，使用最简洁的方式创建 Socket 服务端。

1. 导入 Server 对象；
2. new Server 对象；
3. 监听 connection 事件；
4. 开启 Socket 服务端口号。

import { Server } from "socket.io";

const server = new Server({ /* options */ });

server.on("connection", (socket) => {
  // ...
});

io.listen(3000);

客户端

客户端的 package.json 配置方式和服务端一样。以下是创建 Socket 客户端的步骤：

1. 导入 lookup 函数连接服务端 URL；
2. 监听 connect 事件。

import { io } from "socket.io-client";

const client = io("http://localhost:3000");

client.on("connect", () => {
  // ...
});

在第一个步骤中，我说的是导入 lookup 函数，但实际却是 io 函数。因为 Socket.io 重命名了 lookup 函数的导出名称：

查看源码可知，lookup 有三个不一样参数的重载，并且通过重命名导出不一样。其实使用 io 和 connect 都可以，从第一个往后的所有参数都可不填，connect 第一个参数可以是字符串。所以，也可以像下面这样写：

import { connect } from "socket.io-client";

const client = connect("http://localhost:3000");

测试

客户端连接服务端时，客户端分配唯一 ID，当客户端连接到服务端时，服务端的监听事件 connection 可以从回调函数中获得客户端的 ID：

server

server.on("connection", (socket) => {
  console.log(`An user connected, He is ${ socket.id }`);
});

client

client.on("connect", () => {
  console.log(`Hi, I am ${ client.id }`);
});