ExpressJS使用express-ws

忍者乱太郎

ExpressJS集成express-ws


目录

• ExpressJS集成express-ws
  
  
  
  • 版本
    
  • 简单使用
    
  • 封装express-ws
    
    
    
    • websocket.js
      
      
      
      • 封装通道类
        
      • 入口函数 initWebSocket
        
      
      
    
    
  • 完整代码：
    
    
    
    • websocket.js
      
    • app.js 挂载
      
    
    
  • 源码
    
  
  

版本

1. "express": "~4.16.1",
2. "express-ws": "^5.0.2",

复制代码

简单使用

• app.js
  

1. const express = require('express');
2. const app = express();
3. const expressWs = require('express-ws')(app) //混入app
4. app.ws('/ws',(ws,req)=>{
5.     ws.on('message',msg=>{
6.         console.log(msg)
7.         ws.send(msg)
8.     })
9. })
11. app.listen('3000')

复制代码

• 局部路由
  

1. //websocket.js
2. const express = require('express');
3. const router = express.Router();
5. router.ws('/router-ws',(ws,req)=>{
6.     ws.on('message',msg=>{
7.         console.log(msg)
8.         ws.send(msg)
9.     })
10. })
11. module.exports = router

复制代码

app.js完整代码

1. const express = require('express');
2. const app = express();
3. const expressWs = require('express-ws')(app) //混入app
4. app.ws('/ws',(ws,req)=>{
5.     ws.on('message',msg=>{
6.         console.log(msg)
7.         ws.send(msg)
8.     })
9. })
10. var webSocket = require('./websocket.js')
11. app.use(webSocket)
13. app.listen('3000')

复制代码

封装express-ws

将 “express-ws” 封装，通过 express 的 router 模块化
websocket.js

1. // 引入
2. const express = require('express');
3. const router = express.Router();
4. const expressWs = require('express-ws')

复制代码

封装通道类

• 创建通道类 channel，引入router定义websocket连接组,调用时传入路径 path 进行区分
  

1. //类
2. class channel {
3.     router;
4.     constructor(props) {
5.         this.router = props;
6.     }
7.     createChannel(path) {
8.         // 建立通道
9.         this.router.ws('/' + path, (ws, req) => {
10.             ws.on('message', (msg) =>{
11.                 console.log(msg)
12.             })
13.         })
14.     }
15. }

复制代码

• 调用方法
  

1. let channels = new channel(router)
2. //创建一个新的通道 路径为：/ws
3. channels.createChannel('ws')
4. //访问路径： ws://localhost:3000/ws

复制代码

• 监听websocket实例，在外部函数监听实例返回参数，并通过 path 区分
  

1. //类
2. class channel {
3.     router;
4.     constructor(props) {
5.         this.router = props;
6.     }
7.     createChannel(path) {
8.         // 建立通道
9.         this.router.ws('/' + path, (ws, req) => {
10.             ws.on('message', (msg) => getMsg(msg, path))
11.         })
12.     }
13. }
14. //外部函数监听客户端消息
15. let getMsg = (msg, from) => {
16.     switch (from) {
17.         case 'ws':
18.             console.log('ws:', msg);
19.             break;
20.     }
21. }

复制代码

• 根据路由分类存储已连接用户，添加 saveClients() 方法
  

1. //类
2. class channel {
3.     router;
4.     clients = {
5.         allClients: [],//存放通过当前类所创建的通道中所有已连接用户
6.     };
7. constructor(props) {
8.     this.router = props;
9. }
10. createChannel(path) {
11.     this.clients[path] = []; //用于存放当前通道中的用户
12.     // 建立通道
13.     this.router.ws('/' + path, (ws, req) => {
14.         // 保存用户
15.         this.saveClients(ws, req, path)
16.         ws.on('message', (msg) => getMsg(msg, path))
17.     })
18. }
20. // 保存用户
21. saveClients(socket, req, path) {
22.     let client = {
23.         id: req.query.id,
24.         socket,
25.     }
26.     this.clients.allClients.push(client)
27.     this.clients[path].push(client)
28. }
29. }
30. // 外部函数监听客户端消息
31. let getMsg = (msg, from) => {
32.     switch (from) {
33.         case 'ws':
34.             console.log('ws:', msg);
35.             break;
36.     }
37. }

