/* 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的更多相关文章

  1. 基于websocket vue 聊天demo 解决方案

    基于websocket vue 聊天demo 解决方案 demo 背景 电商后台管理的客服 相关技术 vuex axios vue websocket 聊天几种模型 一对一模型 一对一 消息只一个客户 ...

  2. Stompjs websocket vue

    公司项目要求要有消息提醒机制 , 多方面考虑用了ActiveMQ ,基本上现在主流的后台语言都没啥问题 , php phthon java nodejs , 等等都没问题 , 各位道友可以去查阅相关资 ...

  3. d面试题汇总

    HTML Doctype作用,HTML5 为什么只需要写<!DOCTYPE HTML>? html5有哪些新特性?移除了哪些元素? 简述一下你对HTML语义化的理解? 行内元素有哪些,块级 ...

  4. vue+websocket+express+mongodb实战项目(实时聊天)

    继上一个项目用vuejs仿网易云音乐(实现听歌以及搜索功能)后,发现上一个项目单纯用vue的model管理十分混乱,然后我去看了看vuex,打算做一个项目练练手,又不想做一个重复的项目,这次我就放弃颜 ...

  5. vue+websocket+express+mongodb实战项目(实时聊天)(二)

    原项目地址:[ vue+websocket+express+mongodb实战项目(实时聊天)(一)][http://blog.csdn.net/blueblueskyhua/article/deta ...

  6. vue项目使用websocket技术

    一.为什么需要websocket? 前端和后端的交互模式最常见的就是前端发数据请求,从后端拿到数据后展示到页面中.如果前端不做操作,后端不能主动向前端推送数据,这也是http协议的缺陷. 因此,一种新 ...

  7. vue + websocket 的使用

    阳光正好,我们正在努力前行. 一.引言 初始使用websocket ,一开始看文档的时候,觉得很简单,只需要创建websocket实例,然后有几个监听打开连接,监听关闭连接,监听连接异常等方法.但是, ...

  8. Vue+WebSocket 实现页面实时刷新长连接

    最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死... 与后台人员讨论过后决定使用h5新增的WebSoc ...

  9. Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏

    Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏 转载 来源:jrainlau 链接:https://segmentfault.com/a/1190000005804860 项 ...

随机推荐

  1. Linux dirname 和 basename

    [参考文章]:Linux shell - `dirname $0` 定位到运行脚本的相对位置 [参考文章]:Linux命令之basename使用 1. dirname $0 获取脚本文件所在的目录信息 ...

  2. ORA-12899 导入失败

    主要是目标数据库的字符集与导入文件的字符集不符 SQL>SHUTDOWN IMMEDIATE SQL>STARTUP MOUNT SQL>ALTER SYSTEM ENABLE RE ...

  3. C++ STL——模板

    目录 一 函数模板的特性 二 模板的实现机制 三 类模板 四 类模板如何派生子类 五 普通类的.h和.cpp文件分离 六 类模板在类内类外的实现 七 模板的应用实例 注:原创不易,转载请务必注明原作者 ...

  4. visible,invisible和GONE的区别

    在Android开发中,大部分控件都有visibility这个属性,其属性有3个分别为“visible ”.“invisible”.“gone”.主要用来设置控制控件的显示和隐藏.有些人可能会疑惑In ...

  5. UM概述

    历史 UML创始于1994年10月,主要创始人Grady Booch.Jim Rumbaugh和Ivar Jacobson. UML(Unified modeling language统一建模语言) ...

  6. Node Newbie Error – NPM Refusing to Install Package as a Dependency of Itself

    46 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_ ...

  7. Jmeter 时间函数

    1.参数值是日期,而日期是当前时间:用__time函数,生成任意格式时间 把生成的函数字符串直接复制粘贴即可使用 2.参数是昨天或者明天,即以当前时间为基准,增加或减少固定时间的,可以用__timeS ...

  8. jQuery上传文件显示进度条

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...

  9. 1、vinc = vict 胜、征服

  10. Pycharm 编辑器快捷键

    必备技能:IDEA一定要懂的32条快捷键 这些IntelliJ IDEA键盘快捷键可以让你专注于编写代码,让你的双手在键盘上起舞. 1,搜索文件名: ↑   Shift 快速连续按两下 2,显示便捷提 ...