/* 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. Leetcode题目49.字母异位词分组(中等)

    题目描述: 给定一个字符串数组,将字母异位词组合在一起.字母异位词指字母相同,但排列不同的字符串. 示例: 输入: ["eat", "tea", "t ...

  2. LeetCode 84. 柱状图中最大的矩形(Largest Rectangle in Histogram)

    题目描述 给定 n 个非负整数,用来表示柱状图中各个柱子的高度.每个柱子彼此相邻,且宽度为 1 . 求在该柱状图中,能够勾勒出来的矩形的最大面积. 以上是柱状图的示例,其中每个柱子的宽度为 1,给定的 ...

  3. DP&图论 DAY 7 上午

    DP&图论  DAY 7  上午 图论练习题 P2176 [USACO14FEB]路障Roadblock 先跑最短路(最多n条边,否则出环) 枚举每条边,加倍,再跑 dijkstra 取最大 ...

  4. Ansible批量自动化管理工具 roles标准化

    批量管理服务器的工具,无需部署代理,通过ssh进行管理,是python写的 ansible 常用模块 : (1)shell命令模块执行命令 (2)copy模块批量下发文件或文件夹 (3)script模 ...

  5. eclipse syso 自动补全设置方法

    eclipse syso 自动补全设置方法   转  https://blog.csdn.net/sinat_23536373/article/details/76512390   经常遇到打”sys ...

  6. 在matlab中读取trc文件

    用matlab的load()函数 1.相对路径读法(将文件放入'MATLAB\bin'目录): a = load('aizhenjiang_g10.trc') 2.绝对路径读法(任何位置) a = f ...

  7. python安装二进制k8s高可用 版本1.13.0

    一.所有安装包.脚本.脚本说明.下载链接:https://pan.baidu.com/s/1kHaesJJuMQ5cG-O_nvljtg 提取码:kkv6 二.脚本安装说明 1.脚本说明: 本实验为三 ...

  8. nginx配置静态资源关闭访问日志

    location ~ .*\.(css|js|gif|png|jpg|jpeg|bmp|swf)$ { root $root_path; access_log off; }

  9. Linux学习—yum命令(转载)

    yum简介 yum( Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器. 基於RPM包管理,能够从指定的服务器自动 ...

  10. What's binary search?

    Binary Search: Search a sorted array by repeatedly  dividing the search interval in half. Begin with ...