首页 > 其他分享 >js实现websocket

js实现websocket

时间:2023-07-27 09:34:49浏览次数:31  
标签:socketExamples console log 实现 res js WebSocket websocket false

import {UserManager} from "@/utils/userManager.js";

class webSocketClass {
  constructor(url="ws://127.0.0.1:8088/",time=3) {
    this.url = url
    this.filterMessagesList =  [""];  //服务端返回的内容 message事件不监听的内容,不会再message返回
    this.data = null
    this.heartbeatCheckData = {}  //心跳发送的内容
    this.isCreate = false // WebSocket 是否创建成功
    this.isConnect = false // 是否已经连接
    this.isInitiative = false // 是否主动断开
    this.timeoutNumber = time // 心跳检测间隔
    this.heartbeatTimer = null // 心跳检测定时器
    this.reconnectTimer = null // 断线重连定时器
    this.socketExamples = null // websocket实例
    this.againTime = 3 // 重连等待时间(单位秒)
  }

  // 初始化websocket连接
  initSocket(gameId) {
    const _this = this
    this.socketExamples = uni.connectSocket({
      url: `${_this.url}?gameId=${gameId}&$userId=${UserManager.shared().userInfo.userId}`,
      header: {
        'content-type': 'application/json',
         token: UserManager.shared().userInfo ? UserManager.shared().userInfo.token : ''
      },
      success: (res) => {
        _this.isCreate = true
        console.log(res)
      },
      fail: (rej) => {
        console.error(rej)
        _this.isCreate = false
      }
    })
    this.createSocket()
  }

  // 创建websocket连接
  createSocket() {
    var _this = this
    if (this.isCreate) {
      console.log('WebSocket 开始初始化')
      // 监听 WebSocket 连接打开事件
      try {
        this.socketExamples.onOpen(() => {
          console.log('WebSocket 连接成功')
          this.isConnect = true
          clearInterval(this.heartbeatTimer)
          clearTimeout(this.reconnectTimer)
          // 打开心跳检测
          this.heartbeatCheck()
        })
        // 监听 WebSocket 接受到服务器的消息事件
        this.socketExamples.onMessage((res) => {
          console.log('收到消息---',res.data)
          if (_this.filterMessagesList.includes(res.data)) {
                     console.log(`信息:${res.data}--在过滤列表中不进行推送`)
          }else{
                     uni.$emit('message', res)
          }
        })
        // 监听 WebSocket 连接关闭事件
        this.socketExamples.onClose(() => {
          console.log('WebSocket 关闭了')
          this.isConnect = false
          this.reconnect()
        })
        // 监听 WebSocket 错误事件
        this.socketExamples.onError((res) => {
          console.log('WebSocket 出错了')
          console.log(res)
          this.isInitiative = false
        })
      } catch (error) {
        console.warn(error)
      }
    } else {
      console.warn('WebSocket 初始化失败!')
    }
  }

  //判断是否为{}
  isEmptyObject(value) {
  return typeof value === 'object' && Object.keys(value).length === 0;
}

  // 发送消息
  sendMsg(value) {
    if (!this.isEmptyObject(value)){
          value["userId"] =  UserManager.shared().userInfo ? UserManager.shared().userInfo.userId : ''
    }
     const param = JSON.stringify(value)
    return new Promise((resolve, reject) => {
      this.socketExamples.send({
        data: param,
        success() {
          console.log('消息发送成功')
          resolve(true)
        },
        fail(error) {
          console.log('消息发送失败')
          reject(error)
        }
      })
    })
  }

  // 开启心跳检测
  heartbeatCheck() {
    var _this = this
    console.log('开启心跳')
    this.heartbeatTimer = setInterval(() => {
      _this.sendMsg(_this.heartbeatCheckData)
    }, _this.timeoutNumber * 1000)
  }

  // 重新连接
  reconnect() {
    // 停止发送心跳
    clearTimeout(this.reconnectTimer)
    clearInterval(this.heartbeatTimer)
    // 如果不是人为关闭的话,进行重连
    if (!this.isInitiative) {
      this.reconnectTimer = setTimeout(() => {
        this.initSocket()
      }, this.againTime * 1000)
    }
  }

  // 关闭 WebSocket 连接
  closeSocket(reason = '关闭') {
    const _this = this
    this.socketExamples.close({
      reason,
      success() {
        _this.data = null
        _this.isCreate = false
        _this.isConnect = false
        _this.isInitiative = true
        _this.socketExamples = null
        clearInterval(_this.heartbeatTimer)
        clearTimeout(_this.reconnectTimer)
        console.log('关闭 WebSocket 成功')
      },
      fail(error) {
        console.log('关闭 WebSocket 失败',error)
      }
    })
  }
}
export {webSocketClass}


