H5即时通讯Websocket
2018-06-24 01:19:58来源:未知 阅读 ()
/** * 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
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 前端笔记之微信小程序(四)WebSocket&Socket.io&am 2019-08-14
- 短连接、长连接、轮询、长轮询、WebSocket 2019-01-03
- node.js中http通讯模块 2018-09-18
- WebWorker与WebSocket实现前端消息总线 2018-08-10
- angular使用 websocket,少点套路,多一点真诚 2018-07-27
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash