小白Websocket入門，10分鐘搭建一個多人聊天室～

時間：2023-07-06 12:36:01 | 來源：網站運營

時間：2023-07-06 12:36:01 來源：網站運營

小白Websocket入門，10分鐘搭建一個多人聊天室～：

Demo演示

體驗一下

去github查看完整源碼

前言

從不認識Websocket到接手H5聊天室項目，接著就是一年多的聊天室功能更新和迭代，總的來說，入門很簡單，要深入還是要花一些時間去學習實踐才可以。網上已經有不少大佬發(fā)表過關于Websocket實現(xiàn)聊天室的文章，這里我自己總結了Websocket的基礎知識，實現(xiàn)了一個簡單的聊天室入門的demo，作為記錄和復習，也分享給需要入門的人。

大綱

了解Websocket

背景

在許多場景下，用戶需要得到實時的消息，比如聊天，醫(yī)療設備讀數(shù)等，舊的解決方案是基于輪詢的方式獲取最新數(shù)據(jù)，但是并不會完全實時消息同步，并且大多數(shù)情況下請求都是沒必要的，反而浪費了大量的流量和服務器資源。基于這種背景下，websocket誕生了。

Websocket基本概念

WebSocket 是 HTML5 開始提供的一種在「單個 TCP 連接上」進行「全雙工通訊」的「協(xié)議」。WebSocket通信協(xié)議誕生于2008年，2011年成為國際標準. WebSocket使得客戶端和服務器之間的數(shù)據(jù)交換變得更加簡單，「允許服務端主動向客戶端推送數(shù)據(jù)」。在WebSocket API中，瀏覽器和服務器「只需要完成一次握手」，兩者之間就直接可以創(chuàng)建「持久性的連接」，并進行「雙向數(shù)據(jù)傳輸」。

兼容性問題(主流瀏覽器都支持)

Websocket特點

• 「控制開銷。」 在連接創(chuàng)建后，服務器和客戶端之間交換數(shù)據(jù)時，用于協(xié)議控制的數(shù)據(jù)包頭部相對較小。在不包含擴展的情況下，對于服務器到客戶端的內容，此頭部大小只有2至10字節(jié)（和數(shù)據(jù)包長度有關）；對于客戶端到服務器的內容，此頭部還需要加上額外的4字節(jié)的掩碼。相對于HTTP請求每次都要攜帶完整的頭部，此項開銷顯著減少了。
• 「實時通信」。由于協(xié)議是全雙工的，所以服務器可以隨時主動給客戶端下發(fā)數(shù)據(jù)。相對于HTTP請求需要等待客戶端發(fā)起請求服務端才能響應，延遲明顯更少；即使是和Comet等類似的長輪詢比較，其也能在短時間內更多次地傳遞數(shù)據(jù)。
• 「保持連接狀態(tài)」。與HTTP不同的是，Websocket需要先創(chuàng)建連接，這就使得其成為一種有狀態(tài)的協(xié)議，之后通信時可以省略部分狀態(tài)信息。
• 「支持二進制傳輸」?？梢园l(fā)送文本，也可以發(fā)送二進制數(shù)據(jù)。Websocket定義了二進制幀，相對HTTP，可以更輕松地處理二進制內容。
• 「協(xié)議標識符是ws（如果加密，則為wss），服務器網址就是 URL」。
• 實現(xiàn)簡單。建立在 TCP 協(xié)議之上，服務器端的實現(xiàn)比較容易，并且沒有同源限制，客戶端可以與任意服務器通信。
• 與 HTTP 協(xié)議有著良好的兼容性。默認端口也是80和443，并且握手階段采用 HTTP 協(xié)議，因此握手時不容易屏蔽，能通過各種 HTTP 代理服務器。
• 支持擴展。Websocket定義了擴展，用戶可以擴展協(xié)議、實現(xiàn)部分自定義的子協(xié)議。如部分瀏覽器支持壓縮等。

Websocket初始握手

每個Websocket連接都始于一個HTTP請求，改請求和其他請求類似，但是包含一個特殊的首標 —— 「Upgrade」。Upgrade表示客戶端將「把連接升級到Websocket協(xié)議」。

在握手前，Websocket遵循HTTP/1.1協(xié)議。

客戶端發(fā)送升級為Websocket的請求也稱為初始握手。客戶端發(fā)送HTTP升級請求后，直到服務端響應 101 狀態(tài)碼、Upgrade和Sec-WebSocket-Accept首標才算連接成功，否則不能連接成功。下面是拷貝的websocket握手的請求頭和相應頭：

