WebSocket 前端後端(nodejs)

WebSocket是區別於HTTP/HTTPS的另外一種協議，目的是實現後端主動向前端發送數據，是一種TCP的連接。

1. WebSocket的前後端握手

WebSocket協議在握手連接的時候，走的是HTTP/HTTPS協議的upgrade請求，但是在握手之後的數據傳輸走的就是WebSocket協議了。

2. WebSocket前端簡單代碼

var ws = new WebSocket("ws://localhost:8080/msg");
 
ws.onopen = function(evt) {
	console.log("Connection open ...");
	ws.send("Hello WebSockets!");
};
 
ws.onmessage = function(evt) {
	console.log("Received Message: " + evt.data);
	ws.close();
};
 
ws.onclose = function(evt) {
	console.log("Connection closed.");
};

在創建WebSocket對象後，會自動向服務器發起連接，本例web服務器協議爲HTTP, 地址爲localhost:8080, "ws:"代表websocket協議，如果服務器端是HTTPS協議，爲"wss:"

查看WebSocket的狀態，可以用如下語句:

ws.readyState === WebSocket.OPEN

如果服務端對客戶端進行分類或者服務端需要子協議從而進行不同的處理，則客戶端可以通過WebSocket的protocol（option選項）來設置子協議。

查看發送是否完成，則可以利用如下語句：

if(ws.bufferedAmount === 0)
{
    console.log('發送數據結束')
}

bufferedAmount屬性，表示還有多少字節的二進制數據沒有發送出去。它可以用來判斷髮送是否結束3. 服務端(NodeJS)的簡單代碼

3. 服務端實現很簡單

NodeJS可以有很多模塊，當然如果你HTTP服務器用的框架不同，可能會有更簡單的對應websocket的模塊，本例用基礎模塊 WebSocket.

安裝websocket:

npm install --save websocket

在下載之後，就可以利用該模塊開發websocket服務。

const http = require('http');
const socket = require('websocket').server
var server = http.createServer((req,res)=>{
    console.log('new http request')
})   //http 服務

var ws = new socket({httpServer: server})  //websocket握手必須通過http/https協議

ws.on('request', (request)=>{
    request.accept(request.requestedProtocols[0], request.origin)
})

ws.on('connect', (connection)=>{
    connection.on('message', (data)=>{
        Console.log('client data is: '+ data.data)
    })

    connection.on('close', (reason, description)=>{
        Console.log('connection is closed, reason code is :'+ reason + ' detail: '+ description)
    })
})

參考文檔 WebSocket學習