IT评测·应用市场-qidao123.com技术社区

标题: websocket封装与利用 [打印本页]

---

作者: 鼠扑    时间: 2024-8-3 02:21
标题: websocket封装与利用
新建WebSocketService.js

1. export default class WebSocketService {
2.     constructor(url, getSocketMsg, sendSucc) {
3.         this.url = url;
4.         this.getSocketMsg = getSocketMsg;
5.         this.sendSucc = sendSucc; // 发送命令成功后的回调，可有可无
6.                
7.                
8.         this.socketTask = null;
9.         this.isOpenSocket = false;
10.         this.socketPrestore = {
11.             state: false,
12.             data: null
13.         };
14.     }
16.     connect() {
17.         this.socketTask = uni.connectSocket({
18.             url: this.url,
19.             success: ()=>{
20.                                 console.log('正在建立socket链接：', this.url);
21.                         },
22.         });
24.         this.socketTask.onOpen(() => {
25.                         console.log("WebSocket连接已发开...！");
26.             this.isOpenSocket = true;
27.                        
28.             if (this.socketPrestore.state) {
29.                 this.sendSocketData(this.socketPrestore.data);
30.                 this.socketPrestore.state = false;
31.             }
32.         });
34.         this.socketTask.onMessage((res)=>{
35.                         this.getSocketMsg(res)
36.                 });
37.         this.socketTask.onClose(() => {
38.             this.isOpenSocket = false;
39.         });
40.     };
41.         sendSocketData(data) {
42.             if (this.isOpenSocket) {
43.                 const sendData = JSON.stringify(data);
44.                         console.log("发送socket数据：", sendData);
45.                 this.socketTask.send({
46.                                 data: sendData,
47.                                 success: ()=>{
48.                                         console.log("socket消息发送成功");
49.                                         this.sendSucc && this.sendSucc()
50.                                 }
51.                         });
52.             } else {
53.                 this.socketPrestore.data = data;
54.                 this.socketPrestore.state = true;
55.                         this.connect(this.url)
56.             }
57.         };
58.     close() {
59.         if (this.isOpenSocket) {
60.             this.socketTask.close();
61.             this.isOpenSocket = false;
62.         }
63.     }
64. }

复制代码

关于socketPrestore 部门代码处理机制是根据我的业务添加的，防止发送命令的时间socket链接被服务主动断开做的机制处理，若不需要直接删除就行。
方法调用

1. <script>
2.         //引入websocket文件
3.         import WebSocketService from '@/utils/WebSocketService.js'
4.         export default {
5.                 data() {
6.                         return {
7.                                 socket: null,
8.                         }
9.                 },
10.                 mounted() {
11.                         const url = 'wss://.....'// socket地址
12.                         this.socket = new WebSocketService(url, this.receiveSocketData, this.sendSucc)
13.                 },
14.                 methods: {
15.                         receiveSocketData(res){
16.                                 console.log('接收到socket数据：', res);
17.                         },
18.                         sendSucc(){
19.                                 console.log('发送命令成功后的回调');
20.                         }
21.                 }
22.         }
23. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)

Powered by Discuz! X3.4