uni-app 全局websocket 链接简易

深藏阁楼爱情的钟 2023-06-24 12:21 7阅读 0赞

websocketStore.js

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({ 
    	state: { 
    		socketTask: null,
    		eventlist: []
    	},
    	mutations: { 
    		WEBSOCKET_INIT(state, url) { 
    			// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
    			state.socketTask = uni.connectSocket({ 
    				url: "xxxxxxx",
    				// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
    				success(data) { 
    					console.log("websocket连接成功");
    				},
    			});
    
    			// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
    			state.socketTask.onOpen((res) => { 
    				console.log("WebSocket连接正常打开中...！");
    				state.is_open_socket = true;
    				// 注：只有连接正常打开中 ，才能正常收到消息
    				state.socketTask.onMessage((res) => { 
    					console.log("收到服务器内容：" + res.data);
    				});
    			})
    		},
    		WEBSOCKET_SEND(state, p) { 
    			console.log("ws发送！");
    			state.socketTask.send({ 
    				data: p,
    				async success() { 
    					console.log("消息发送成功");
    				},
    			});
    		},
    	},
    
    
    	actions: { 
    		WEBSOCKET_INIT({ 
    			commit
    		}, url) { 
    			commit('WEBSOCKET_INIT', url)
    		},
    		WEBSOCKET_SEND({ 
    			commit
    		}, p) { 
    			commit('WEBSOCKET_SEND', p)
    		}
    	}
    })

在main.js中加入

import websocket from './common/websocketStore.js'

以上即可完成全局websocket的链接

如果想要初始化 websocket 只需要触发

this.$websocket.dispatch('WEBSOCKET_INIT', "ws://47.107.91.27:9500/ws");

发送消息

var jsonData = "sos:aaa";
    this.$websocket.dispatch("WEBSOCKET_SEND", jsonData);

考虑到简单，一些心跳没加