隨著 HTML5 推出 WebSocket，即時通訊場景終于迎來了根本解決方案。WebSocket 是全雙工通信協(xié)議，當客戶端與服務端建立連接之后，雙方可以互相發(fā)送數(shù)據(jù)，這樣的話就不需要客戶端通過輪詢這種低效的方式獲取數(shù)據(jù)，服務端有新消息直接推送給客戶端即可。

傳統(tǒng) HTTP 連接方式如下：

## 普通連接
http://localhost:80/test
## 安全連接
https://localhost:80/test

WebSocket 是另一種協(xié)議，連接方式如下：

## 普通連接
ws://localhost:80/test
## 安全連接
wss://localhost:80/test

但是 WebSocket 也不是完全脫離 HTTP 的，若要建立 WebSocket 連接，則必須要客戶端主動發(fā)起一個建立連接的 HTTP 請求，連接成功之后客戶端與服務端才能進行雙向通信。

Socket.IO？

提起用 Node.js 實現(xiàn) WebSocket，大家一定會想到一個庫：Socket.IO

沒錯，Socket.IO 是目前 Node.js 在生產(chǎn)環(huán)境中開發(fā) WebSocket 應用最好的選擇。它功能強大，高性能，低延遲，并且可以一步集成到 express 框架中。

但是也許你不清楚，Socket.IO 并不是一個純粹的 WebSocket 框架。它是將 Websocket 和輪詢機制以及其它的實時通信方式封裝成了通用的接口，以實現(xiàn)更高效的雙向通信。

嚴格來說，Websocket 只是 Socket.IO 的一部分。

也許你會問：既然 Socket.IO 在 WebSocket 的基礎上做了那么多的優(yōu)化，并且非常成熟，那為什么還要搭一個原生 WebSocket 服務？

首先，Socket.IO 不能通過原生的 ws 協(xié)議連接。比如你在瀏覽器試圖通過 ws://localhost:8080/test-socket 這種方式連接 Socket.IO 服務，是連接不上的。因為 Socket.IO 的服務端必須通過 Socket.IO 的客戶端連接，不支持默認的 WebSocket 方式連接。

其次，Socket.IO 封裝程度非常高，使用它可能不利于你了解 WebSocket 建立連接的原理。

因此，我們本篇就用 Node.js 中基礎的 ws 模塊，從頭開始實現(xiàn)一個原生的 WebSocket 服務，并且在前端用 ws 協(xié)議直接連接，體驗一把雙向通信的感覺！

ws 模塊實現(xiàn)

ws 是 Node.js 下一個簡單快速，并且定制程度極高的 WebSocket 實現(xiàn)方案，同時包含了服務端和客戶端。

用 ws 搭建起來的服務端，瀏覽器可以通過原生 WebSocket 構(gòu)造函數(shù)直接連接，非常便捷。ws 客戶端則是模擬瀏覽器的 WebSocket 構(gòu)造函數(shù)，用于連接其他 WebSocket 服務器進行通信。

注意一點：ws 只能在 Node.js 環(huán)境中使用，瀏覽器中不可用，瀏覽器請直接使用原生 WebSocket 構(gòu)造函數(shù)。

下面開始接入，第一步，安裝 ws：

$ npm install ws

安裝好后，我們先搭建一個 ws 服務端。

服務端

搭建 websocket 服務器需要用 WebSocketServer 構(gòu)造函數(shù)。

const { WebSocketServer } = require('ws')
const wss = new WebSocketServer({
  port: 8080
})
wss.on('connection', (ws, req) =&gt; {
  console.log('客戶端已連接：', req.socket.remoteAddress)
  ws.on('message', data =&gt; {
    console.log('收到客戶端發(fā)送的消息：', data)
  })
  ws.send('我是服務端') // 向當前客戶端發(fā)送消息
})

把這段代碼寫進 ws-server.js 然后運行：

$ node ws-server.js

客戶端

上一步建好了 WebSocket 服務器，現(xiàn)在我們在前端連接并監(jiān)聽消息：

var ws = new WebSocket('ws://localhost:8080')
ws.onopen = function(mevt) {
  console.log('客戶端已連接')
}
ws.onmessage = function(mevt) {
  console.log('客戶端收到消息: ' + evt.data)
  ws.close()
}
ws.onclose = function(mevt) {
  console.log('連接關(guān)閉')
}

將代碼寫入 wsc.html 然后用瀏覽器打開，看到打印如下：

可以看到，瀏覽器連接成功后，收到服務端主動推送過來的消息，然后瀏覽器可以主動關(guān)閉連接。

Node.js 環(huán)境下我們看 ws 模塊如何發(fā)起連接：

