借助node实战WebSocket

时间 2019-11-19

标签借助 node 实战 websocket 繁體版

原文原文链接

1、WebSocket概述

WebSocket协议，是创建在TCP协议上的，而非HTTP协议。javascript

以下：html

ws://127.0.0.1或wss://127.0.0.1就是WebSocket请求。java

注：ws表示WebSocket协议，wss表示加密的WebSocket协议。node

WebSocket的好处就是容许服务器和客服端进行实时地互相通讯，而不像Ajax那样，只能由客服端发起请求，而且WebSocket不受同源策略限制，这偏偏是Ajax的软肋。web

好了，初步了解WebSocket后，咱们就一块儿一步步探究实现一个Demo吧。chrome

2、客服端之旅

由于是基于WebSocket嘛，那在客服端，首先，得发起一个WebSocket请求。npm

以下：api

<!DOCTYPE html>
    <head>
        <title>WebSocket</title>
    </head>
    <body>
        <script>
            //建立WebSocket对象请求
            var socket = new WebSocket('ws://127.0.0.1:8080/');
        </script>    
    </body>
</html>

EntireCode

其次，采用回调函数监听相应事件，并处理。监听事件一共四个：浏览器

　　一、 onpen ：请求成功时，触发服务器

　　二、 onclose ：请求关闭时，触发

　　三、 onerror ：请求或链接期间出错时，触发

　　四、 onMessage ：接收服务器发送来的消息时，触发

另，当发送请求时，建立的WebSocket 实例，有个状态值readyState：

　　一、 0 : 表明还没链接或正在链接；

　　二、 1 : 表明链接成功；

　　三、 2 : 表明正在关闭链接；

　　四、 3 : 表明链接关闭。

咱们在该demo中加入这四个监听事件。

以下：

<!DOCTYPE html>
    <head>
        <title>WebSocket</title>
    </head>
    <body>
        <script>
            //建立WebSocket对象请求
            var socket = new WebSocket('ws://127.0.0.1:8080/');
            //相应监听事件
            socket.onopen = onOpen;
            socket.onclose = onClose;
            socket.onerror = onError;
            socket.onmessage = onMessage;
        </script>    
    </body>
</html>

EntireCode

在这监听事件中，你能够按照你的意愿添加触发函数。

以下：

<!DOCTYPE html>
    <head>
        <title>WebSocket</title>
    </head>
    <body>
        <script>
            var onOpen = function(event){
                console.log('Socket opened. readyState:'+socket.readyState);
                var msg = {
                    type: "message",
                    text: "something",
                    id: "number",
                    time: Date.now()
                };
                //send能够向后台发送字符串、Blob或ArrayBuffer，固传入对象时，利用JSON对其序列化
                socket.send(JSON.stringify(msg));
            };
            var onClose = function(event){
                console.log('Socket closed.readyState:'+socket.readyState);
                console.log('Connected to: ' + event.currentTarget.url);
            };
            var onMessage = function(data){
                console.log("We get signal:");
                console.log(data);
                console.log('onMessageready: ' + socket.readyState);
            };
            var onError = function(event){
                console.log("We got an error.: " + event.data);
            };
            var socket = new WebSocket('ws://127.0.0.1:8080/');
            socket.onopen = onOpen;
            socket.onclose = onClose;
            socket.onerror = onError;
            socket.onmessage = onMessage;
        </script>    
    </body>
</html>

EntireCode

3、node建立服务器

借助于node建立一个简易的服务器，以便看清整个WebSocket的流程。

由于是WebSocket协议，因此在node中你须要引入ws模块，假设咱们监听的端口号为8080。

以下：

//须要ws模块
var WebSocketServer = require('ws').Server;
//并建立wss服务器
var wss = new WebSocketServer({port: 8080});

EntireCode

接着，咱们须要在链接成功后，咱们能够向客服端发送一点点东西，如’hello world’，以及监听客服端发送信息来时的事件message。

以下：

//须要ws模块
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({port: 8080});
wss.on('connection', function(ws){
    ws.on('message', function(message){
        var obj = JSON.parse(message);
        console.log('received: %s', obj.time);
    });
    ws.send('hello world');
});
console.log('running!!');

EntireCode

4、运行

前提：由于引入了ws模块，因此须要引入ws模块：npm install ws

首先，运行node搭建的简易服务器（我将其存储在D:WebSocket/server.js）。

以下：

接着，运行客服端代码，打开chrome调试器得下：

再看看刚才的node环境，得下：

固，它们已经能够互相通讯了。

咱们再打开chrome调试器，具体看看WebSocket请求，以下：

在RequestHeaders中，”Connection:Upgrade”表示浏览器通知服务器，若是能够就升级为websocket协议。Origin用于验证浏览器域名是否在服务器许可范围内。Sec-WebSocket-Key则用于握手协议密钥，是base64编码的16字节随机字符串。Upgrade头信息表示将通讯协议从HTTP/1.1转向该项所指定的协议。

在ResponseHeaders中，”Connection:Upgrade”通知浏览器，须要改变协议。Sec-WebSocket-Accept是服务器在浏览器提供的Sec-WebSocket-Key字符串后面，添加“258EAFA5-E914-47DA-95CA-C5AB0DC85B11” 字符串，而后再取sha-1的hash值。浏览器将对这个值进行验证，以证实确实是目标服务器回应了webSocket请求。

5、拓展阅读

[1] 阮一峰，WebSocket

[2] Divid Walsh，WebSocket and Socket.IO

[3] socket.io

[4] Writing WebSocket client applications

[5] WebSockets:A Guide