五分鐘學會HTML5的WebSocket協議

時間 2019-12-08

標籤五分 5分學會 html5 html websocket 協議欄目 HTML5 简体版

原文原文鏈接

一、背景

不少網站爲了實現推送技術，所用的技術都是Ajax輪詢。輪詢是在特定的的時間間隔由瀏覽器對服務器發出HTTP請求，而後由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點，即瀏覽器須要不斷的向服務器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費不少的帶寬等資源。HTML5新增的一些新協議WebSocket,能夠提供在單個TCP鏈接上提供全雙工，雙向通訊，可以節省服務器資源和帶寬，而且可以實時進行通訊。html

二、WebSocket介紹

傳統的http也是一種協議，WebSocket是一種協議，使用http服務器沒法實現WebSocket，web

2.1.瀏覽器支持狀況編程

基本主流瀏覽器都支持windows

2.2.優勢瀏覽器

相對於http有以下好處：bash

1.客戶端與服務器只創建一個TCP鏈接，可使用更少的鏈接。
2.WebSocket服務器端能夠主動推送數據到客戶端，更靈活高效。
3.更輕量級的協議頭，減小數據傳送量。

對比輪訓機制服務器

三、WebSocket用法

咱們瞭解WebSocket是什麼，有哪些優勢後，怎麼使用呢？併發

3.1.WebSocket建立async

WebSocket使用了自定義協議，url模式與http略有不一樣，未加密的鏈接是ws://，加密的鏈接是wss://，WebSocket實例使用new WebSocket()方法來建立，高併發

var ws = new WebSocket(url, [protocol] );
複製代碼

第一個參數 url, 指定鏈接的 URL。第二個參數 protocol 是可選的，指定了可接受的子協議。

3.2.WebSocket屬性

當建立ws對象後，readyState爲ws實例狀態，共4種狀態

0 表示鏈接還沒有創建。
1 表示鏈接已創建，能夠進行通訊。
2 表示鏈接正在進行關閉。
3 表示鏈接已經關閉或者鏈接不能打開。

**Tips：**在發送報文以前要判斷狀態，斷開也應該有重連機制。

3.3.WebSocket事件

在建立ws實例對象後，會擁有如下幾個事件，根據不一樣狀態可在事件回調寫方法。

ws.onopen 鏈接創建時觸發
ws.onmessage 客戶端接收服務端數據時觸發
ws.onerror 通訊發生錯誤時觸發
ws.onclose 鏈接關閉時觸發

ws.onmessage = (res) => {
  console.log(res.data);
};

ws.onopen = () => {
  console.log('OPEN...');
};

ws.onclose=()=>{
 console.log('CLOSE...');
}
複製代碼

3.4.WebSocket方法

ws.send() 使用鏈接發送數據(只能發送純文本數據)
ws.close() 關閉鏈接

四、Demo演示

瞭解WebSocket的一些API以後，趁熱打鐵，作一個小案例跑一下。

4.1.Node服務器端

WebSocket協議與Node一塊兒用很是好，緣由有如下兩點：

1.WebSocket客戶端基於事件編程與Node中自定義事件差很少。

2.WebSocket實現客戶端與服務器端長鏈接，Node基本事件驅動的方式十分適合高併發鏈接

建立一個webSocket.js以下：

const WebSocketServer = require('ws').Server;
const wss = new WebSocketServer({ port: 8080 });
wss.on('connection', function (ws) {
    console.log('client connected');
    ws.on('message', function (message) {
        ws.send('我收到了' + message);
    });
});
複製代碼

打開windows命令窗口運行

4.2.HTML客戶端

新建一個index.html頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webSocket小Demo</title>
</head>
<body>
    <div class="container">
        <div>
            <input type="text" id="msg">
            <button onclick="sendMsg()">發送報文</button>
        </div>
    </div>
    <script>
        const ws = new WebSocket('ws://localhost:8080');
        ws.onmessage = (res) => {
            console.log(res);
        };
        ws.onopen = () => {
            console.log('OPEN...');
        };
        ws.onclose = () => {
            console.log('CLOSE...');
        }
        function sendMsg() {
            let msg = document.getElementById('msg').value;
            ws.send(msg);
        }
    </script>
</body>
複製代碼

打開瀏覽器依次輸入字符1,2,3，每次輸入完點擊發送報體，可見在ws.onmessage事件中res.data中返回來咱們發的報文

五、問題與總結

以上只是簡單的介紹了下WebSocket的API與簡單用法，在處理高併發，長鏈接這些需求上，例如聊天室，可能WebSocket的http請求更加合適高效。

但在使用WebSocket過程當中發現容易斷開鏈接等問題，因此在每次發送報文前要判斷是否斷開，當屢次發送報文時，因爲服務器端返回數據量不一樣，返回客戶端先後順序也不一樣，因此須要在客戶端收到上一個報文返回數據後再發送下一個報文，爲了不回調嵌套過多，經過Promise ，async ,await等同步方式解決。關於WebSocket就寫這麼多，若有不足，歡迎多多指正！

參考資料：《JavaScript高級教程》《深刻檢出NodeJs》《菜鳥教程》