資訊專欄INFORMATION COLUMN
摘要：協(xié)議可以實現(xiàn)前后端全雙工通信，從而取代浪費資源的長輪詢。而就可以使得前后端進行全雙工通信兩方都可以向?qū)Ψ竭M行數(shù)據(jù)推送，是真正的平等對話。
WebSocket協(xié)議可以實現(xiàn)前后端全雙工通信，從而取代浪費資源的長輪詢。在此協(xié)議的基礎(chǔ)上，可以實現(xiàn)前后端數(shù)據(jù)、多端數(shù)據(jù)，真正的實時響應(yīng)。在學(xué)習(xí)WebSocket的過程中，實現(xiàn)了一個簡化版群聊，過程和代碼詳細記錄在這篇文章中。
本篇文章來自董沅鑫的個人網(wǎng)站，引用、轉(zhuǎn)載請指明出處。
查看更多知識，或者技術(shù)交流：請訪問godbmw.com
1 概述 1.1 WebSocket 是什么？建立在 TCP 協(xié)議之上的網(wǎng)絡(luò)通信協(xié)議
全雙工通信協(xié)議
沒有同源限制
可以發(fā)送文本、二進制數(shù)據(jù)等
1.2 為什么需要 WebSocket？了解計算機網(wǎng)絡(luò)協(xié)議的人，應(yīng)該都知道：HTTP 協(xié)議是一種無狀態(tài)的、無連接的、單向的應(yīng)用層協(xié)議。它采用了請求/響應(yīng)模型。通信請求只能由客戶端發(fā)起，服務(wù)端對請求做出應(yīng)答處理。
這種通信模型有一個弊端：HTTP 協(xié)議無法實現(xiàn)服務(wù)器主動向客戶端發(fā)起消息。
因此，如果在客戶端想實時監(jiān)聽服務(wù)器變化，必須使用 ajax 來進行輪詢，效率低，浪費資源。
而 websocket 就可以使得前后端進行全雙工通信（兩方都可以向?qū)Ψ竭M行數(shù)據(jù)推送），是真正的平等對話。
2 WebSocket 客戶端支持HTML5的瀏覽器支持 WebSocket 協(xié)議：
var ws = new WebSocket(url); // 創(chuàng)建一個websocket對象2.1 WebSocket 屬性
| 屬性 | 描述 |
|---|---|
| ws.readyState | 只讀屬性 readyState 表示連接狀態(tài)，可以是以下值：0 - 表示連接尚未建立。1 - 表示連接已建立，可以進行通信。2 - 表示連接正在進行關(guān)閉。3 - 表示連接已經(jīng)關(guān)閉或者連接不能打開。 |
| ws.bufferedAmount | 只讀屬性 bufferedAmount 已被 send() 放入正在隊列中等待傳輸，但是還沒有發(fā)出的 UTF-8 文本字節(jié)數(shù)。 |
| 屬性 | 描述 |
|---|---|
| ws.send() | 數(shù)據(jù)發(fā)送 |
| ws.close() | 關(guān)閉連接 |
| 屬性 | 描述 |
|---|---|
| open | 連接建立觸發(fā) |
| message | 通信時觸發(fā) |
| error | 出錯觸發(fā) |
| close | 關(guān)閉連接觸發(fā) |
假設(shè)我們在本地8080端口打開了websocket服務(wù)，那么，下面代碼可以在瀏覽器中實現(xiàn)和這個服務(wù)的通信：
3 WebSocket 服務(wù)端
關(guān)于服務(wù)端實現(xiàn)，根據(jù)技術(shù)選型不同，可以選用不同的庫和包。我這里使用的是node的ws庫來websocket服務(wù)端。
在阮一峰的博文提到的socket.io庫，在瀏覽器端的寫法不兼容原生API，準確來說，它們自己實現(xiàn)了一套websocket。所以，使用的時候前后端都應(yīng)該引用第三方庫。這樣就造成了代碼遷移性，嚴重下降。
綜上所述，ws庫有以下優(yōu)點：
兼容性好，兼容瀏覽器原生API
長期維護，效果穩(wěn)定
使用方便（往下看就知道了）
4 實現(xiàn)群聊 4.1 群聊 服務(wù)端實現(xiàn)首先，在命令行中，安裝ws庫: npm install ws --save
現(xiàn)在，利用ws來實現(xiàn)一個監(jiān)聽8080端口的websocket服務(wù)器，講解都在代碼注釋里，一目了然：
const PORT = 8080; // 監(jiān)聽端口
const WebSocket = require("ws"); // 引入 ws 庫
const wss = new WebSocket.Server({ port: PORT }); // 聲明wss對象
/**
* 向除了本身之外所有客戶端發(fā)送消息，實現(xiàn)群聊功能
* @param {*} data 要發(fā)送的數(shù)據(jù)
* @param {*} ws 客戶端連接對象
*/
wss.broadcastToElse = function broadcast(data, ws) {
wss.clients.forEach(function each(client) {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(data);
}
});
};
/* 客戶端接入，觸發(fā) connection */
wss.on("connection", function connection(ws, req) {
let ip = req.connection.remoteAddress; // 通過req對象可以獲得客戶端信息，比如：ip，headers等
/* 客戶端發(fā)送消息，觸發(fā) message */
ws.on("message", function incoming(message) {
ws.send(message); // 向客戶端發(fā)送消息
wss.broadcastToElse(message, ws); // 向 其他的 客戶端發(fā)送消息，實現(xiàn)群聊效果
});
});
4.2 群聊 客戶端實現(xiàn)
為了方便編寫，這里引入了jquery和bootstrap這兩個庫，只需要關(guān)注js代碼即可。
4.3 群聊 效果展示群聊
首先啟動我們的服務(wù)端代碼：node server.js 。其中，server.js是放置服務(wù)端代碼的文件。
然后，我們打開2次編寫的html代碼，這相當于，打開2個客戶端。來檢測群聊功能。
5. 相關(guān)資料
概念解釋：
http://www.ruanyifeng.com/blo...
https://www.cnblogs.com/jingm...
ws文檔：https://www.npmjs.com/package/ws
本篇文章來自董沅鑫的個人網(wǎng)站，引用、轉(zhuǎn)載請指明出處。
查看更多知識，或者技術(shù)交流：請訪問godbmw.com
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108362.html
摘要：概述這是關(guān)于學(xué)習(xí)的第三篇文章的應(yīng)用。第二篇的應(yīng)用第一篇的應(yīng)用什么是是一種在單個連接上進行全雙工通信的協(xié)議。如果想了解的知識，請看第二篇的應(yīng)用。溫馨提示本僅僅是簡單的實現(xiàn)，如需應(yīng)用到真實場景中還要多做優(yōu)化。 概述 這是關(guān)于 Swoole 學(xué)習(xí)的第三篇文章：Swoole WebSocket 的應(yīng)用。 第二篇：Swoole Task 的應(yīng)用 第一篇：Swoole Timer 的應(yīng)用 什么...
摘要：上節(jié)課完成了的后端搭建，搞定了簡單的請求響應(yīng)，今天來結(jié)合前端來完成群聊功能。其實后端群聊很簡單，就是把一個用戶的輸入消息，返回給所有在線客戶端，前端去負責篩選顯示。 上節(jié)課完成了netty的后端搭建，搞定了簡單的http請求響應(yīng)，今天來結(jié)合前端websocket來完成群聊功能。話不多說先上圖：showImg(https://segmentfault.com/img/bVbnCa8?w=...
摘要：前奏這篇文章僅對不熟悉在中使用的人以及入門者有幫助?；窘榻B想要實現(xiàn)一種實時的雙向通信聊天系統(tǒng)，你可能會想到輪詢長或短，但你最想要的還是的實現(xiàn)?？蛻舳说膶崿F(xiàn)端的實現(xiàn)，才是我們應(yīng)該關(guān)注的重點。 前奏 這篇文章僅對不熟悉在react中使用socket.io的人、以及websocket入門者有幫助。 下面這個動態(tài)圖展示的聊天系統(tǒng)是用react+express+websocket搭建的，很模糊...
摘要：大家明天一起去唱吧關(guān)于數(shù)據(jù)庫設(shè)計當前一版不會固定大家的數(shù)據(jù)庫設(shè)計，大家可以自己自由設(shè)計，同時搭上自己的項目，構(gòu)建一個附帶的自項目。 InChat 一個IM通訊框架 一個輕量級、高效率的支持多端（應(yīng)用與硬件Iot）的異步網(wǎng)絡(luò)應(yīng)用通訊框架。（核心底層Netty） Github：InChat 版本目標：完成基本的消息通訊（僅支持文本消息），離線消息存儲，歷史消息查詢，一對一聊天、自我聊天、群...
閱讀 3086·2021-11-19 11:31
閱讀 3180·2021-09-02 15:15
閱讀 1018·2019-08-29 17:22
閱讀 1088·2019-08-29 16:38
閱讀 2493·2019-08-26 13:56
閱讀 874·2019-08-26 12:16
閱讀 1464·2019-08-26 11:29
閱讀 970·2019-08-26 10:12
