每天看一片代码系列（二）：WebSocket-Node

时间：2022-07-15 13:33:57

简介

我们都知道，websocket主要是通过在浏览器和服务端建立长连接，继而实现二者的相互数据通信。不同于HTTP的轮询，它不会有大量无效的HTTP消息交换，从而节省了花销。websocket其实就是双通道的TCP连接。

很明显地，整个工作分为两个步骤，即创建连接和发送数据。那么连接是怎么建立的呢？其实只需要在浏览器和服务器端做一个握手的动作就可以了。而这个握手其实还是一个HTTP请求，只是接下来的工作就和HTTP没关系了。

这个HandShake的请求消息大致为：

GET /chat HTTP/1.1

Host: example.com:8000

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==

Sec-WebSocket-Version: 13

而响应的消息大致为：

HTTP/1.1 101 Switching Protocols

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

HTTP里面的upgrade头部代表要从HTTP协议切换到另一个协议，或者是更换一个不同版本的HTTP。而Sec-WebSocket-Key和Sec-WebSocket-Accept是用来进行验证的字段。后者是前者经过一系列操作计算出来的，用来给客户端判断响应和请求是否匹配。

使用WebSocket-Node

首先我们体验一下“websocket-node"这个库的用法。

其实用这个库就是为了创建一个websocket-server，在app.js中，我们创建即可。

var port = 3001;

var websocketServer = require('websocket').server;

var http = require('http');

// 创建httpServer

var httpServer = http.createServer();

httpServer.listen(port, function () {

    console.log(new Date() + " Http Server is listening on " + port);

});

//创建WebSocketServer

var wsServer = new websocketServer({

    httpServer: httpServer

});

wsServer.on('request', function (request) {

    console.log(new Date() + " connection from origin: " + request.origin + ' .');

    //建立连接

    var connection = request.accept('example', request.origin);

    //向客户端发送消息

    connection.sendUTF("Connection from " + request.origin);

    connection.on('close', function () {

        console.log(connection.remoteAddress + " disconnected.");

    })

    //收消息

    connection.on('message', function (message) {

        try{

            connection.sendUTF("Server accpected: " + message.utf8Data);

        }catch(e){

        }

    })

})

在浏览器中，就和这个库没什么关系了，直接用浏览器支持的API创建Websocket客户端，收发消息即可。

var wsServer = "ws://localhost:3001";

var ws = new WebSocket(wsServer, 'example');

ws.onopen = function (e) {

    var msg = "hello Server!";

    ws.send(msg) && print(msg);

}

ws.onclose = function (e) {

    var msg = "closed connection";

    print(msg);

}

ws.onmessage = function (e) {

    var msg = "received : " + e.data;

    print(msg);

}

源码解析

源码有多个文件，我们只关注WebSocketServer.js，地址

首先，在传入的配置中必须要绑定一个httpServer用于握手。当客户端建立连接时，首先会进行握手，会触发server的upgrade事件，从而进入到服务端的处理函数中去。在这个函数中，会创建一个wsRequest对象，并将它作为request事件的参数发送出去。接下来根据客户端的Accept情况来进入到handleRequestAccepted，接下来connect事件会被触发。

var upgradeHandler = this._handlers.upgrade;

this.config.httpServer.forEach(function(httpServer) {

    httpServer.on('upgrade', upgradeHandler);

});

handleUpgrade：

var wsRequest = new WebSocketRequest(socket, request, this.config);

try {

    wsRequest.readHandshake();

}

wsRequest.once('requestAccepted', this._handlers.requestAccepted);

    wsRequest.once('requestResolved', this._handlers.requestResolved);

if (!this.config.autoAcceptConnections && utils.eventEmitterListenerCount(this, 'request') > 0) {

    this.emit('request', wsRequest);

}

handleRequestAccepted：

this.connections.push(connection);

this.emit('connect', connection);

另外，WebsocketServer继承了EventEmitter，所以具有事件处理的能力：

util.inherits(WebSocketServer, EventEmitter);

相关文章