Vue | uni-app 中使用websocket

首先在根目錄下新建一個store文件夾，並新建一個websocket.js文件，代碼如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		socketTask: null,
		eventlist: {},
		unread: []
	},
	mutations: {
		WEBSOCKET_INIT(state, url) {
			// 創建一個this.socketTask對象【發送、接收、關閉socket都由這個對象操作】
			state.socketTask = uni.connectSocket({
				url,
				// 【非常重要】必須確保你的服務器是成功的,如果是手機測試千萬別使用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("收到服務器內容：" , JSON.parse(res.data));
					state.eventlist = JSON.parse(res.data)
					// state.unread.push(JSON.parse(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 store from './store/websocket.js'
Vue.prototype.$store = store

const app = new Vue({
	...App,
	store
})

在要使用的頁面：

首先引入，可通過 eventlist 獲取到服務端推送過來的數據

import { mapState } from 'vuex';

computed: {
	...mapState(['eventlist'])
}

創建鏈接

this.$store.dispatch('WEBSOCKET_INIT', 'websocket鏈接url')

注：（向服務端發送消息）

this.$store.dispatch('WEBSOCKET_SEND', 內容)

最后就大功告成了，工作時遇到了這個問題，就隨手封裝了一個，歡迎評論區指出不足