标签:socketExamples,console,log,实现,res,js,WebSocket,websocket,false
From: https://www.cnblogs.com/pythonywy/p/17584069.html

相关文章

  • Js基础语法
    操作DOM节点例如:fuctiona(){//获取某个标签varnode=documrnt.getElementById("node");//获取标签里的内容(包括子标签和文本)varhtm=node.innerHTML;alert(htm);//修改该节点里的内容node.innerHTML="<p>修改后的内容</p>";} ......
  • PHP 中优雅的将JSON/XML/YAML 等数据反序列化成指定的类对象
    这个小事情何以需要记上一笔?实在是因为当用了各种编程语言以后,发现系统I/O处,尤其对外的接口Interface最重要,它或许可以被称为Specification,规约。PHP是混合型编程风格的语言,不强求完全的OOP。但是代码不OOP化的话,又得不到更多的开发工具的支持。尤其在PHP中如果只是用数组结......
  • 利用NAS实现全自动观影追剧的几种方案对比
    https://fairysen.com/788.html想象一下打开一个网页,点开搜索框输入想看的电影或者电视剧,只需要点一个按钮,过几分钟对应的高清资源就已经呈现在你的影视库中,刮削完毕,字幕配好,你可以随时在家里的大屏幕或手机的小屏幕上欣赏。上周花了两天时间研究了下这套自动化流程,之前一直是手......
  • 线性表的顺序存储原理及实现
    线性表是一种常见的数据结构,它是由一组相同数据类型的元素按照一定的顺序排列而成的数据集合。线性表可以使用不同的存储方式,其中一种常见的方式是顺序存储。顺序存储方式是将线性表的元素连续地存储在一片连续的内存区域中,通过使用数组实现。每个元素占用一个存储单元,通过数组的......
  • NLP句子相似性方法总结及实现
    目录1、基于Word2Vec的余弦相似度2、TextRank算法中的句子相似性3、莱文斯坦距离(编辑距离)4、莱文斯坦比5、汉明距离6、Jaro距离(JaroDistance)7、Jaro-Winkler距离(Jaro-WinklerDistance)8、基于Doc2Vec的句子相似度计算1、基于Word2Vec的余弦相似度首先对句子分词,使用Gens......
  • 基于PHP的手机销售系统的设计与实现
    完整资料进入【数字空间】查看——搜索"writebug"一、摘要在互联网飞速发展的今天,互联网成为人们快速获取和交换信息的重要渠道。互联网上发布信息主要是通过网站实现,通过网络运营,消费者产生了一种全新的消费方式和购物理念。手机是一种高科技产品,通过手机缩短了人与人之间的距离,人......
  • java 将枚举转Json
    Java将枚举转为JSON引言在Java开发中,有时候需要将枚举类型转换为JSON格式。这样可以方便地在不同的系统或平台之间传递数据。本文将介绍如何使用Java代码实现将枚举类型转换为JSON格式的步骤和代码示例。流程概述下面是将枚举转为JSON的整个流程概述:步骤操作步骤1导......
  • 关于AWS-实现私有子网中的EC2-通过NAT网关访问外网的过程及原理
    在AWS中,公有子网中的主机之所以能访问互联网,其原理是借助于子网所在VPC中的IGW那么私有子网中的主机,如EC2,应该如何访问外网/互联网呢?其实是可以通过NATGateway实现笔者先简单总结一下,核心的操作步骤如下:1、先得有一个IGW,绑定到VPC之中,这样IGW就与VPC有了关联的关系2、至少得......
  • EtherNet/IP转 Modbus网关实现AB PLC控制变频器案例
    捷米特JM-EIP-RTU网关Modbus转ETHERNET/IP用于将多个变频器连接到Ethernet/Ip主网,以便森兰变频器可以由ABPLC控制。 配备专用于JM-EIP-RTU网关的EDS文件,ABPLC主站可以控制森兰逆变器从站。使用 AB 系统的配置方法1,运行 RSLogix5000 程序加载捷米特JM-EIP-RTU的EDS ......
  • UG NX实现叉车运输货物功能遇见的问题
    在前一段时间编写模拟叉车运输功能时遇到,货物无法跟随的问题(如下动图)后面发现是速度太快的原因导致货物没有跟着动,类似于抽桌布的感觉解决办法有两种:第一种解决办法很简单就是把速度降低到不超过 200mm/s就可以了(解决后如下图)第二种解决办法是在对速度有高要求的情况下......