const WebSocket = require('ws')
var ws = new WebSocket('ws://localhost:8080')
ws.on('open', () =&gt; {
  console.log('客戶端已連接')
})
ws.on('message', data =&gt; {
  console.log('客戶端收到消息: ' + data)
  ws.close()
})
ws.on('close', () =&gt; {
  console.log('連接關(guān)閉')
})

代碼與瀏覽器的邏輯一摸一樣，只是寫法稍有些不同，注意區(qū)別。

需要特殊說明的一點，瀏覽器端監(jiān)聽 message 事件的回調(diào)函數(shù)，參數(shù)是一個 MessageEvent 的實例對象，服務端發(fā)來的實際數(shù)據(jù)需要通過 mevt.data 獲取。

而在 ws 客戶端，這個參數(shù)就是服務端的實際數(shù)據(jù)，直接獲取即可。

Express 集成

ws 模塊一般不會單獨使用，更優(yōu)的方案是集成到現(xiàn)有的框架中。這節(jié)我們將 ws 模塊集成到 Express 框架。

集成到 Express 框架的優(yōu)點是，我們不需要單獨監(jiān)聽一個端口，使用框架啟動的端口即可，并且我們還可以指定訪問到某個路由，才發(fā)起 WebSocket 連接。

幸運的是這一切不需要手動實現(xiàn)，express-ws 模塊已經(jīng)幫我們做好了大部分的集成工作。

首先安裝，然后在入口文件引入：

var expressWs = require('express-ws')(app)

和 Express 的 Router 一樣，express-ws 也支持注冊全局路由和局部路由。

先看全局路由，通過 [host]/test-ws 連接：

app.ws('/test-ws', (ws, req) =&gt; {
  ws.on('message', msg =&gt; {
    ws.send(msg)
  })
})

局部路由則是注冊在一個路由組下面的子路由。配置一個名為 websocket 的路由組并指向 websocket.js 文件，代碼如下：

// websocket.js
var router = express.Router()
router.ws('/test-ws', (ws, req) =&gt; {
  ws.on('message', msg =&gt; {
    ws.send(msg)
  })
})
module.exports = router

連接 [host]/websocket/test-ws 就可以訪問到這個子路由。

路由組的作用是定義一個 websocket 連接組，不同需求連接這個組下的不同子路由。比如可以將單聊和群聊設置為兩個子路由，分別處理各自的連接通信邏輯。

完整代碼如下：

var express = require('express')
var app = express()
var wsServer = require('express-ws')(app)
var webSocket = require('./websocket.js')
app.ws('/test-ws', (ws, req) =&gt; {
  ws.on('message', msg =&gt; {
    ws.send(msg)
  })
})
app.use('/websocket', webSocket)
app.listen(3000)

實際開發(fā)中獲取常用信息的小方法：

// 客戶端的IP地址
req.socket.remoteAddress
// 連接參數(shù)
req.query

WebSocket 實例

WebSocket 實例是指客戶端連接對象，以及服務端連接的第一個參數(shù)。

