關於WebSocket須要知道

時間 2019-12-07

標籤關於 websocket 須要知道简体版

原文原文鏈接

WebSocket

概念

　　WebSocket是再單個TCP鏈接上進行雙工通信的協議，僅須要經過一次握手兩個之間就能夠建立持久性的鏈接，進行雙向數據傳輸。WebSocket 是HTML5新增長的協議。html

爲何要用

　　衆所周知傳統的http協議是客戶端（瀏覽器）發送請求，瀏覽器響應請求的方式，一條請求對應一條響應。若瀏覽器不主動請求則服務端沒法想客戶端主動推數據。傳統的方式是使用AJAX輪詢（這個方式有它的問題）來解決這一問題後面展開講。node

應用場景

列舉幾個應用場景：npm

網絡聊天室json
多人在線遊戲api
網站向頁面實時推送廣告、消息瀏覽器
在線實現對控制設備的控制服務器

前面三個應用場景已經有不少大佬講過了，我就不講了，這裏主要簡單分析一下第四個應用場景。網絡

場景4：app

家裏裝有「XX」牌網絡攝像機，我如今工做想看看自家「二哈」有沒有在拆家,打開改公司提供的app查看家裏的狀況，很不巧相機如今沒有開機，不過能夠經過app控制相機開機，點擊開機按鈕相機開機。可是相機開機須要一段時間。這時傳統的作法是經過AJAX輪詢的方式每一個1秒左右就向服務器發送請求詢問設備是否準備就緒。socket

客戶端> 開機沒啊，能不能播放視頻了呀。

服務端> 還沒呢，彆着急等會兒再來。

客戶端> 開機沒啊，能不能播放視頻了呀。

服務端> 還沒呢，彆着急等會兒再來。

客戶端> 開機沒啊，能不能播放視頻了呀。

服務端> 還沒呢，彆着急等會兒再來。

......

N次以後

......

客戶端> 開機沒啊，能不能播放視頻了呀。。。

服務端> 能夠了，你能夠播放了

這個看出客戶端要經過不少次詢問後，才能知道服務端何時準備就緒，這樣若是發送請求的客戶特別多，請求頻率特別高這無疑會給服務端形成了不小的壓力。

若是有那麼一種方式可讓服務端想客戶端推送消息，就能夠完美解決這一狀況，因而WebSocket出現了。

WebSocket的使用

WebSocket是HTML5的新協議，因此支持HTML5的瀏覽器都能直接使用WebSocket不須要額外安裝，什麼開發包，或者插件。

爲了測試WebSocket咱們須要簡單的搞一個服務端程序。Node.js自己支持的協議包括TCP協議和HTTP協議，但不支持WebSocket，爲了讓讓node也支持WebSocket，這裏我選用ws模塊。

測試

建立一個名爲testWebSocket的文件夾，使用npm init 初始化項目

配置package.json文件添加，這裏選用ws的最新的版本

"dependencies": {
　　"ws": "^6.2.1"
}

在根目錄使用npm指令npm install --save，把ws相關依賴都拉下來。

而後建立一個名爲myWebSocketServer.js的文件，一個簡單的WebSocket服務端程序完成，

node myWebSocketServer.js先讓服務端跑起來。

// 導入WebSocket模塊:
const WebSocket = require('ws');
let i = 1;

// 引用Server類:
const WebSocketServer = WebSocket.Server;

// 實例化:
const myWs = new WebSocketServer({
    port: 8080
});

myWs.on('connection', ws => {
    ws.on('message', message => {
        console.log('received: %s', message);
    });

    setInterval(() => {
        ws.send('Hello siegaii this is serverMessage!' + i);
        i++;
    }, 1000);

});

客戶端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<button id="test">hello siegaii</button>

<script>
    let ws = new WebSocket('ws://localhost:8080/testWebSocket');
    document.getElementById('test').addEventListener('click', () => {
        ws.send('Hello Siegaii this is clientMessage!');
    });

    // 響應onmessage事件:
    ws.onmessage = (msg) => {
        console.log(msg);
    };

</script>
</body>
</html>

運行結果以下

API

簡單介紹下WebSocket的api

// WebSocket Api
let socket = new WebSocket(url, [protocol] ); // 實例化一個WebSocket對象創建鏈接
/**
* socket的readyState屬性
* 0 - 表示鏈接還沒有創建。
* 1 - 表示鏈接已創建，能夠進行通訊。
* 2 - 表示鏈接正在進行關閉。
* 3 - 表示鏈接已經關閉或者鏈接不能打開。
*/
socket.readyState

/**
* 只讀屬性 bufferedAmount 已被 send() 放入正在隊列中等待傳輸，可是尚未發出的 UTF-8 文本字節數。
*/
socket.bufferedAmount

/**
* WebSocket 事件
*/
socket.onopen(); //鏈接創建時觸發
socket.onmessage(); //客戶端接收服務端數據時觸發
socket.onerror(); //通訊發生錯誤時觸發
socket.onclose(); //鏈接關閉時觸發

/**
* WebSocket 方法
*/
Socket.send() //使用鏈接發送數據
Socket.close() //關閉鏈接

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。