复制代码

入口函数 initWebSocket

编写入口函数，通过入口函数引入app，操作 express-ws。将 .ws 方法混入app内
调用封装的channel类，去创建通道

1. //初始化
2. let WS = null;
3. // 声明一个通道类
4. let channels = null;
5. function initWebSocket(app) {
6.     WS = expressWs(app) //混入app, wsServer 存储所有已连接实例
7.     // 创建通道
8.     channels = new channel(router)
9.     channels.createChannel('ws')
10.     //访问路径： ws://localhost:3000/ws
11.     app.use(router)
12. }

复制代码

完整代码：

websocket.js

1. //websocket.js
2. const express = require('express');
3. const router = express.Router();
4. const expressWs = require('express-ws')
5. // 初始化
6. let WS = null;
7. // 声明一个通道类
8. let channels = null;
9. function initWebSocket(app) {
10.     WS = expressWs(app) //混入app, wsServer 存储所有已连接实例
11.     // 创建通道
12.     channels = new channel(router)
13.     channels.createChannel('ws')
14.     channels.createChannel('ws2')
15.     app.use(router)
16. }
17. // 通道类
18. class channel {
19.     router;
20.     clients = {
21.         allClients: [],//存放通过当前类所创建的通道中所有已连接用户
22.     };
23. constructor(props) {
24.     this.router = props;
25. }
26. createChannel(path) {
27.     this.clients[path] = []; //用于存放当前通道中的用户
28.     // 建立通道
29.     this.router.ws('/' + path, (ws, req) => {
30.         // 保存用户
31.         this.saveClients(ws, req, path)
32.         ws.on('message', (msg) => getMsg(msg, path))
33.         ws.on('close', (code) => close(code, path))
34.         ws.on('error', (e) => error(e, path))
35.     })
36. }
38. // 保存用户
39. saveClients(socket, req, path) {
40.     let client = {
41.         id: req.query.id,
42.         socket,
43.     }
44.     this.clients.allClients.push(client)
45.     this.clients[path].push(client)
46. }
47. }
48. /**
49. *
50. * @param {*} msg 消息内容
51. * @param {String} from 消息来源
52. */
53. // 监听消息
54. let getMsg = (msg, from) => {
55.     switch (from) {
56.         case 'ws':
57.             console.log('ws:', msg);
58.             break;
59.         case 'wsw':
60.             console.log('wsw:', msg);
61.             break;
62.     }
63.     SendMsgAll({ data: msg })
64. }
65. // 发送消息
66. let sendMsg = (client, data) => {
67.     if (!client) return
68.     client.send(JSON.stringify(data))
69. }
70. let close = (code) => {
71.     console.log('关闭连接', code);
72. }
73. let error = (e) => {
74.     console.log('error: ', e);
75. }
76. // 群发
77. /**
78. *
79. * @param {String} path 需要发送的用户来源 路由，默认全部
80. * @param {*} data 发送的数据
81. */
82. function SendMsgAll({ path = '/', data = "" }) {
83.     let allClientsList = Array.from(WS.getWss(path).clients)
84.     for (let key in allClientsList) {
85.         let client = allClientsList[key]
86.         if (client._readyState == 1) {
87.             sendMsg(client, data)
88.         }
89.     }
90. }
91. module.exports = {
92.     initWebSocket,
93.     SendMsgAll
94. }

复制代码

app.js 挂载

1. const express = require('express');
2. const app = express();
4. // WebSocket 在JWT验证之前引入挂载
5. const webSocket = require('./websocket')
6. webSocket.initWebSocket(app)
8. app.listen('3000')

复制代码

源码

Gitee源码仓库地址：Erick-K博客源码

初步整理，功能不够全面，后续会进一步更新，欢迎评论区互相交流~

来源:https://www.cnblogs.com/tkingBlog/p/17672046.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！