uni-app 全局引入websocket方法

最新推荐文章于 2024-08-05 00:26:01 发布

summer _q

最新推荐文章于 2024-08-05 00:26:01 发布

阅读量5.2k

点赞数 1

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44237840/article/details/109648438

版权

本文介绍了如何在uni-app项目中实现全局的WebSocket连接。通过在根目录创建`websocket.js`文件，并在`main.js`中引入并注册到Vuex，实现了项目启动即连接WebSocket。在页面中可以方便地调用`$websocket.dispatch`来发送消息。

摘要由CSDN通过智能技术生成

在做项目时候，一开始引入websocket是在对应的页面进行引入，后来是在项目中需要在全局中定义websocket，项目启动后直接websocket连接，之后我在根目录新建了一个store，里边创建一个websocket.js文件

代码如下：
websocket.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("收到服务器内容："