js websocket代码

/*** 使用方法 import Socket from './websocket/ws'* this.wbSocket = new Socket(options)* this.wbSocket.onmessage((data) => {})
*/import { Heart } from './heart.js'
import $config from '@/config';export default class Socket extends Heart {constructor(ops) {super()this.RECONNECT_TIMER = null // 重连计时器this.RECONNECT_COUNT = 10 // 变量保存，防止丢失this.OPTIONS = {url: null, // 链接地址heartTime: 5000, // 心跳时间间隔heartMsg: 'ping', // 心跳信息，默认是‘ping’isReconnect: true, // 是否自动重连isRestory: true, // 是否销毁reconnectTime: 5000, // 重连时间间隔reconnectCount: 5, // 重连次数， -1则不限制openCb: null, // 链接成功回调closeCb: null, // 关闭的回调messageCb: null, // 消息的回调errorCb: null // 错误的回调}Object.assign(this.OPTIONS, ops)this.create()}// 建立链接create() {window.WebSocket = window.WebSocket || window.MozWebSocket;if(!window.WebSocket) {new Error('当前浏览器不支持，无法使用')return;}if(!this.OPTIONS.url){new Error('链接地址不存在，无法建立ws通道')}delete this.wsthis.ws = new WebSocket(`ws://${$config.WS_API()}${this.OPTIONS.url}`)this.onopen()this.onclose()this.onmessage()}// open事件/*** 自定义链接成功事件* 如果callback存在，调callback，不存在调用OPTIONS中的回调* @param {Function} callback*/onopen (callback) {this.ws.onopen = () => {clearTimeout(this.RECONNECT_TIMER) // 清除重连定时器this.OPTIONS.reconnectCount = this.RECONNECT_COUNT // 计时器重置// 建立心跳机制super.reset().start(() => {this.send(this.OPTIONS.heartMsg)})if (typeof callback === 'function') {callback(event)} else {( typeof this.OPTIONS.openCb === 'function' ) && this.OPTIONS.openCb(event)}}}/*** 自定义关闭事件* 如果callback存在，调callback，不存在调用OPTIONS中的回调* @param {Function} callback*/onclose (callback) {this.ws.onclose = (event) => {super.reset()!this.OPTIONS.isRestory && this.onreconnect() // 如果不是正常销毁的通道，就立即重连if (typeof callback == 'function') {callback(event)} else {( typeof this.OPTIONS.openCb === 'function' ) && this.OPTIONS.closeCb(event)}}}/*** 自定义错误事件* 如果callback存在，调用callback，不存在调用OPTIONS中的回调* @param {Function} callback 回调函数*/onerror (callback) {this.ws.onerror = (event) => {if (typeof callback === 'function') {callback(event)} else {(typeof this.OPTIONS.errorCb === 'function') && this.OPTIONS.errorCb(event)}}}/*** 自定义监听事件* 如果callback存在，调用callback，不存在调用OPTIONS中的回调* @param {Function} callback 回调函数*/onmessage (callback) {this.ws.onmessage = (event) => {// 收到任何消息，重新开始倒计时心跳检测super.reset().start(() => {this.send(this.OPTIONS.heartMsg)})if (typeof callback === 'function') {callback(event.data)} else {(typeof this.OPTIONS.messageCb === 'function') && this.OPTIONS.messageCb(event.data)}}}/*** 自定义发送消息事件* 如果callback存在，调用callback，不存在调用OPTIONS中的回调* @param {Function} callback 回调函数*/send (data) {if (this.ws.readyState !== this.ws.OPEN) {new Error('没有连接到服务器，无法推送')return}this.ws.send(data)}/*** 链接事件*/onreconnect () {if (this.OPTIONS.reconnectCount > 0 || this.OPTIONS.reconnectCount === -1) {this.RECONNECT_TIMER = setTimeout( () => {this.create()if (this.OPTIONS.reconnectCount !== -1) {this.OPTIONS.reconnectCount --}}, this.OPTIONS.reconnectTime)}  else { clearTimeout(this.RECONNECT_TIMER)this.OPTIONS.reconnectCount = this.RECONNECT_COUNT}   }/*** 链接事件*/destroy () {super.reset()clearTimeout(this.RECONNECT_TIMER) // 清除重连定时器this.OPTIONS.isRestory = truethis.ws.close()}
}

heart文件：

/***建立心跳基类
*/export class Heart {constructor() {this.timeout = 5000this.HEART_TIMEOUT = null // 心跳计时器this.SERVER_HEART_TIMEOUT = null // 心跳计时器}// 重置reset() {clearTimeout(this.HEART_TIMEOUT)clearTimeout(this.SERVER_HEART_TIMEOUT)return this}/*** 启动心跳*/start(cb) {this.HEART_TIMEOUT = setTimeout(() => {cb()this.SERVER_HEART_TIMEOUT = setTimeout(() => {cb()this.reset().start(cb())}, this.timeout)}, this.timeout)}
}

js websocket代码相关推荐

js websocket同步等待_WebSocket硬核入门：200行代码，教你徒手撸一个WebSocket服务器...
本文原题"Node.js - 200 多行代码实现 Websocket 协议",为了提升内容品质,有较大修订. 1.引言最近正在研究 WebSocket 相关的知识,想着如何能自 ...
node.js Websocket消息推送---GoEasy
Goeasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送!个人感觉goeasy推送更稳定,推送速度快,代码简单易懂上手快浏览器兼容性:GoEasy推送支持websocket 和 ...
基于Node.js + WebSocket 的简易聊天室
代码地址如下: http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.j ...
HTML+JS+websocket 实现联机“游戏王”对战（十）- 搭建游戏服务端
目录: 游戏王联机卡牌对战 1 - 前言游戏王联机卡牌对战 2 - 联机模式游戏王联机卡牌对战 3 - 界面布局游戏王联机卡牌对战 4 - 卡组系统游戏王联机卡牌对战 5 - 卡片选中系统游 ...
js websocket发送文本与二进制实验
序言传统的html网页, 其实更适合 http协议目前的前后端分离架构,其实非常适合 websocket协议通信所以有必要对websocket 深入研究 js websocket发送文本与二进制 ...
js websocket断线重连
js websocket断开重连实例代码,请根据自己需求做出相应改动Vue中使用websocket $(function() {var lockReconnect = false;//避免重复连接va ...
Eclipse.自动提示--编写HTML/CSS/JS/JSP代码时自动提示的解决办法
最近在做一个javaweb的项目,在eclipse中编写jsp代码时没有代码提示这个梗让人很头疼,之前一直写Java代码或者在Dreamweaver中写HTML代码时自动提示代码用起来特别爽,这突然间 ...
html玫瑰花效果代码,html5渲染3D玫瑰花情人节礼物js特效代码
情人节马上就要到来了,这里给程序员前端设计师们献上一个,html5渲染而成的3D玫瑰花js效果,可以作为虚拟的情人节礼物送给自己的爱人.支持html5的浏览器查看. 查看演示下载资源: 16 次下 ...
vuejs粒子动画特效 npm安装插件vue-particles（particles.js） - 代码篇
文章目录 1. npm 安装插件`vue-particles` 2. 效果图: 3. 代码截图: 4. 代码示下: 5. 附件 · 文章阅读: 1. npm 安装插件vue-particles npm ...

js websocket代码

js websocket代码相关推荐

最新文章

热门文章