/**
* Created by admin on 2017/8/19.
*/
// import Vue from 'vue'
// import axios from './HTTP.js'
// Vue.use(axios)
import * as DB from './DBDATA.js'
// import qs from 'qs'
const WebSocketMsg = function (_self, url) {
let obj = {}
obj.infoData = DB.INFO_DATA
obj.ws = null
obj.lockReconnect = false // 避免重复连接
// obj.wsUrl = 'ws://192.168.1.90:8080/service-jcj/websocket' // 通讯地址
obj.createWebSocket = function () { // 通讯开启事件
try {
obj.ws = new WebSocket(url)
obj.initEventHandle()
} catch (e) {
obj.reconnect(url)
}
} obj.initEventHandle = function () { // 通讯操作事件 开启 消息 关闭 错误
obj.ws.onclose = function () {
obj.reconnect(url) // 通讯重连
console.log('通讯关闭')
}
obj.ws.onerror = function () {
obj.reconnect(url) // 通讯重连
console.log('通讯错误')
}
obj.ws.onopen = function () {
// 心跳检测重置
obj.heartCheck.reset() // 心跳检测重置
obj.heartCheck.start() // 心跳检测开启
console.log('通讯开启')
}
obj.ws.onmessage = function (event) {
// 如果获取到消息,心跳检测重置
// 拿到任何消息都说明当前连接是正常的
obj.heartCheck.reset() // 心跳检测重置
obj.heartCheck.start() // 心跳检测开启
console.log('通讯消息')
console.log(event)
}
}
obj.reconnect = function () { // 通讯重连
if (obj.lockReconnect) { // 如果为真 结束事件 为假 执行后续事件
return
}
obj.lockReconnect = true
// 没连接上会一直重连,设置延迟避免请求过多
setTimeout(function () {
obj.createWebSocket(url) // 新开启通讯
obj.lockReconnect = false
}, 2000)
}
// 心跳检测
obj.heartCheck = {
timeout: 6000, // 60秒
timeoutObj: null,
serverTimeoutObj: null,
reset: function () {
clearTimeout(this.timeoutObj)
clearTimeout(this.serverTimeoutObj)
return this
},
start: function () {
let that = this
that.timeoutObj = setTimeout(function () {
// 这里发送一个心跳,后端收到后,返回一个心跳消息,
// onmessage拿到返回的心跳就说明连接正常
obj.ws.send('@') // 向后端发送消息 如果后端接收 则重置心跳
that.serverTimeoutObj = setTimeout(function () { // 如果超过一定时间还没重置,说明后端主动断开了
obj.ws.close() // 如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
}, that.timeout)
}, that.timeout)
}
}
return obj
}
export default WebSocketMsg

