每天看一片代码系列(二):WebSocket-Node

简介

我们都知道,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);

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。