var ws = new WebSocket('ws://localhost:8080')
app.ws('/test-ws', (ws, req) =&gt; {}

代碼中的 ws 就是 WebSocket 實例，表示建立的連接。

瀏覽器

瀏覽器的 ws 對象中包含的信息如下：

{
  binaryType: 'blob'
  bufferedAmount: 0
  extensions: ''
  onclose: null
  onerror: null
  onmessage: null
  onopen: null
  protocol: ''
  readyState: 3
  url: 'ws://localhost:8080/'
}

首先非常關(guān)鍵的是四個監(jiān)聽屬性，用于定義函數(shù)：

onopen：連接建立后的函數(shù)
onmessage：收到服務端推送消息的函數(shù)
onclose：連接關(guān)閉的函數(shù)
onerror：連接異常的函數(shù)

其中最常用的是 onmessage 屬性，賦值為一個函數(shù)來監(jiān)聽服務端消息：

ws.onmessage = mevt => {
  console.log('消息：', mevt.data)
}

還有一個關(guān)鍵屬性是 readyState，表示連接狀態(tài)，值為一個數(shù)字。并且每個值都可以用常量表示，對應關(guān)系和含義如下：

0: 常量 WebSocket.CONNECTING，表示正在連接
1: 常量 WebSocket.OPEN，表示已連接
2: 常量 WebSocket.CLOSING，表示正在關(guān)閉
3: 常量 WebSocket.CLOSED，表示已關(guān)閉

當然最重要的還有 send 方法用于發(fā)送信息，向服務端發(fā)送數(shù)據(jù)：

ws.send('要發(fā)送的信息')

服務端

服務端的 ws 對象表示當前發(fā)起連接的一個客戶端，基本屬性與瀏覽器大致相同。

比如上面客戶端的四個監(jiān)聽屬性，readyState 屬性，以及 send 方法都是一致的。不過因為服務端是 Node.js 實現(xiàn)，因此會有更豐富的支持。

比如下面兩種監(jiān)聽事件的寫法效果是一樣的：

// Node.js 環(huán)境
ws.onmessage = str => {
  console.log('消息：', str)
}
ws.on('message', str => {
  console.log('消息：', mevt.data)
})

詳細的屬性和介紹可以查閱官方文檔

消息廣播

WebSocket 服務器不會只有一個客戶端連接，消息廣播的意思就是把信息發(fā)給所有已連接的客戶端，像一個大喇叭一樣，所有人都聽得到，經(jīng)典場景就是熱點推送。

那么廣播之前，就必須要解決一個問題，如何獲取當前已連接（在線）的客戶端？

其實 ws 模塊提供了快捷的獲取方法：

var wss = new WebSocketServer({ port: 8080 })
// 獲取所有已連接客戶端
wss.clients

方便吧。再看 express-ws 怎么獲?。?/p>

var wsServer = expressWebSocket(app)
var wss = wsServer.getWss()
// 獲取所有已連接客戶端
wss.clients

拿到 wss.clients 后，我們看看它到底是什么樣子。經(jīng)過打印，發(fā)現(xiàn)它的數(shù)據(jù)結(jié)構(gòu)比想象到還要簡單，就是由所有在線客戶端的 WebSocket 實例組成的一個 Set 集合。

那么，獲取當前在線客戶端的數(shù)量：

wss.clients.size

簡單粗暴的實現(xiàn)廣播：

wss.clients.forEach(client =&gt; {
  if (client.readyState === 1) {
    client.send('廣播數(shù)據(jù)')
  }
})

這是非常簡單，基礎的實現(xiàn)方式。試想一下如果此刻在線客戶有 10000 個，那么這個循環(huán)多半會卡死吧。因此才會有像 socket.io 這樣的庫，對基礎功能做了大量優(yōu)化和封裝，提高并發(fā)性能。

上面的廣播屬于全局廣播，就是將消息發(fā)給所有人。然而還有另一種場景，比如一個 5 人的群聊小組聊天，這時的廣播只是給這 5 人小團體發(fā)消息，因此這也叫局部廣播。

局部廣播的實現(xiàn)要復雜一些，一般會揉合具體的業(yè)務場景。這就需要我們在客戶端連接時，對客戶端數(shù)據(jù)做持久化處理了。比如用 Redis 存儲在線客戶端的狀態(tài)和數(shù)據(jù)，這樣檢索分類更快，效率更高。

局部廣播實現(xiàn)，那一對一私聊就更容易了。找到兩個客戶端對應的 WebSocket 實例互發(fā)消息就行。

安全與認證

前面搭建好的 WebSocket 服務器，默認任何客戶端都可以連接，這在生產(chǎn)環(huán)境肯定是不行的。我們要對 WebSocket 服務器做安全保障，主要是從兩個方面入手：

Token 連接認證
wss 支持

下面說一說我的實現(xiàn)思路。

Token 連接認證

HTTP 請求接口我們一般會做 JWT 認證，在請求頭中帶一個指定 Header，將一個 token 字符串傳過去，后端會拿這個 token 做校驗，校驗失敗則返回 401 錯誤阻止請求。

我們上面說過，WebSocket 建立連接的第一步是客戶端發(fā)起一個 HTTP 的連接請求，那么我們在這個 HTTP 請求上做驗證，如果驗證失敗，則中段 WebSocket 的連接創(chuàng)建，不就可以了？

順著這個思路，我們來改造一下服務端代碼。

因為要在 HTTP 層做校驗，所以用 http 模塊創(chuàng)建服務器，關(guān)掉 WebSocket 服務的端口。

var server = http.createServer()
var wss = new WebSocketServer({ noServer: true })
server.listen(8080)

當客戶端通過 ws:// 連接服務端時，服務端會進行協(xié)議升級，也就是將 http 協(xié)議升級成 websocket 協(xié)議，此時會觸發(fā) upgrade 事件：

server.on('upgrade', (request, socket) => {
  // 用 request 獲取參數(shù)做驗證
  // 1. 驗證不通過判斷
  if ('驗證失敗') {
    socket.write('HTTP/1.1 401 Unauthorized\r\n\r\n')
    socket.destroy()
    return
  }
  // 2. 驗證通過，繼續(xù)建立連接
  wss.handleUpgrade(request, socket, _, ws => {
    wss.emit('connection', ws, request)
  })
})
// 3. 監(jiān)聽連接
wss.on('connection', (ws, request) => {
  console.log('客戶端已連接')
  ws.send('服務端信息')
})

這樣服務端認證添加完畢，具體的認證方法結(jié)合客戶端的傳參方式來定。

WebSocket 客戶端連接不支持自定義 Header，因此不能用 JWT 的方案，可用方案有兩種：

Basic Auth
Quary 傳參

Basic Auth 認證簡單說就是賬號+密碼認證，而且賬號密碼是帶在 URL 里的。

假設我有賬號是 ruims，密碼是 123456，那么客戶端連接是這樣：

var ws = new WebSocket('ws://ruims:123456@localhost:8080')

那么服務端就會收到這樣一個請求頭：

wss.on('connection', (ws, req) => {
  if(req.headers['authorization']) {
    let auth = req.headers['authorization']
    console.log(auth)
    // 打印的值：Basic cnVpbXM6MTIzNDU2
  }
}

其中 cnVpbXM6MTIzNDU2 就是 ruims:123456 的 base64 編碼，服務端可以獲取到這個編碼來做認證。

Quary 傳參比較簡單，就是普通的 URL 傳參，可以帶一個短一點的加密字符串過去，服務端獲取到該字符串然后做認證：

var ws = new WebSocket('ws://localhost:8080?token=cnVpbXM6MTIzNDU2')

服務端獲取參數(shù)：

wss.on('connection', (ws, req) => {
  console.log(req.query.token)
}

wss 支持

WebSocket 客戶端使用 ws:// 協(xié)議連接，那 wss 是什么意思？

其實非常簡單，和 https 原理一摸一樣。

https 表示安全的 http 協(xié)議，組成是 HTTP + SSL

wss 則表示安全的 ws 協(xié)議，組成是 WS + SSL

那為什么一定要用 wss 呢？除了安全性，還有一個關(guān)鍵原因是：如果你的 web 應用是 https 協(xié)議，你在當前應用中使用 WebSocket 就必須是 wss 協(xié)議，否則瀏覽器拒絕連接。

配置 wss 直接在 https 配置中加一個 location 即可，直接上 nginx 配置：

location /websocket {
  proxy_pass http://127.0.0.1:8080;
  proxy_redirect off;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection upgrade;
}

然后客戶端連接就變成了這樣：

var ws = new WebSocket('wss://[host]/websocket')

BFF 應用

BFF 或許你聽說過，全稱是 Backend For Frontend，意思是為前端服務的后端，在實際應用架構(gòu)中屬于前端和后端的一個中間層。

這個中間層一般是由 Node.js 實現(xiàn)，那么它有什么作用呢？

眾所周知，現(xiàn)在后端的主流架構(gòu)是微服務，微服務情況下 API 會劃分的非常細，商品服務就是商品服務，通知服務就是通知服務。當你想在商品上架時給用戶發(fā)一個通知，可能至少需要調(diào)兩個接口。

這樣的話對前端其實是不友好的，于是后來出現(xiàn)了 BFF 中間層，相當于一個后端請求的中間代理站，前端可以直接請求 BFF 的接口，然后 BFF 再向后端接口請求，將需要的數(shù)據(jù)組合起來，一次返回前端。

那我們在上面講的一大堆 WebSocket 的知識，在 BFF 層如何應用呢？

我想到的應用場景至少有 4 個：

查看當前在線人數(shù)，在線用戶信息
登錄新設備，其他設備退出登錄
檢測網(wǎng)絡連接/斷開
站內(nèi)消息，小圓點提示

這些功能以前是在后端實現(xiàn)的，并且會與其他業(yè)務功能耦合?，F(xiàn)在有了 BFF，那么 WebSocket 完全可以在這一層實現(xiàn)，讓后端可以專注核心數(shù)據(jù)邏輯。

由此可見，掌握了 WebSocket 在 Node.js 中的實踐應用，作為前端的我們可以破除內(nèi)卷，在另一個領域繼續(xù)發(fā)揮價值，豈不美哉？

源碼地址：https://github.com/ruidoc/blog-codes

以上就是NodeJS落地WebSocket實踐前端架構(gòu)師破局技術(shù)的詳細內(nèi)容，更多關(guān)于前端架構(gòu)NodeJS WebSocket的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

NodeJS落地WebSocket實踐前端架構(gòu)師破局技術(shù)

目錄

網(wǎng)絡協(xié)議進化

Socket.IO？

ws 模塊實現(xiàn)

服務端

客戶端

Express 集成

WebSocket 實例

瀏覽器

服務端

消息廣播

安全與認證

Token 連接認證

wss 支持

BFF 應用

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

NodeJS落地WebSocket實踐前端架構(gòu)師破局技術(shù)

目錄

網(wǎng)絡協(xié)議進化

Socket.IO？

ws 模塊實現(xiàn)

服務端

客戶端

Express 集成

WebSocket 實例

瀏覽器

服務端

消息廣播

安全與認證

Token 連接認證

wss 支持

BFF 應用

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

Socket.IO？