pp-yang

@

目录

    首先在根目录下新建一个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', 内容)
    

    最后就大功告成了,工作时遇到了这个问题,就随手封装了一个,欢迎评论区指出不足

    分类:

    技术点:

    Vue

    相关文章:

    猜你喜欢