/**
* 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. 【Python】【辅助程序】练手小程序:记录外网动态IP地址

    练手小程序 程序作用:对IP实时记录: 1.定时获取外网IP,存储在本地文件中: 编写思路: 1)收集获取外网的API接口       http://bbs.125.la/thread-1383897 ...

  2. 【逆向工具】使用x64dbg+spy去除WinRAR5.40(64位)广告弹框

    1 学习目标 WinRAR5.40(64位)的弹框广告去除,由于我的系统为x64版本,所以安装了WinRAR(x64)版本. OD无法调试64位的程序,可以让我熟悉x64dbg进行调试的界面. 其次是 ...

  3. python内置模块之collections(六)

    前言 collections是Python内建的一个集合模块,提供了许多有用的集合类. 系列文章 python模块分析之random(一) python模块分析之hashlib加密(二) python ...

  4. c或c++的网络库

    Asio C++ Library: Asio is a cross-platform C++ library for network and low-level I/O programming tha ...

  5. C#使用RabbitMQ

    1. 说明 在企业应用系统领域,会面对不同系统之间的通信.集成与整合,尤其当面临异构系统时,这种分布式的调用与通信变得越发重要.其次,系统中一般会有很多对实时性要求不高的但是执行起来比较较耗时的地方, ...

  6. [Java]求文件大小并保留两位小数(文件大小是一个长整型数单位是Byte)

    前言 为了获得一堆apk的大小,并与人类友好方式显示.本来是打算用以下方法,到时不能具体到保留两位小数. org.apache.commons.io.FileUtils.byteCountToDisp ...

  7. js 数组、对象转json 以及json转 数组、对象

    1.JS对象转JSON 方式:JSON.stringify(obj) var json = {"name":"iphone","price" ...

  8. 使用Springboot快速搭建SSM框架

    Spring Boot设计目的是用来简化Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置. 一.环境准备 Idea 2017 或 201 ...

  9. LeetCode(51):N皇后

    Hard! 题目描述: n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上,并且使皇后彼此之间不能相互攻击. 上图为 8 皇后问题的一种解法. 给定一个整数 n,返回所有不同的 n 皇后问 ...

  10. NOI 2012 随机数生成器

    看到全是矩阵的题解,我来一发递推+分治 其实这题一半和poj1845很像(或是1875?一个叫Sumdiv的题) 言归正传,我们看看怎么由f(0)推出f(n) 我们发现,题目中给出了f(n)=af(n ...