2021-06-22 uni-app的webscoket的使用【vuex】

深碍√TFBOYSˉ_ 2022-10-09 00:36 122阅读 0赞

## uni-app的webscoket的使用 ##

store —》index.js

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    import Configuration from '@/config.js';
    const store = new Vuex.Store({ 
    			state: { 
    				socketTask: null,
    				timeoutObj: null,
    				reconnectCount: 0, //websocket连接次数，最大是3次
    				isConnectedSocket: false,
    				websocketUrl: 'ws://你的服务ip:9998/接口/', //websocket地址
    			},
    			mutations: { 
    				WEBSOCKET_INIT(state, url) { 
    					state.socketTask = uni.connectSocket({ 
    						url, // url是websocket连接ip
    						success() { 
    							state.isConnectedSocket = true;
    							console.log('websocket连接成功')
    						}
    					})
    					state.socketTask.onOpen((res) => { 
    						console.log('WebSocket连接正常打开中...！');
    						// 开启检测
    						state.timeoutObj = setTimeout(() => { 
    							//这里发送一个心跳，后端收到后，返回一个心跳消息，
    							//onmessage拿到返回的心跳就说明连接正常
    							console.log('ping');
    							state.socketTask.send({ 
    								data: "ping1----"
    							});
    						}, 5000)
    						// 注：只有连接正常打开中 ，才能正常收到消息
    						state.socketTask.onMessage(res => { 
    							clearTimeout(state.timeoutObj);
    							console.log(res)
    							console.log('收到服务器内容')
    						});
    					})
    					state.socketTask.onError((res) => { 
    						console.log('WebSocket连接打开失败，请检查！');
    					});
    				},
    				WEBSOCKET_SEND(state, data) { 
    					console.log("ws发送")
    					state.socketTask.send({ 
    						data: data,
    						async success() { 
    							console.log('消息发送成功')
    						},
    						fail: (res) => { 
    							console.log(res)
    						}
    					})
    				},
    				CLOSE_SOCKET(state) { 
    					if (!state.socketTask) return
    					state.socketTask.close({ 
    						success(res) { 
    							console.log('关闭成功', res)
    						},
    						fail(err) { 
    							console.log('关闭失败', err)
    						}
    					})
    					}
    				},
    				actions: { 
    					WEBSOCKET_INIT({ 
    						commit
    					}, url) { 
    						commit('WEBSOCKET_INIT', url)
    					},
    					WEBSOCKET_SEND({ 
    						commit
    					}, data) { 
    						commit('WEBSOCKET_SEND', data)
    					},
    					CLOSE_SOCKET({ 
    						commit
    					}) { 
    						commit('CLOSE_SOCKET')
    					}
    				}
    			})
    
    	export default store

使用：

this.$store.dispatch('WEBSOCKET_INIT', this.websocketUrl +入参)

优化分析：  
index.js

import Vue from 'vue'
    import Vuex from 'vuex'
    import state from './state.js'
    import mutation from './mutations.js'
    import action from './action.js'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({ 
    	state: state,
    	mutations:mutation,
    	actions: action
    })
    
    export default store

state.js

const state ={ 
    	socketTask: null,
    	timeoutObj: null,
    	reconnectCount: 0, //websocket连接次数，最大是3次
    	isConnectedSocket: false,
    	websocketUrl: 'ws://你的服务ip:9998/接口/', //websocket地址
    }

action.js

const action = { 
    	WEBSOCKET_INIT({ //连接
    	commit
    	}, url) { 
    		commit('WEBSOCKET_INIT', url)
    	},
    	WEBSOCKET_SEND({ //向服务器发送数据
    		commit
    	}, data) { 
    		commit('WEBSOCKET_SEND', data)
    	},
    	CLOSE_SOCKET({ //关闭连接
    		commit
    	}) { 
    		commit('CLOSE_SOCKET')
    	}
    }

mutations.js