// 客戶端發(fā)送的請求頭GET wss://www.example.cn/webSocket HTTP/1.1 // 使用的https協(xié)議, 對應的wss請求Host: www.example.cnConnection: Upgrade // 帶upgrade頭的http1.1消息必須含有connection頭，表示任何接受此消息的人都在在轉發(fā)此消息之前處理掉connection中指定的域（即不轉發(fā)upgrade域）Upgrade: websocket // 定義轉換協(xié)議的header域，如果服務器支持，客戶端希望使用已經建立好的http（tcp）連接Sec-WebSocket-Version: 13 // 客戶端支持的WebSocket協(xié)議的版本列表Origin: http://example.cn // Origin為安全使用，防止跨站攻擊，瀏覽器一般會使用這個來標識原始域。Sec-WebSocket-Key: afmbhhBRQuwCLmnWDRWHxw== // 首標 客戶端隨機生成，服務器會使用此字段組裝成另一個key值放在握手返回信息里。用于客戶端到服務器websocket的初始握手，避免夸協(xié)議攻擊。Sec-WebSocket-Protocol: chat, superchat // 首標 告訴客戶端應用程序可使用的協(xié)議Sec-WebSocket-Extensions: permessage-deflate（協(xié)商使用傳輸數(shù)據(jù)壓縮）; client_max_window_bits（擦采用LZ77壓縮算法時，滑動窗口相關SIZE大小）// 首標??// 服務器發(fā)出的響應頭HTTP/1.1 101Server: nginx/1.12.2Date: Sat, 11 Aug 2018 13:21:27 GMTConnection: upgradeUpgrade: websocketSec-WebSocket-Accept: sLMyWetYOwus23qJyUD/fa1hztc= // 確認服務器是否理解websocket協(xié)議Sec-WebSocket-Protocol: chatSec-WebSocket-Extensions: permessage-deflate;client_max_window_bits=15??/** Sec-WebSocket-Accept的生成步驟：（1）將Sec-WebSocket-Key與協(xié)議中已定義的GUID進行拼接 （2）將（1）中生成的字符串進行SHA1編碼 （3）將2中生成的字符串進行Base64編碼Sec-WebSocket-Accept用來確定：（1）服務端是否理解websocket協(xié)議，如果不理解，就不會返回正確的Sec-WebSocket-Accept （2）返回值是本次請求的，而不是之前的緩存*/

websocket與HTTP的異同點

相同點

1. 都是基于TCP的應用層協(xié)議。
2. 都使用Request/Response模型進行連接的建立。
3. 在連接的建立過程中對錯誤的處理方式相同，在這個階段WebSocket可能返回和HTTP相同的返回碼。

不同點

1. HTTP協(xié)議基于Request/Response，只能做單向傳輸，是「半雙工通信」，而WebSocket是「全雙工通信」。

「半雙工通信」：單向流動， 服務器不主動推送數(shù)據(jù)給客戶端。 「全雙工通信」：服務器可以主動向客戶端推送信息，客戶端也可以主動向服務器發(fā)送信息，是真正的雙向平等對話，屬于服務器推送技術的一種。

1. 「http是無狀態(tài)的」，所以請求得到響應以后就關閉了,無狀態(tài)的好處是服務器不需要存儲相關會話信息。缺點是每次Http請求和響應都會發(fā)送關于請求的冗余信息；而WebSocket只需要建立一次Request/Response消息對，之后都是TCP連接，避免了需要多次建立Request/Response消息對而產生的冗余頭部信息。節(jié)省了大量流量和服務器資源。

1. WebSocket在建立握手連接時，數(shù)據(jù)是通過HTTP協(xié)議傳輸?shù)?，但在建立連接之后，「真正的數(shù)據(jù)傳輸階段是不需要HTTP協(xié)議參與的。而http需要需要三次握手」。

1. WebSocket傳輸?shù)臄?shù)據(jù)是二進制流，是以幀為單位的，HTTP傳輸?shù)氖敲魑膫鬏?，是字符串傳輸?/li>

Websocket應用場景

• 社交聊天：如QQ、微信、魚耳聊天室
• 直播：如斗魚，魚耳直播等
• 智能客服
• 系統(tǒng)消息通知：貨拉拉
• 其他：醫(yī)療設備讀數(shù)、股價、交通圖等等

Websocket相關API

強調下，Websocket通過在客戶端和服務端之間的第一次握手時將HTTP協(xié)議升級到Websocket協(xié)議，建立連接后，后面的消息是直接在websocket接口定義的方法上來回傳送。

WebSocket 實例

