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 项 ...
随机推荐
- Leetcode题目198.打家劫舍(动态规划-简单)
题目描述: 你是一个专业的小偷,计划偷窃沿街的房屋.每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警. 给 ...
- PHP-生产随机验证码图片
// <span style="white-space:pre"> </span>//因为要把产生的验证码保存到session中,此处为session开始 ...
- 移动端页面字体——rem的使用
浏览器的默认字体高是16px. 兼容性: 目前,IE9+,Firefox.Chrome.Safari.Opera 的主流版本都支持了rem. 对于不支持的浏览器,要多写一个绝对单位的声明,这样浏览器就 ...
- pytorch-VGG网络
VGG网络结构 第一层: 3x3x3x64, 步长为1, padding=1 第二层: 3x3x64x64, 步长为1, padding=1 第三层: 3x3x64x128, 步长为1, paddin ...
- P2602 [ZJOI2010]数字计数&P1239 计数器&P4999 烦人的数学作业
P2602 [ZJOI2010]数字计数 题解 DFS 恶心的数位DP 对于这道题,我们可以一个数字一个数字的求 也就是分别统计区间 [ L , R ] 内部数字 i 出现的次数 (0<=i&l ...
- Android跨进程通信AIDL服务
服务(Service)是android系统中非常重要的组件.Service可以脱离应用程序运行.也就是说,应用程序只起到一个启动Service的作用.一但Service被启动,就算应用程序关闭,Ser ...
- goroutine 调度算法
自从开始使用 Go 语言,到现在也有一年多了,虽不算精通,但也算小有理解.在这里简单记录一下我的心得(其实是学习别人的心得) goroutine,Go 语言中 cpu 运行的最小单元,与 lua 携程 ...
- CentOS8 使用 aliyun 阿里云 镜像站点的方法
CentOS8现已可使用国内的aliyun阿里云镜像站,方法如下: 用cd命令切换到yum.repos目录,备份原始的3个repo文件:cd /etc/yum.repos.d/sudo cp Cent ...
- express服务端
1. 使用 Node.js + Express 开发服务端 2. 使用 Node.js + Express+MySQL 实现简单的增删改查 3. 初识NodeJS服务端开发(Express+MySQL ...
- 分类并查集[noi2001 食物链]
题目链接:http://cogs.pro:8081/cogs/problem/problem.php?pid=pxNJzxVPU 题目有三种动物,A吃B,B吃C,C吃A 即B是A的食物,A是B的天敌, ...