H5即时通讯Websocket的更多相关文章

  1. layim即时通讯实例各功能整合

    一.系统演示1.1 聊天窗体主界面演示 1.2 模拟两人在线聊天(点击图片查看演示视频) 1.3 在线演示> 在线演示,点击进入系统到这里,若是您想要的,接下来听我娓娓道来二.开发工具开发软件: ...

  2. [开源] .NETCore websocket 即时通讯组件---ImCore

    前言 ImCore 是一款 .NETCore 下利用 WebSocket 实现的简易.高性能.集群即时通讯组件,支持点对点通讯.群聊通讯.上线下线事件消息等众多实用性功能. 开源地址:https:// ...

  3. [重磅开源] 比SingleR更适合的websocket 即时通讯组件---ImCore开源了

    有感而发 为什么说 SignalR 不合适做 IM? IM 的特点必定是长连接,轮训的功能用不上. 因为它是双工通讯的设计,用hub.invoke发送命令给服务端处理业务,其他就和 ajax 差不多, ...

  4. Web端即时通讯技术盘点:短轮询、Comet、Websocket、SSE

    1. 前言 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Serve ...

  5. 使用 HTML5 webSocket API实现即时通讯的功能

    project下载地址:http://download.csdn.net/detail/wangshuxuncom/6430191 说明: 本project用于展示怎样使用 HTML5 webSock ...

  6. websocket做手机页面聊天与PC页面聊天一对一的即时通讯

    当时要写这个需求的时候,很头痛,手机端页面的客服功能,相当于QQ这样一个一对一聊天室功能了,瞬间蒙蔽的我也不知道用什么去写这个东西,一开始用ajax,定时器去写,写着写着发现这尼玛不在同一个页面怎么做 ...

  7. java Activiti6 工作流引擎 websocket 即时聊天 SSM源码 支持手机即时通讯聊天

    即时通讯:支持好友,群组,发图片.文件,消息声音提醒,离线消息,保留聊天记录 (即时聊天功能支持手机端,详情下面有截图) 工作流模块---------------------------------- ...

  8. java ssm 后台框架平台 项目源码 websocket 即时通讯 IM quartz springmvc

    官网 http://www.fhadmin.org/D 集成安全权限框架shiro  Shiro 是一个用 Java 语言实现的框架,通过一个简单易用的 API 提供身份验证和授权,更安全,更可靠E ...

  9. Android WebSocket实现即时通讯功能

    最近做这个功能,分享一下.即时通讯(Instant Messaging)最重要的毫无疑问就是即时,不能有明显的延迟,要实现IM的功能其实并不难,目前有很多第三方,比如极光的JMessage,都比较容易 ...

随机推荐

  1. jquery选择器最后一个,倒数第二个元素

    <div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> < ...

  2. mysql逗逼的.frm文件恢复数据库

    mysql数据库用.frm文件进行恢复. 背景:mac系统  .frm文件 (1)打开终端:输入cd /usr/local  回车. (2)输入 ls 回车. 这时候 打开finder ---> ...

  3. 解决xadmin登录卡顿延迟的问题

    我的django项目引入xadmin作为后台,之前登录一直很快,今天突然怎么也登录不了. 怀疑是xadmin请求了网络资源,当我断网再次登录,果然进去了. 然后在xadmin文件夹右键-find in ...

  4. 基于Python的机器学习实战:Apriori

    目录: 1.关联分析 2. Apriori 原理 3. 使用 Apriori 算法来发现频繁集 4.从频繁集中挖掘关联规则 5. 总结 1.关联分析  返回目录 关联分析是一种在大规模数据集中寻找有趣 ...

  5. ROC,AUC,PR,AP介绍及python绘制

    这里介绍一下如题所述的四个概念以及相应的使用python绘制曲线: 参考博客:http://kubicode.me/2016/09/19/Machine%20Learning/AUC-Calculat ...

  6. oracle 远程导入导出(本地win)

    导出 exp hongtastock_account/hongtastock_account@192.168.1.22/orcl file=D:\hongta\hongtastock_account. ...

  7. 『转载』hadoop2.x常用端口、定义方法及默认端口

    『转载』hadoop2.x常用端口.定义方法及默认端口 1.问题导读 DataNode的http服务的端口.ipc服务的端口分别是哪个? NameNode的http服务的端口.ipc服务的端口分别是哪 ...

  8. saltstack自动化运维系列⑥SaltStack实践安装配置HAproxy

    saltstack自动化运维系列⑥SaltStack实践安装配置HAproxy 下载haproxy1.6.2.tar.gz下载地址:http://www.haproxy.org/download/1. ...

  9. js动态添加未知新属性

    1 前言 由于项目需要,需要实现获取服务器不同网卡扫局域网中的某种类型设备,然而不同服务器的网卡个数是不相同的,从而需要动态增加未知属性来统计不同网卡扫到的设备个数. 2 代码 function ni ...

  10. 中文多分类 BERT

    直接把自己的工作文档导入的,由于是在外企工作,所以都是英文写的 Steps: git clone https://github.com/google-research/bert prepare dat ...