WebSocket協(xié)議本質上是一個基于 TCP 的協(xié)議。調用WebSocket構造函數(shù)創(chuàng)建一個WebSocket連接，返回WebSocket的對象實例。

websocket協(xié)議定義了兩種URL方案

• ws：非加密
• wss：加密（使用HTTPS采用的安全機制保證HTTP連接的安全）。

創(chuàng)建實例

/** * URL: 連接的目標 * protocols（選填）：string | string[] 一個或一組協(xié)議名稱*/?const ws = new WebSocket(URL, protocols)為了建立一個 WebSocket 連接，客戶端瀏覽器首先要向服務器發(fā)起一個HTTP 請求，這個請求和通常的 HTTP 請求不同，包含了一些附加頭信息，其中附加頭信息"Upgrade: WebSocket"表明這是一個申請協(xié)議升級的HTTP請求，服務器端解析這些附加的頭信息然后產生應答信息返回給客戶端，客戶端和服務器端的WebSocket連接就建立起來了，雙方就可以通過這個連接通道自由的傳遞信息，「并且這個連接會持續(xù)存在直到客戶端或者服務器端的某一方主動的關閉連接?！?/b>

Websocket事件

Websocket是純事件驅動的，可以通過監(jiān)聽Websocket對象上的事件處理數(shù)據(jù)輸入和連接狀態(tài)改變，以下為Websocket對象的4個事件。

• 「onopen」: 客戶端和服務器建立連接后觸發(fā)。它被稱為客戶端和服務器之間的「初始握手」。如果接收到open, 說明已經連接成功，可以進行通信了。
• 「onmessage」： 接收到消息時觸發(fā)。服務器發(fā)送給客戶端的消息可以包括純文本消息，二進制數(shù)據(jù)（Blob消息或者ArrayBuffer消息）
• 「onerror」： 響應意外故障時觸發(fā)，在錯誤之后總是會終止連接。
• 「onclose」：連接關閉時觸發(fā)。一旦連接關閉后，客戶端和服務端將不會再進行消息的收發(fā)。也可主動調用close()方法關閉連接。

Websocket方法

• 「send()」 : 在連接成功后關閉前，發(fā)送消息（onopen后和onclose前才可發(fā)送消息）。
• 「close()」 : 關閉連接

Websocket對象屬性

• 「readyState」: 只讀屬性，表示Websocket的連接狀態(tài)。其值如下：

常量特性	取值	狀態(tài)
Websocket.CONNECTING	0	連接進行中，但還未建立成功
Websocket.OPEN	1	連接已經建立，可以正常發(fā)送消息
Websocket.CLOSING	2	連接正在進行關閉握手
Websocket.CLOSED	3	表示連接已經關閉或者連接不能打開。

備注：不同瀏覽器支持不同，親測微信小程序沒有這個屬性。

• 「bufferedAmount」： 只讀屬性。已被 send() 放入正在隊列中等待傳輸，但是還沒有發(fā)出的 UTF-8 文本字節(jié)數(shù)。

當要檢查發(fā)往服務器的緩沖數(shù)據(jù)量，特別是客戶端向服務器發(fā)送大量數(shù)據(jù)。盡管調用send()連接是立即生效的，但是數(shù)據(jù)在互聯(lián)網上的傳輸卻不是這樣。瀏覽器將為你的客戶端應用程序緩存出棧數(shù)據(jù)，從而使你可以隨時調用send(), 但如果你想知道數(shù)據(jù)在網絡上的傳輸速率，Websocket對象可以告訴你緩存的大小。因此可以用bufferedAmount檢查已經進入隊列，但是尚未發(fā)送到服務器的字節(jié)數(shù)。

• 「Protocol」: 打開握手期間使用的協(xié)議。

用Websocket搭建一個簡易聊天室

以上是websocket的基礎概念，現(xiàn)在咱們就來手動實現(xiàn)一個聊天室demo。

創(chuàng)建連接

使用ws搭建一個簡單的Websocket連接。ws是一個第三方的Websocket通信模塊，是基于Node.js構建的。

1. 首先需要安裝下ws

npm i ws

1. 服務端邏輯：創(chuàng)建一個server.js文件，建立Websocket連接，啟動服務(這里使用的3000端口)。使用ws第三方插件，new一個Websocket實例，接著監(jiān)聽connection連接成功后，在connection內部編寫連接后的邏輯。監(jiān)聽onmessage事件獲取收到的消息，監(jiān)聽onclose事件處理連接斷開的邏輯，使用send方法向客戶端發(fā)送消息。

