engine.io-client原理分析
首先我们看一下入口
module.exports = (uri, opts) => new Socket(uri, opts);我们看到主要是新建了一个Socket对象。接下来看一下Socket对象初始化的逻辑。
constructor(uri, opts = {}) {
// 忽略一系列参数初始化
this.open();
}初始化系列参数后，执行了open函数。
open() {
// 只分析websocket
let transport = "websocket";;
this.readyState = "opening";
transport = this.createTransport(transport);
transport.open();
this.setTransport(transport);
}open函数主要的逻辑是创建了一个底层的通道，比如websocekt、xhr。这里以websocket为例。创建通道只是新建了一个js对象，还需要主动“打开”它。最后设置Socket的底层数据通道为新建的通道。我们首先看一下通道的设计。为了兼容，engine.io支持了多种底层通道，比如原生的websocket、xhr，jsonp等等。在设计上使用了面向对象的思想。基类逻辑不多，主要是定义了通用逻辑，具体实现在子类里实现。后面我们慢慢分析。言归正传，新建了一个websocket对象后，执行了open函数。open函数是在通道基类里定义的，接着执行了子类的doOpen。
doOpen() {
try {
this.ws = new WebSocket(uri, protocols);
} catch (err) {
return this.emit("error", err);
}
this.addEventListeners();
}
addEventListeners() {
const self = this;
this.ws.onopen = function() {
self.onOpen();
};
this.ws.onclose = function() {
self.onClose();
};
this.ws.onmessage = function(ev) {
self.onData(ev.data);
};
this.ws.onerror = function(e) {
self.onError("websocket error", e);
};
}doOpen主要是新建了一个原生websocket对象（发起一个websocket连接），然后监听其各种事件。transport.open()就结束了。接着分析this.setTransport(transport)。
setTransport(transport) {
const self = this;
// 设置socket的底层消息通道
this.transport = transport;
// 监听底层通道的各种事件
transport
.on("drain", function() {
self.onDrain();
})
.on("packet", function(packet) {
self.onPacket(packet);
})
.on("error", function(e) {
self.onError(e);
})
.on("close", function() {
self.onClose("transport close");
});
}在open的时候，websocke通道监听了原生websocket的事件，socket又监听了websocket通道的事件，一层套一层，如图所示。
至此，一切准备就绪，等待websocket连接成功。当连接成功后，服务端会发送一个数据包给客户端（socketio相关的，和底层websocket协议没关系）。我们看一下websocket收到数据时的处理逻辑。
this.ws.onmessage = function(ev) {
self.onData(ev.data);
};
function onData(data) {
const packet = parser.decodePacket(data, this.socket.binaryType);
this.onPacket(packet);
}
onPacket(packet) {
this.emit("packet", packet);
}在websocket之上，engineio有自己的协议，收到websocket上抛的数据时，engineio首先根据自己的协议进行解析。如下图所示。
下面我们看看engineio协议（在engine.io-parser中实现）。engineio定义了五种数据包类型。
const PACKET_TYPES = Object.create(null); // no Map = no polyfill
PACKET_TYPES["open"] = "0";
PACKET_TYPES["close"] = "1";
PACKET_TYPES["ping"] = "2";
PACKET_TYPES["pong"] = "3";
PACKET_TYPES["message"] = "4";为了方便，这里以nodejs端的代码为例子。
const encodePacket = ({ type, data }, supportsBinary, callback) => {
if (data instanceof ArrayBuffer || ArrayBuffer.isView(data)) {
// 转成Buffer
const buffer = toBuffer(data);
return callback(encodeBuffer(buffer, supportsBinary));
}
// plain string
return callback(PACKET_TYPES[type] + (data || ""));
};
// only 'message' packets can contain binary, so the type prefix is not needed
const encodeBuffer = (data, supportsBinary) => {
return supportsBinary ? data : "b" + data.toString("base64");
};我们看到engineio协议是比较简单的。同样 ，当engineio层收到websocket上抛的数据时，就会按照一样的协议格式进行解析。最终触发packet事件，到达socket层。我们看看socket层的处理。
// Socket is live - any packet counts
this.emit("heartbeat");
switch (packet.type) {
// 使用长轮询升级到websocket协议时，服务器返回open类型的包，开始继续握手
case "open":
this.onHandshake(JSON.parse(packet.data));
break;
// 心跳机制
case "ping":
this.resetPingTimeout();
this.sendPacket("pong");
this.emit("pong");
break;
case "error":
const err = new Error("server error");
err.code = packet.data;
this.onError(err);
break;
// 上抛给engineio上层
case "message":
this.emit("data", packet.data);
this.emit("message", packet.data);
break;
}这里主要分析open包的分支，当websocket连接成功后，服务端会push一个open包。比如
0{"sid":"qp_YtPOEPMybnTuuAAK_","upgrades":[],"pingInterval":25000,"pingTimeout":30000}从刚才engineio协议中我们可以看到，0是对应open类型。后面是engineio的数据部分。我们继续看onHandshake。
onHandshake(data) {
this.id = data.sid;
this.transport.query.sid = data.sid;
// 判断可以升级到哪些协议，如果支持websocket，则不需要升级了
this.upgrades = this.filterUpgrades(data.upgrades);
// 心跳机制的配置
// 多久服务器会ping一次
this.pingInterval = data.pingInterval;
// 超过pingInterval还没ping，再过多久则认为超时了，关闭连接
this.pingTimeout = data.pingTimeout;
// 再open一次，和新的协议握手，如果支持websocket，则不需要升级了
this.onOpen();
// In case open handler closes socket
if ("closed" === this.readyState) return;
// 开启心跳机制
this.resetPingTimeout();
}
resetPingTimeout() {
clearTimeout(this.pingTimeoutTimer);
this.pingTimeoutTimer = setTimeout(() => {
this.onClose("ping timeout");
}, this.pingInterval + this.pingTimeout);
}至此，engineio的处理过程就完成了，剩下的就是上层的数据通信了。