H5即时通讯Websocket
/**
* 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的更多相关文章
- layim即时通讯实例各功能整合
一.系统演示1.1 聊天窗体主界面演示 1.2 模拟两人在线聊天(点击图片查看演示视频) 1.3 在线演示> 在线演示,点击进入系统到这里,若是您想要的,接下来听我娓娓道来二.开发工具开发软件: ...
- [开源] .NETCore websocket 即时通讯组件---ImCore
前言 ImCore 是一款 .NETCore 下利用 WebSocket 实现的简易.高性能.集群即时通讯组件,支持点对点通讯.群聊通讯.上线下线事件消息等众多实用性功能. 开源地址:https:// ...
- [重磅开源] 比SingleR更适合的websocket 即时通讯组件---ImCore开源了
有感而发 为什么说 SignalR 不合适做 IM? IM 的特点必定是长连接,轮训的功能用不上. 因为它是双工通讯的设计,用hub.invoke发送命令给服务端处理业务,其他就和 ajax 差不多, ...
- Web端即时通讯技术盘点:短轮询、Comet、Websocket、SSE
1. 前言 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Serve ...
- 使用 HTML5 webSocket API实现即时通讯的功能
project下载地址:http://download.csdn.net/detail/wangshuxuncom/6430191 说明: 本project用于展示怎样使用 HTML5 webSock ...
- websocket做手机页面聊天与PC页面聊天一对一的即时通讯
当时要写这个需求的时候,很头痛,手机端页面的客服功能,相当于QQ这样一个一对一聊天室功能了,瞬间蒙蔽的我也不知道用什么去写这个东西,一开始用ajax,定时器去写,写着写着发现这尼玛不在同一个页面怎么做 ...
- java Activiti6 工作流引擎 websocket 即时聊天 SSM源码 支持手机即时通讯聊天
即时通讯:支持好友,群组,发图片.文件,消息声音提醒,离线消息,保留聊天记录 (即时聊天功能支持手机端,详情下面有截图) 工作流模块---------------------------------- ...
- java ssm 后台框架平台 项目源码 websocket 即时通讯 IM quartz springmvc
官网 http://www.fhadmin.org/D 集成安全权限框架shiro Shiro 是一个用 Java 语言实现的框架,通过一个简单易用的 API 提供身份验证和授权,更安全,更可靠E ...
- Android WebSocket实现即时通讯功能
最近做这个功能,分享一下.即时通讯(Instant Messaging)最重要的毫无疑问就是即时,不能有明显的延迟,要实现IM的功能其实并不难,目前有很多第三方,比如极光的JMessage,都比较容易 ...
随机推荐
- CentOS 7以上版本Nginx开机自启
Nginx+Center OS 7.x 开机启动设置 centos 7以上是用Systemd进行系统初始化的,Systemd 是 Linux 系统中最新的初始化系统(init),它主要的设计目标是克服 ...
- mysql服务里面没有启动项
解决:5.0版本:开始->运行->cmd,进到mysql安装的bin目录D:\MySQL\bin>mysqld.exe -installService successfully in ...
- ES系列七、ES-倒排索引详解
1.单词——文档矩阵 单词-文档矩阵是表达两者之间所具有的一种包含关系的概念模型,图3-1展示了其含义.图3-1的每列代表一个文档,每行代表一个单词,打对勾的位置代表包含关系. 图3-1 单词-文档矩 ...
- 自动化监控白皮书——WAS监控
WebSphere(WAS)是一些大型企业常用的中间件,由于was自身提供的工具有时不能满足多样化的监控需求,而我们又会经常遇到对was进行监控的应用场景,所以我们有必要自己动手做一些was的监控脚本 ...
- mysql的日志及利用mysqldump备份及还原
日志文件:6类 一般查询日志:log,general_log,log_output 慢查询日志: 错误日志 二进制日志 中继日志 ...
- svn使用小技巧
在使用svn的时候,往往导入到eclipse中,使用eclipse进行提交修改,但是当删除文件夹的时候,eclipse会发生冲突,不能够提交. 使用一种方式,将svn上的项目跟你eclipse对应项目 ...
- chart学习
效果图: 目录信息 graphic.jsp <%@ page language="java" contentType="text/html; charset=UTF ...
- 设置滚动条scrolltop
scrolltop用来设置页面的滚动条的位置 兼容性:链接 $().scrolltop(值)
- CPU密集型 VS IO密集型
CPU密集型 CPU密集型也叫计算密集型,指的是系统的硬盘.内存性能相对CPU要好很多,此时,系统运作大部分的状况是CPU Loading 100%,CPU要读/写I/O(硬盘/内存),I/O在很短的 ...
- Tesseract_ocr 字符识别基础及训练字库、合并字库
字符训练网上一搜一大堆,但作为一个初学者而言,字符合并网上却写的很笼统 首先,需要 生成的字符集.tif文件,位置文件 .box ,只要有这两个文件在,就可以合并字典(这个说的很有道理的样子) 好了, ...