前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js实现websocket

js实现websocket

作者头像
小小咸鱼YwY
发布2023-07-31 10:46:20
9650
发布2023-07-31 10:46:20
举报
文章被收录于专栏:python-爬虫python-爬虫
代码语言:javascript
复制
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}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-07-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档