# ExpressJS集成express-ws [TOC] ## 版本 ```JSON "express": "~4.16.1", "express-ws": "^5.0.2", ``` ## 簡單使用 - app.js ```JS const express = require('express' ...
ExpressJS集成express-ws
目錄
版本
"express": "~4.16.1",
"express-ws": "^5.0.2",
簡單使用
- app.js
const express = require('express');
const app = express();
const expressWs = require('express-ws')(app) //混入app
app.ws('/ws',(ws,req)=>{
ws.on('message',msg=>{
console.log(msg)
ws.send(msg)
})
})
app.listen('3000')
- 局部路由
//websocket.js
const express = require('express');
const router = express.Router();
router.ws('/router-ws',(ws,req)=>{
ws.on('message',msg=>{
console.log(msg)
ws.send(msg)
})
})
module.exports = router
app.js完整代碼
const express = require('express');
const app = express();
const expressWs = require('express-ws')(app) //混入app
app.ws('/ws',(ws,req)=>{
ws.on('message',msg=>{
console.log(msg)
ws.send(msg)
})
})
var webSocket = require('./websocket.js')
app.use(webSocket)
app.listen('3000')
封裝express-ws
將 “express-ws” 封裝，通過 express 的 router 模塊化
websocket.js
// 引入
const express = require('express');
const router = express.Router();
const expressWs = require('express-ws')
封裝通道類
- 創建通道類 channel，引入router定義websocket連接組,調用時傳入路徑 path 進行區分
//類
class channel {
router;
constructor(props) {
this.router = props;
}
createChannel(path) {
// 建立通道
this.router.ws('/' + path, (ws, req) => {
ws.on('message', (msg) =>{
console.log(msg)
})
})
}
}
- 調用方法
let channels = new channel(router)
//創建一個新的通道 路徑為：/ws
channels.createChannel('ws')
//訪問路徑： ws://localhost:3000/ws
- 監聽websocket實例，在外部函數監聽實例返回參數，並通過 path 區分
//類
class channel {
router;
constructor(props) {
this.router = props;
}
createChannel(path) {
// 建立通道
this.router.ws('/' + path, (ws, req) => {
ws.on('message', (msg) => getMsg(msg, path))
})
}
}
//外部函數監聽客戶端消息
let getMsg = (msg, from) => {
switch (from) {
case 'ws':
console.log('ws:', msg);
break;
}
}
- 根據路由分類存儲已連接用戶，添加 saveClients() 方法
//類
class channel {
router;
clients = {
allClients: [],//存放通過當前類所創建的通道中所有已連接用戶
};
constructor(props) {
this.router = props;
}
createChannel(path) {
this.clients[path] = []; //用於存放當前通道中的用戶
// 建立通道
this.router.ws('/' + path, (ws, req) => {
// 保存用戶
this.saveClients(ws, req, path)
ws.on('message', (msg) => getMsg(msg, path))
})
}
// 保存用戶
saveClients(socket, req, path) {
let client = {
id: req.query.id,
socket,
}
this.clients.allClients.push(client)
this.clients[path].push(client)
}
}
// 外部函數監聽客戶端消息
let getMsg = (msg, from) => {
switch (from) {
case 'ws':
console.log('ws:', msg);
break;
}
}
入口函數 initWebSocket
編寫入口函數，通過入口函數引入app，操作 express-ws。將 .ws 方法混入app內
調用封裝的channel類，去創建通道
//初始化
let WS = null;
// 聲明一個通道類
let channels = null;
function initWebSocket(app) {
WS = expressWs(app) //混入app, wsServer 存儲所有已連接實例
// 創建通道
channels = new channel(router)
channels.createChannel('ws')
//訪問路徑： ws://localhost:3000/ws
app.use(router)
}
完整代碼：
websocket.js
//websocket.js
const express = require('express');
const router = express.Router();
const expressWs = require('express-ws')
// 初始化
let WS = null;
// 聲明一個通道類
let channels = null;
function initWebSocket(app) {
WS = expressWs(app) //混入app, wsServer 存儲所有已連接實例
// 創建通道
channels = new channel(router)
channels.createChannel('ws')
channels.createChannel('ws2')
app.use(router)
}
// 通道類
class channel {
router;
clients = {
allClients: [],//存放通過當前類所創建的通道中所有已連接用戶
};
constructor(props) {
this.router = props;
}
createChannel(path) {
this.clients[path] = []; //用於存放當前通道中的用戶
// 建立通道
this.router.ws('/' + path, (ws, req) => {
// 保存用戶
this.saveClients(ws, req, path)
ws.on('message', (msg) => getMsg(msg, path))
ws.on('close', (code) => close(code, path))
ws.on('error', (e) => error(e, path))
})
}
// 保存用戶
saveClients(socket, req, path) {
let client = {
id: req.query.id,
socket,
}
this.clients.allClients.push(client)
this.clients[path].push(client)
}
}
/**
*
* @param {*} msg 消息內容
* @param {String} from 消息來源
*/
// 監聽消息
let getMsg = (msg, from) => {
switch (from) {
case 'ws':
console.log('ws:', msg);
break;
case 'wsw':
console.log('wsw:', msg);
break;
}
SendMsgAll({ data: msg })
}
// 發送消息
let sendMsg = (client, data) => {
if (!client) return
client.send(JSON.stringify(data))
}
let close = (code) => {
console.log('關閉連接', code);
}
let error = (e) => {
console.log('error: ', e);
}
// 群發
/**
*
* @param {String} path 需要發送的用戶來源 路由，預設全部
* @param {*} data 發送的數據
*/
function SendMsgAll({ path = '/', data = "" }) {
let allClientsList = Array.from(WS.getWss(path).clients)
for (let key in allClientsList) {
let client = allClientsList[key]
if (client._readyState == 1) {
sendMsg(client, data)
}
}
}
module.exports = {
initWebSocket,
SendMsgAll
}
app.js 掛載
const express = require('express');
const app = express();
// WebSocket 在JWT驗證之前引入掛載
const webSocket = require('./websocket')
webSocket.initWebSocket(app)
app.listen('3000')
源碼
Gitee源碼倉庫地址：Erick-K博客源碼
初步整理，功能不夠全面，後續會進一步更新，歡迎評論區互相交流~
本文來自博客園，作者：Erick-K，轉載請註明原文鏈接：https://www.cnblogs.com/tkingBlog/p/17672046.html
