/**
* 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. TIdHTTP get参数带中文解决方法--请求报文

    Post 看起来稍微复杂先,暂不讨论.post 目前按照一般方法有中文名也可以. 拼接时:pointname=九记餐厅&begintime=2017-03-01 00:00:00& 有 ...

  2. JobService相关

    1.在构建JobInfo时,如果设置setPersisted(true),则需要应用申请RECEIVE_BOOT_COMPLETED权限. 这个权限只需要在应用首次安装时被授予,后面覆盖安装时便会默认 ...

  3. 在使用NSArray打印的时候如果遇到中文字符那么会打印出来编码。

    在使用NSArray打印的时候如果遇到中文字符那么会打印出来编码,如下代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any addition ...

  4. Linux文件系统1---概述

      1.引言 本文所述关于文件管理的系列文章主要是对陈莉君老师所讲述的文件系统管理知识讲座的整理.Linux可以支持不同的文件系统,它源于unix文件系统,也是unix文件系统的一大特色. 本文主要先 ...

  5. Oracle把逗号分割的字符串转换为可放入in的条件语句的字符数列

    Oracle把逗号分割的字符串转换为可放入in的条件语句的字符数列   前台传来的字符串:'589,321' SELECT*FROM TAB_A T1 WHERE  T1.CODE  IN ( SEL ...

  6. Python3学习笔记24-操作文件和目录

    环境变量 在操作系统中定义的环境变量,全部保存在os.environ这个变量中,可以直接查看: import os print(os.environ) 操作文件和目录 操作文件和目录的函数一部分放在o ...

  7. Python3学习笔记21-实例属性和类属性

    由于Python是动态语言,根据类创建的实例可以任意绑定属性. 给实例绑定属性的方法是通过实例变量,或者通过self变量: class Student(object): def __init__(se ...

  8. eclipse自动编译

    自动编译:对java应用没有什么意义,对web应用来说,当修改了代码时,会自动帮你编译并发布到web容器中去,省的重启web容器了. build:编译,Eclipse的编译是基于时间戳的判断机制的.c ...

  9. oracle ip 改为 机器名

    1 hosts文件 添加                   ip  机器名   这一行 2 修改listner.ora 和tnsora.ora ip改为机器名 3 重启服务

  10. centos6 -> zabbix2.2升级3.0.5教程

    当然系统版本centos6 清除之前的zabbix的yum源缓存 yum clean all 更换新版本的zabbix的yum源 rpm -qa|grep zabbix rpm -e zabbix-r ...