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

本文從網(wǎng)絡(luò)協(xié)議，技術(shù)背景，安全和生產(chǎn)應(yīng)用的方向，詳細(xì)介紹 WebSocket 在 Node.js 中的落地實(shí)踐。

大綱預(yù)覽

本文介紹的內(nèi)容包括以下方面：

• 網(wǎng)絡(luò)協(xié)議進(jìn)化
• Socket.IO？
• ws 模塊實(shí)現(xiàn)
• Express 集成
• WebSocket 實(shí)例
• 消息廣播
• 安全與認(rèn)證
• BFF 應(yīng)用

網(wǎng)絡(luò)協(xié)議進(jìn)化

1. 請求消耗太大。客戶端不斷請求，浪費(fèi)流量和服務(wù)器資源，給服務(wù)器造成壓力。
2. 不能保證及時?？蛻舳诵枰胶饧皶r性和性能，請求間隔必然不能太小，因此會有延遲。

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

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

Socket.IO？

ws 模塊實(shí)現(xiàn)

$ npm install ws

服務(wù)端

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

$ node ws-server.js

客戶端

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)閉')
}

const WebSocket = require('ws')
var ws = new WebSocket('ws://localhost:8080')

ws.on('open', () => {
  console.log('客戶端已連接')
})
ws.on('message', data => {
  console.log('客戶端收到消息: ' + data)
  ws.close()
})
ws.on('close', () => {
  console.log('連接關(guān)閉')
})

Express 集成

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

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

// websocket.js
var router = express.Router()

router.ws('/test-ws', (ws, req) => {
  ws.on('message', msg => {
    ws.send(msg)
  })
})

module.exports = router

var express = require('express')
var app = express()
var wsServer = require('express-ws')(app)
var webSocket = require('./websocket.js')

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

app.use('/websocket', webSocket)

app.listen(3000)

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

WebSocket 實(shí)例

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

瀏覽器

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

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

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

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

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

服務(wù)端

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

消息廣播

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

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

wss.clients.size

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

安全與認(rèn)證

1. Token 連接認(rèn)證
2. wss 支持

Token 連接認(rèn)證

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

server.listen(8080)

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('服務(wù)端信息')
})

• Basic Auth
• Quary 傳參

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
  }
}

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

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

wss 支持

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 應(yīng)用

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

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

源碼+答疑