/**
* 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. Kali2.0更新

    下载链接:猛戳这里 更新以后速度与界面友好性提高了! 界面仿造了ubuntu和fedora,应用也有很多小图标!这个对个人来说比较赞 安装以后的几件事 1.安装vmtools,方法跟1.0一样! ta ...

  2. dataTable插件锁表头和锁列的教程

    源代码下载 我的同事让我帮忙给弄个锁头锁列的插件.结果找到大名鼎鼎的jquery dataTable插件. 今天我们来介绍不常用的功能:dataTable插件锁表头和锁前两列 由于是移动前端.我们不考 ...

  3. 腾讯云外网IP直通后,遇到网络问题

    通过内网机器,先重启网卡 service network restart cd /usr/local/etc ./modify_route.sh

  4. CONFIG_DEBUG_USER【转】

    转自:https://blog.csdn.net/adaptiver/article/details/12778621 关于CONFIG_DEBUG_USER 把menuconfig中查到的 CONF ...

  5. eclipse中运行项目出现空白错误提示解决办法

    别人所给出的解决办法:https://blog.csdn.net/fzdg2019/article/details/79384539 两个办法: 方法一:配置环境变量 方法二:修改eclipse安装目 ...

  6. [转]VS2015 Git 源码管理工具简单入门

    VS2015 Git 源码管理工具简单入门   1.VS Git插件 1.1 环境 VS2015+GitLab 1.2 Git操作过程图解 1.3 常见名词解释 拉取(Pull):将远程版本库合并到本 ...

  7. Github简介

    先附上下载地址 http://windows.github.com/ git-scm.com是版本控制软件Git的官方网站. Git和GitHub的区别 Git是一个分布式的版本控制系统,与SVN类似 ...

  8. HTTP基础知识1

    HTTP 简介 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准,它是基于TCP/IP ...

  9. DNS详解: A记录,子域名,CNAME别名,PTR,MX,TXT,SRV,TTL

    DNS DNS,Domain Name System或者Domain Name Service(域名系统或者域名服务).域名系统为Internet上的主机分配域名地址和IP地址.由于网络中的计算机都必 ...

  10. Oracle基本命令大全

    用户: scott/tiger sys as sysdba 空密码 转换用户登录: connect 用户/密码 connect sys as sysdba   权限 用户解锁: alter user ...