websocket vue
/* eslint-disable */
let tt;
let count = 1;
let lockReconnect = false;
function isJsonString(str) {
try {
if (typeof JSON.parse(str) === "object") {
return true;
}
} catch (e) { }
return false;
} function reconnect(dispatch) {
if (lockReconnect || count > 5) {
return;
}
lockReconnect = true;
count = count + 1;
tt && clearTimeout(tt);
tt = setTimeout(() => {
dispatch("createWebSocket");
lockReconnect = false;
}, Math.pow(2, count) * 1000);
} export default {
namespaced: true,
state: {
socket: {
isConnected: false,
message: "",
count: 0,
lockReconnect: false,
reconnectError: false
},
websocket: null
},
getters: {
message: state => state.socket.message,
isConnected: state => state.socket.isConnected
},
actions: {
createWebSocket({ state, commit, dispatch }) {
if ("WebSocket" in window) {
state.websocket = new WebSocket(process.env.VUE_MESSAGE_WEBSOCKET);
} else if ("MozWebSocket" in window) {
state.websocket = new MozWebSocket(process.env.VUE_MESSAGE_WEBSOCKET); // eslint-disable-line
} else {
state.websocket = new SockJS(process.env.VUE_MESSAGE_WEBSOCKET); // eslint-disable-line
}
state.websocket.onclose = () => {
reconnect(dispatch);
};
state.websocket.onerror = () => {
reconnect(dispatch);
};
state.websocket.onopen = () => {
count = 1;
commit("SOCKET_CONNECTED", true);
setInterval(() => state.websocket.send("ping"), 30000);
};
state.websocket.onmessage = event => {
if (isJsonString(event.data)) {
commit("SOCKET_MESSAGE", event.data);
}
};
},
sendMessage({ state }, message) {
return new Promise((resolve) => {
state.websocket.send(JSON.stringify(message))
resolve()
})
}
},
mutations: {
SOCKET_CONNECTED(state, isConnected) {
state.socket = {
...state.socket,
isConnected
};
},
SOCKET_MESSAGE(state, message) {
state.socket = {
...state.socket,
message
};
}
}
};
websocket vue的更多相关文章
- 基于websocket vue 聊天demo 解决方案
基于websocket vue 聊天demo 解决方案 demo 背景 电商后台管理的客服 相关技术 vuex axios vue websocket 聊天几种模型 一对一模型 一对一 消息只一个客户 ...
- Stompjs websocket vue
公司项目要求要有消息提醒机制 , 多方面考虑用了ActiveMQ ,基本上现在主流的后台语言都没啥问题 , php phthon java nodejs , 等等都没问题 , 各位道友可以去查阅相关资 ...
- d面试题汇总
HTML Doctype作用,HTML5 为什么只需要写<!DOCTYPE HTML>? html5有哪些新特性?移除了哪些元素? 简述一下你对HTML语义化的理解? 行内元素有哪些,块级 ...
- vue+websocket+express+mongodb实战项目(实时聊天)
继上一个项目用vuejs仿网易云音乐(实现听歌以及搜索功能)后,发现上一个项目单纯用vue的model管理十分混乱,然后我去看了看vuex,打算做一个项目练练手,又不想做一个重复的项目,这次我就放弃颜 ...
- vue+websocket+express+mongodb实战项目(实时聊天)(二)
原项目地址:[ vue+websocket+express+mongodb实战项目(实时聊天)(一)][http://blog.csdn.net/blueblueskyhua/article/deta ...
- vue项目使用websocket技术
一.为什么需要websocket? 前端和后端的交互模式最常见的就是前端发数据请求,从后端拿到数据后展示到页面中.如果前端不做操作,后端不能主动向前端推送数据,这也是http协议的缺陷. 因此,一种新 ...
- vue + websocket 的使用
阳光正好,我们正在努力前行. 一.引言 初始使用websocket ,一开始看文档的时候,觉得很简单,只需要创建websocket实例,然后有几个监听打开连接,监听关闭连接,监听连接异常等方法.但是, ...
- Vue+WebSocket 实现页面实时刷新长连接
最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死... 与后台人员讨论过后决定使用h5新增的WebSoc ...
- Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏
Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏 转载 来源:jrainlau 链接:https://segmentfault.com/a/1190000005804860 项 ...
随机推荐
- iReport 3.7.6 jasperreport 生成PDF汉字不显示问题的解决
1.下载iTextAsian.jar 下载地址:https://www.oschina.net/action/code/download?code=51668&id=75706 2.在Irep ...
- Nginx之进程间的通信机制(信号、信号量、文件锁)
1. 信号 Nginx 在管理 master 进程和 worker 进程时大量使用了信号.Linux 定义的前 31 个信号是最常用的,Nginx 则通过重定义其中一些信号的处理方法来使用吸纳后,如接 ...
- legend3---12、DB::table('user_questions')和UserQuestion查询的结果的格式不一样
legend3---12.DB::table('user_questions')和UserQuestion查询的结果的格式不一样 一.总结 一句话总结: 推荐使用模型查找的方式,可以直接数组方式访问: ...
- Python接口测试-利用登录后的session用到登录后的接口中
有些接口是在登录后才能调用的,例如“立即出借”只有在登录后才能到出借窗口,解决: 主要是添加了: s =requests.session() 完整代码: '''登录 ''' print('*'*100 ...
- mongodb 安装配置及简单使用
步骤一: 下载网址:https://www.mongodb.com/download-center/community 根据自己的环境下载 步骤二: 安装过程只需要默认即可,需要注意的是连接工具“mo ...
- Java中<? extends T>和<? super T>的理解
? 通配符类型 - <? extends T> 表示类型的上界,表示参数化类型的可能是T 或是 T的子类; <? super T> 表示类型下界(Java Core中叫超类型限 ...
- ajax设置头信息,读取头信息
一.设置头信息 jQuery function GetDateForServiceCustomer(userId) { $.ajax({ url: 'http://*******/api/orders ...
- 解决WPF程序中ListBox ItemsSource变化时不重置ScrollBar的问题
解决WPF程序中ListBox ItemsSource变化时不重置ScrollBar的问题 当我们改变ListBox的ItemsSource时,会发现这样一个问题:数据源变化时,虽然控件中的内容会跟着 ...
- jQuery,javascript获得网页的高度和宽度【收藏】
网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offset ...
- 20190722 - Windows 下使用 move 命令和通配符移动多个文件
这是个标题党,实际上 move 命令无法移动通配符匹配的多个文件 比如,我有四个文件: c:\a\a1.txt c:\a\a2.txt c:\a\b1.txt c:\a\b2.txt 想移动后两个文件 ...