關(guān)于WebSocket的那些事兒

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 19:26:37

關(guān)于WebSocket的那些事兒

關(guān)于WebSocket的那些事兒:眾所周知傳統(tǒng)的http協(xié)議是客戶端（瀏覽器）發(fā)送請求，瀏覽器響應(yīng)請求的方式，一條請求對應(yīng)一條響應(yīng)。若瀏覽器不主動請求則服務(wù)端無法想客戶端主動推數(shù)據(jù)。傳統(tǒng)的方式是使用AJAX輪詢（這個方式有它的問題）來解決這一問題后面展開講。應(yīng)用場景列舉幾個應(yīng)用場景

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀關(guān)于WebSocket的那些事兒:眾所周知傳統(tǒng)的http協(xié)議是客戶端（瀏覽器）發(fā)送請求，瀏覽器響應(yīng)請求的方式，一條請求對應(yīng)一條響應(yīng)。若瀏覽器不主動請求則服務(wù)端無法想客戶端主動推數(shù)據(jù)。傳統(tǒng)的方式是使用AJAX輪詢（這個方式有它的問題）來解決這一問題后面展開講。應(yīng)用場景列舉幾個應(yīng)用場景

這個看出客戶端要通過很多次詢問后，才能知道服務(wù)端什么時候準(zhǔn)備就緒，這樣如果發(fā)送請求的客戶特別多，請求頻率特別高這無疑會給服務(wù)端造成了不小的壓力。

如果有那么一種方式可以讓服務(wù)端想客戶端推送消息，就可以完美解決這一情況，于是WebSocket出現(xiàn)了。

WebSocket的使用

WebSocket是HTML5的新協(xié)議，所以支持HTML5的瀏覽器都能直接使用WebSocket不需要額外安裝，什么開發(fā)包，或者插件。

為了測試WebSocket我們需要簡單的搞一個服務(wù)端程序。Node.js本身支持的協(xié)議包括TCP協(xié)議和HTTP協(xié)議，但不支持WebSocket，為了讓讓node也支持WebSocket，這里我選用ws模塊。

測試

創(chuàng)建一個名為testWebSocket的文件夾，使用npm init 初始化項目

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

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

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

然后創(chuàng)建一個名為myWebSocketServer.js的文件，一個簡單的WebSocket服務(wù)端程序完成，

node myWebSocketServer.js先讓服務(wù)端跑起來。相關(guān)教程：webSocket 視頻教程

// 導(dǎo)入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!');
 });
 // 響應(yīng)onmessage事件:
 ws.onmessage = (msg) => {
 console.log(msg);
 };
</script>
</body>
</html>

運行結(jié)果如下

API

簡單介紹下WebSocket的api

// WebSocket Api
let socket = new WebSocket(url, [protocol] ); // 實例化一個WebSocket對象建立連接
/**
* socket的readyState屬性
* 0 - 表示連接尚未建立。
* 1 - 表示連接已建立，可以進行通信。
* 2 - 表示連接正在進行關(guān)閉。
* 3 - 表示連接已經(jīng)關(guān)閉或者連接不能打開。
*/
socket.readyState/**
* 只讀屬性 bufferedAmount 已被 send() 放入正在隊列中等待傳輸，但是還沒有發(fā)出的 UTF-8 文本字節(jié)數(shù)。
*/
socket.bufferedAmount
/**
* WebSocket 事件
*/
socket.onopen(); //連接建立時觸發(fā)
socket.onmessage(); //客戶端接收服務(wù)端數(shù)據(jù)時觸發(fā)
socket.onerror(); //通信發(fā)生錯誤時觸發(fā)
socket.onclose(); //連接關(guān)閉時觸發(fā)
/**
* WebSocket 方法
*/
Socket.send() //使用連接發(fā)送數(shù)據(jù)
Socket.close() //關(guān)閉連接