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

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

const 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)
		}
	})
	}
}