const Websocket = require('ws')const wss = new Websocket.Server({ port: 3000 })wss.on('connection', function (ws) { // 有客戶端連接進來 ws.on('message', function (message) { console.log('server receive message: ', message.toString()) }) ws.send('msg from server!') ws.on('close', function (message) { console.log('連接斷開', message) })})

1. 客戶端邏輯：這里用Vue搭建了一個基礎項目，在home.vue創(chuàng)建連接。使用原生的WebSocket創(chuàng)建一個ws實例，通過onopen方法監(jiān)聽WebSocket連接是否成功，此后所有的消息收發(fā)處理都要在連接打開狀態(tài)，即readyState為1時處理即可。接著在open種處理用戶登錄聊天室邏輯，使用onmessage接收服務端消息，onclose用于監(jiān)聽連接斷開并進行相應的處理，close方法則可以用戶離開聊天室時手動調用。

home.vue

this.ws = new WebSocket('ws://localhost:3000')console.log('before open', this.ws.readyState) // 0this.ws.onopen = () => { // 監(jiān)聽到連接成功 console.log('onopen', this.ws.readyState) // 1 this.roomOpen = true this.ws.send(JSON.stringify({ userId: this.userName, userName: this.nickname, roomId: item.roomId, roomName: item.name, event: 'login', // 向服務端發(fā)送一條登陸消息，并攜帶對應房間信息和用戶信息 }))}// 收到消息的回調this.ws.onmessage = (message) => { console.log('The client receives the message', message)}// 收到連接斷開通知this.ws.onclose = () => { // 監(jiān)聽websocket關閉的回調 console.log('onclose', this.ws.readyState)}// 手動斷開websocket連接close () { this.ws && this.ws.close()}

1. 可以在調試面板中查看連接狀態(tài)和消息收發(fā)

統(tǒng)計多個聊天室和用戶在線狀態(tài)

創(chuàng)建多個聊天室的邏輯在服務端進行，這里我們根據(jù)roomId來區(qū)分多個聊天室，先創(chuàng)建一個用來存儲roomId的數(shù)組，每當創(chuàng)建一個新的聊天室就往數(shù)組中加一個roomId。如果進入的是已有房間，則在已有的房間在線人數(shù)的基礎上把人數(shù)加1。而前端則需要負責發(fā)送用戶登陸登出通知及對應用戶信息給服務端，并根據(jù)服務端發(fā)送的消息進行頁面所需信息的渲染，代碼如下：

「home.vue」

this.ws.onopen = () => { this.roomOpen = true this.ws.send(JSON.stringify({ userId: this.userName, userName: this.nickname, roomId: item.roomId, roomName: item.name, event: 'login', })) }, 25000)}this.ws.onmessage = (message) => { const data = JSON.parse(message.data) this.onlineNum = data.num if (data.event === 'login') { // 有其他用戶進入房間消息 this.msgList.push({ content: `歡迎${data.userName}進入${data.roomName}房間～`, }) } else if (data.event === 'logout') { // 有其他用戶離開房間消息 console.log('logout', data) this.msgList.push({ content: `${data.userName}離開房間`, }) } else { // 普通消息 const self = this.userId === data.userId if (self) return this.msgList.push({ name: data.userName, self: false, content: data.content, }) } }「server.js」

ws.on('message', function (message) { console.log('server receive message: ', message.toString()) const data = JSON.parse(message.toString()) if (typeof ws.roomId === 'undefined' && data.roomId) { ws.roomId = data.roomId if (typeof group[ws.roomId] === 'undefined') { group[ws.roomId] = 1 } else { group[ws.roomId]++ } } data.num = group[ws.roomId] wss.clients.forEach(client => { if (client.readyState === Websocket.OPEN && client.roomId === ws.roomId) { client.send(JSON.stringify(data)) } })}) ws.on('close', function (message) { // 監(jiān)聽到聊天室關閉后，將在線人數(shù)減1，并將退出房間的消息推送給其他客戶端，更新頁面的在線人數(shù) group[ws.roomId]-- wss.clients.forEach(function each (client) { if (client !== ws && client.readyState === Websocket.OPEN && client.roomId === ws.roomId) { client.send(JSON.stringify({ ...ws.enterInfo, event: 'logout', num: group[ws.roomId], })) } })})

心跳保活

由于在長連接的場景下，客戶端和服務端并不是一直處于通信狀態(tài)，如果雙方長期沒有溝通，就不清楚對方目前是否還在連接中，因此需要發(fā)送一段很小的報文告訴對方“我還活著”，來保證連接正常。