前后端项目中webSocket的使用

最新推荐文章于 2024-05-11 20:03:22 发布

qq_33446686

最新推荐文章于 2024-05-11 20:03:22 发布

阅读量935

点赞数

分类专栏：开发类文章标签： websocket vue.js javascript

原文链接：https://blog.csdn.net/qq_44774831/article/details/117001364

版权

开发类专栏收录该内容

8 篇文章 0 订阅

订阅专栏

webSocket
后端Koa2中
安装
创建web_socket_service文件
app.js中配置
前端vue中
在src下面的utils中创建socket_service.js文件
编写socket_service.js文件内容
回到vue具体的组件中进行调用
后端Koa2中
安装
命令行中输入

npm i ws -S
1
服务端接收数据字段约定：

服务端发送数据字段的约定

创建web_socket_service文件
在后端项目的根目录下创建一个service文件夹，文件夹中创建web_socket_service.js文件，文件截图及内容如下：

// 引入socket包
const WebSocket = require(‘ws’)
// 创建WebSocket服务端的对象，绑定的端口是9998
const wss = new WebSocket.Server({
port: 9998
})
// 服务端开启了监听
module.exports.listen = () => {
// 对客户端（前端）的事件进行监听
// client: 代表的是客户端的连接socket对象
wss.on(‘connection’, client => {
console.log(‘有客户端连接成功了…’)
// 对客户端的连接对象进行message事件的监听
// msg：由客户端发给服务端的数据
client.on(‘message’, msg => {
console.log(‘客户端发送数据给服务端了：’ + msg)
})
// 由服务端往客户端发送数据
client.send(‘hello socket from banked’)
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
app.js中配置
const WebSocketService = require(‘./service/web_socket_service’)
// 开启服务端的监听，监听客户端的连接
// 当某一一个客户端连接成功之后，就会对这个客户端进行message事件的监听
WebSocketService.listen()
1
2
3
4
前端vue中
由于websocket是window对象就提供了的，所以在前端不用安装额外的包了。

在src下面的utils中创建socket_service.js文件

编写socket_service.js文件内容
export default class SocketService {
// 1.定义类socketSservice，并定义成单例设计模式
/**

单例
*/
static instance = null
static get Instance() {
if (!this.instance) {
this.instance = new SocketService()
}
return this.instance
}
// 2.定义连接服务器的方法connet
// 和服务端连接的socket对象
ws = null
// 标识是否连接成功
connected = false
// 请求数据尝试的次数
sendRetryCount = 0
// 重新连接尝试的次数
connectRetryCount = 0

// 存储回到函数
callBackMapping = {}

// 定义连接服务器的方法，注意将此方法注册到main.js中
connect() {
// 连接服务器
if (!window.WebSocket) return console.log(‘您的浏览器不支持 WebSocket’);

// this.ws = new WebSocket('ws://localhost:9998')

// 使用接口地址
this.ws = new WebSocket('ws://127.0.0.1:9998')

// 3.监听事件onopen onmessage onclose
// 连接成功的事件
this.ws.onopen = () => {
this.connected = true
this.connectRetryCount = 0
console.log(‘连接服务端成功了’);
}

// 接收到服务端数据
this.ws.onmessage = (msg) => {
  // 保存接收到的数据
  const recvData = JSON.parse(msg.data)
  // console.log('接收到数据：',recvData);
  // 取出业务模块类型
  const socketType = recvData.socketType
  // 判断回调函数是否存在
  if (this.callBackMapping[socketType]) {
    const action = recvData.action
    if (action === 'getData') {
      // 获取数据  realData真实数据
      const realData = JSON.parse(recvData.data)
      // console.log('真实数据：',realData);
      this.callBackMapping[socketType].call(this, realData)
    } else if (action === 'fullScreen') {
      // 全屏事件
      this.callBackMapping[socketType].call(this, recvData)
    } else if (action === 'themeChange') {
      // 主题切换
      this.callBackMapping[socketType].call(this, recvData)
    }
  }

}

// 连接服务端失败
this.ws.onerror = () => {
  this.connected = false
  console.log('连接服务端失败');
}

// 连接已关闭  当连接成功后:服务器关闭
this.ws.onclose = () => {
  this.connectRetryCount++
  this.connected = false
  console.log('连接已关闭');
  setTimeout(() => {
    this.connect()
  }, this.connectRetryCount * 500);
}

}
// 4.存储回调函数
/**

注册回调函数
@param {socketType} 业务模块类型
@param {*} callback
*/
registerCallBack(socketType, callback) {
this.callBackMapping[socketType] = callback
}

// 取消某一个回调函数
unRegisterCallBack(socketType) {
this.callBackMapping[socketType] = null
}

// 发送数据的方法
send(data) {
if (this.connected) {
this.sendRetryCount = 0
// 调用 webSocket 身上的send方法
// console.log(‘发送请求：’,data);
this.ws.send(JSON.stringify(data))
} else {// 发送不成功执行else里面的语句
this.sendRetryCount++
setTimeout(() => {
this.send(data)
}, this.sendRetryCount * 500);
}

}
}
// 有两个优化：1.断开重连的机制：服务器关闭之后，前端重复尝试连接，在 this.ws.onclose中。
// 2.重发数据的机制：可能来不及触发connect()方法就触发了send方法，导致导致页面刷新不出来，设置有了connect再调用send方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
将connect方法注册到main.js中,并将SocketService对象挂载到Vue的原型对象上

import SocketService from ‘@/utils/socket_service’
// 对服务器进行websocket的连接
SocketService.Instance.connect()
// 其他组件使用 this. $soc k e t V u e . p ro t o t y p e .$ socket = SocketService.Instance
1
2
3
4
5
回到vue具体的组件中进行调用
开启组件时，注册回调函数

created () {
// 在组件创建完成后进行回调函数的注册
this.$socket.registerCallBack(‘trendData’, this.getData)
},
1
2
3
4
组件关闭时，取消回调函数

destroyed () {
// 在组件销毁的时候进行回调函数的取消
this.$socket.unRegisterCallBack(‘trendData’)
},
1
2
3
4
原来获取数据的地方改为发送数据

// mounted中
mounted () {
this. $KaTeX parse error: Expected 'EOF', got '}' at position 121: \dotsue: '' }) }̲ // 把原来用http请求\dots$ http.get
// ret 就是服务端发送给客户端图标的数据
// const { data: ret } = await this.$http.get(‘trend’)
this.allData = ret// 对allData进行赋值
console.log(this.allData)
this.updataChart()
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
细节更新中…
若有问题，欢迎评论区交流！！！
————————————————
版权声明：本文为CSDN博主「sing__star」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_44774831/article/details/117001364

qq_33446686

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前后端项目中webSocket的使用

/ 2.重发数据的机制：可能来不及触发connect()方法就触发了send方法，导致导致页面刷新不出来，设置有了connect再调用send方法。原文链接：https://blog.csdn.net/qq_44774831/article/details/117001364。// 有两个优化：1.断开重连的机制：服务器关闭之后，前端重复尝试连接，在 this.ws.onclose中。// 定义连接服务器的方法，注意将此方法注册到main.js中。} else {// 发送不成功执行else里面的语句。
复制链接

扫一扫