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', 内容)
最后就大功告成了,工作时遇到了这个问题,就随手封装了一个,欢迎评论区指出不足
Vue | uni-app 中使用websocket的更多相关文章
- uni app中使用自定义图标库
项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...
- uni app中关于图片的分包加载
因为在项目中使用了大量的静态资源图片,使得主包体积过大, 而把这些图片全部放到服务器又有点麻烦,就想能不能把图片也分包,但是直接放在分包下的话导致图片资源找不到了, 在社区中看到大佬分享的十分有用,特 ...
- VUE项目开发中使用WebSocket
初始化WebSocket initWebSocket(){ //初始化weosocket const wsuri = 'ws://10.100.45.8:8888/websocket';//ws地址 ...
- fiddler 手机 https 抓包 以及一些fiddler无法解决的https问题http2、tcp、udp、websocket证书写死在app中无法抓包
原文: https://blog.csdn.net/wangjun5159/article/details/52202059 fiddler手机抓包原理 fiddler手机抓包的原理与抓pc上的web ...
- 如何在嵌套的app中运用vue去写单页面H5
本文主要介绍移动端.为了避免移动端兼容出现各种奇奇怪怪的bug,所以秉承着能不用复杂的语法就不用,尽量用最基础的语法. 可用惯了各种ES6语法的童鞋们,写原生真是头疼,再加上各种领导催工期,肯定是内心 ...
- 使用VS2017开发APP中使用VUE.js开发遇到打包出来的android文件 在低版本的android(4.3)中无法正常使用
使用VS2017开发VUE的APP应用遇到的问题集合 1, 打包出来的apk文件在Android 6.0版本以上手机可以正常打开,在Android 4.3版本手机上无法打开 原因:一开始猜测是不是V ...
- app中rem算法
第一次用vue做APP被rem坑惨了 下面贴出 rem 的算法及使用方法 在自定义js中定义函数 export default { install: function(Vue, options) { ...
- Vue.js2.0中的变化(持续更新中)
最近自己在学习Vue.js,在看一些课程的时候可能Vue更新太块了导致课程所讲知识和现在Vue的版本不符,从而报错,我会在以后的帖子持续更新Vue的变化与更新,大家也可以一起交流,共同监督学习! 1. ...
- Vue实例学习过程中碰到的小问题
在使用插值表达式{{ }}取data中list数组中的值时把整个表达式当做文本显示了,原因不明,但是使用v-text替换插值表达式之后问题得到解决. 原因已经查明,因为第78行,定义对象car时后面 ...
- Vue使用过程中常见问题
目录 一.vue监听不到state数组/json对象内的元素的值的变化,要手动通知触发 二.vue用splice删除多维数组元素导致视图更新失败情况 三.vue项目如何部署到php或者java环境的服 ...
随机推荐
- Devexpress gridcontrol设置列样式
<dxg:GridControl.Columns><dxg:GridColumn Header="排名" FieldName="UserRank&quo ...
- 手把手教你如何玩转消息中间件(ActiveMQ)
手把手教你如何玩转消息中间件(ActiveMQ) 2018年07月15日 18:07:39 Cs_hnu_scw 阅读数 12270 标签: 中间件消息中间件ActiveMQ分布式集群 更多 个人分类 ...
- Dart简易教程 (1)---数据类型 运算符,类转换换
从下面开始学习DART编程 以下是一个简单的示例: main(){ var number = 42; print(number);}程序说明,dart是一个强大的脚本类语言,可以不预先定义变量类型 , ...
- DFS模板
DFS模板 题型分类:我们可以将DFS题分为两大类: 1 . 地图型:这种题型将地图输入,要求完成一定的任务.因为地图的存在.使得题意清楚形象化,容易理清搜索思路.AOJ 869-迷宫(遍历地图,四向 ...
- Django学习day06随堂笔记
每日测验 """ 今日考题 1.什么是FBV与CBV,能不能试着解释一下CBV的运作原理 2.模版语法的传值需要注意什么,常见过滤器及标签有哪些 3.自定义过滤器,标签, ...
- 整理STC延时函数时遇到的玄学问题
void Delay { unsigned char i, j; i = 11; j = 190; do { while (--j); } while (--i); } void Delay { un ...
- Java基础系列(21)- dowhile循环
do-while循环 对于while语句而言,如果不满足条件,则不能进入循环.但有时候我们需要即使不满足条件,也至少执行一次 do-while循环和while循环相似,不同的是,do-while循环至 ...
- jmeter之图形结果
jmeter监听器中的图形报表如何分析,反正第一次看到图时,不觉明厉害. 样本数目:是总共发送到服务器的请求数. 最新样本:是代表时间的数字,是服务器响应最后一个请求的时间. 吞吐量:是服务器每分钟处 ...
- python学习笔记(十三)-python对Excel进行读写修改操作
日常工作中会遇到Excel的读写问题.我们可以使用xlwt 模块将数据写入Excel表格,使用xlrd 模块从Excel读取数据,使用xlutils模块和xlrd模块结合对Excel数据进行修改.下面 ...
- django中admin一些方法
1.概述:内容发布,负责添加,修改,删除内容及公告访问2.配置admin应用在settings文件中INSTALLED_APPS添加:'django.contrib.admin', 默认是已经添加好的 ...