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 项 ...
随机推荐
- centos7搭建hadoop-2.7.3,zookeeper-3.4.6,hbase-1.2.5(root用户)
环境:[centos7.hadoop-2.7.3.zookeeper-3.4.6.hbase-1.2.5] 两个节点:[主节点,主机名为Master,用户为root:从节点,主机名为Slave,用户为 ...
- ubuntu 17.04 添加用户到sudo组
最近在系统中安装了KVM和docker,用KVM的时候好好的,可以直接使用virsh等命令.但是安装了docker,使用docker命令时需要在前面加上sudo,这个用起来就挺麻烦的,于是想到dock ...
- Android ListView多布局
使用listview多布局会出现一点问题: 由于多个item布局给单一的item布局是不一样的,使用起来,contentview的复用会出现问题. 避免出现问题的有这几个方法: 1.重写 getVie ...
- POCO C++库笔记 【1.Foundation基础库的结构】
Foundation库是POCO的基础库,提供了一些C++编程中常用的功能的抽象封装,主要由以下这些部分组成: Core -- 这部分除了建立跨平台库的基础头文件外,最有意义的部分是分装了原子计数的 ...
- LC 216. Combination Sum III
Find all possible combinations of k numbers that add up to a number n, given that only numbers from ...
- webstrom配置node语法提示
一.mac下打开设置 二.输入node,找到node.js npm,勾选上对勾就好了. 第三.按住ctr,点击右键可以点进去就可以了.
- Python的并行求和例子
先上一个例子,这段代码是为了评估一个预测模型写的,详细评价说明在 https://www.kaggle.com/c/how-much-did-it-rain/details/evaluation, 它 ...
- Java SpringBoot React Redux
1.字符串转换相关 - React 前端JS部分 JSON.parse(JSON.stringify(copyRow)); 2.字符串分隔相关,弹出confirm确认框,显示换行信息 - React ...
- Windows添加启动项的两种方法
方案1直接将脚本放到启动文件夹里面 C:\Users\XXX\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup 方案2 Win ...
- *Scala API - 并发编程