藉助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