前端技術棧補全計劃－－－websocket

本系列文章旨在總結前端技術棧中的一些通用技術
本文主要總結websocket

websocket

WebSocket以前

在WebSocket以前，http請求的主要模式是客戶端發起請求，服務端負責接收，並返回數據。若是須要服務端將一些參數主動傳遞至客戶端，下面是一些常見的方法。

1. 一種比較常見的方式是服務端攜帶參數，訪問某個指定的前端頁面，例如後端主動訪問http://www.params.com?want=param1;。params頁面被訪問時接收到了want＝param1這個參數，其含義爲，服務端想從客戶端拿到param1這個字段的數據。前端就會發出對應http請求來知足服務端的需求

2. 另外一種更加常見的方式就是輪詢(polling)，其本質就是利用定時器，不斷像服務端發送請求，直到得到想要的數據

   const polling ＝ setInterval(() => {
       // 像服務器發出請求
       http.(url, options)
           .then((data) => {
               if () {
                   // 沒有新消息，繼續輪詢
                   ... 
               } else {
                   // 拿到新消息，推出輪詢
                   ...
                   polling.clearInterval();
               }
           });
   }, 500);

這兩種方法，總的來講都是妥協性實現，第一種方法對須要經過中間頁面實現，不具有通用性。第二種方法則會浪費大量資源，給服務器帶來沒必要要的壓力。還有其餘不少實現方法，不一一列舉了。

WebSocket

WebSocket協議是基於TCP的一種新的網絡協議。它實現了瀏覽器與服務器全雙工(full-duplex)通訊——容許服務器主動發送信息給客戶端。

關於網絡協議的問題，本文很少討論(由於筆者暫時也不懂,協議部分之後會放到別的文章裏)。

WebSocket使用

與http

WebSocket的url與http最大的不一樣就是協議不一樣

http的協議是
http://(未加密）和https://（加密）
WebSocket的協議是
ws://（未加密）和 wss://（加密）

服務端

本文只以最簡單的node服務端爲例。
新建文件夾wsTest

// node端 ws依賴
npm install ws --save

// wsTest/server.js

const PORT = 3000;
const WebSocketServer = require('ws').Server;
const wss = new WebSocketServer({port: PORT});
    wss.on('connection', function (ws) {
        console.log('client connected');
        wss.send('websocket connect success');
        wss.on('message', function(evt) {
            console.log(evt);
        }
        wss.on('error', function(evt) {
            console.log(evt);
        }
        wss.on('close', function(evt) {
            console.log(evt);
        }
});

console.log(`server start ${PORT}`);

回到命令行，輸入指令node server.js就能夠啓動服務器了

前端

// index.html
// 本文件與服務端無關，不須要配置

<script>
  const ws = new WebSocket('ws://localhost:3000');
 
    ws.onopen = function (data) {
    };
    ws.onmessage = function (data) {
    };
    ws.onclose = function (data) {
    }
</script>

直接運行index.html，在控制檯network中能夠看到對應的WebSocket鏈接

WebSocket attr & method（前端）

(本文僅列舉一些前端WebSocket經常使用attr，所有api可見官方文檔）

attr

url ---string

WebSocket鏈接的目標地址

const ws = new WebSocket('ws://www.baidu.com');
ws.url       // 'ws://www.baidu.com';

readyState --- number

readyState表示WebSocket當前的鏈接狀態

constant	state code	description
CONNECTING	0	鏈接還沒開啓
OPEN	1	鏈接已開啓並準備好通訊
CLOSING	2	鏈接正在關閉過程當中
CLOSED	3	鏈接已經關閉，活着沒法創建

onopen ---function

當鏈接已開啓時觸發onopen事件

onmessage --- function

當從服務端收到消息時觸發onmessage事件

onerror --- function

鏈接拋出錯誤時觸發onerror事件

onclose --- function

鏈接關閉後觸發onclose事件

method

send(message)

Websocket.send(message)
用於向服務端發送一條消息

close()

Websocket.close()
用於客戶端主動關閉WebSocket通訊

node端的WebSocketAPI此文不作介紹

暫時只作這麼多介紹，更多詳細內容和使用經驗會會隨着筆者不斷學習應用逐步更新2333，但願你們共同進步
websocket-Mozila官方文檔