Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >js实现websocket

js实现websocket

作者头像
小小咸鱼YwY
发布于 2023-07-31 02:46:20
发布于 2023-07-31 02:46:20
1.3K00
代码可运行
举报
文章被收录于专栏:python-爬虫python-爬虫
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
必抓!程序员必备的关键算法:探索编程世界的珍宝
嗨,亲爱的编程同道们!在这个码农的世界里,算法就像我们的剑与盾,为我们打开问题的大门。不论你是新手刚踏入编程领域,还是老手早已颇有心得,总有那几种算法是我们绝对不能错过的,它们是你编程路上的指南针,也是你驰骋代码世界的翅膀。今天,让我们一起来探讨一下这些至关重要的“必抓!”算法,让我们的编程之旅更充实、更从容。
繁依Fanyi
2023/10/12
2180
必抓!程序员必备的关键算法:探索编程世界的珍宝
什么样的问题应该使用动态规划?
你是否有这样的困惑?在掌握了一些基础算法和数据结构之后,碰到一些较为复杂的问题还是无从下手,面试时自然也是胆战心惊。究其原因,可以归因于以下两点:
刺槐儿
2023/11/16
5180
30 个重要数据结构和算法完整介绍(建议收藏保存)
话虽如此,我决定在CSDN新星计划挑战期间将我所了解的数据结构和算法集中起来。本文旨在使 DSA 看起来不像人们认为的那样令人生畏。它包括 15 个最有用的数据结构和 15 个最重要的算法,可以帮助您在学习中和面试中取得好成绩并提高您的编程竞争力。后面等我还会继续对这些数据结构和算法进行进一步详细地研究讲解。
海拥
2021/08/23
4.2K0
30 个重要数据结构和算法完整介绍(建议收藏保存)
Python 算法基础篇:动态规划的基本概念与特点
动态规划是一种常用且高效的算法技术,用于解决一类具有重叠子问题和最优子结构性质的问题。在本篇博客中,我们将重点介绍动态规划的基本概念与特点,探讨其在解决典型问题中的应用,并通过实例代码演示动态规划算法的实现,每行代码都配有详细的注释。
小蓝枣
2023/07/22
5130
Python数据结构与算法笔记(5)
邻接矩阵优点是简单,对于小图,很容易看到哪些节点连接到其他节点。但是大多数单元格是空的,即稀疏。
2018/09/03
1K1
Python数据结构与算法笔记(5)
五类常见算法小记 (递归与分治,动态规划,贪心,回溯,分支界限法)
直接或间接地调用自身的算法称为递归算法。 递归是算法设计与分析中经常使用的一种技术,描写叙述简单且易于理解。
全栈程序员站长
2022/07/20
5920
【JavaScript 算法】动态规划:最优子结构与重叠子问题
最优子结构指的是一个问题的最优解可以由其子问题的最优解构造而成。换句话说,如果我们可以通过解决子问题来解决原问题,那么这个问题就具有最优子结构性质。
空白诗
2024/07/20
6580
【JavaScript 算法】动态规划:最优子结构与重叠子问题
程序员应该知道的十个基础算法
作为一名程序员,掌握各种算法可以帮助我们解决各种复杂的问题,提高代码的效率和性能,同时也是面试中常被考察的重要内容之一。无论是开发新的软件应用、优化现有的算法逻辑还是解决各类计算问题,算法都是不可或缺的工具。因此,程序员必须掌握一系列常用的算法,以确保能够高效地编写出稳定、功能强大的软件。
小齐来了
2023/10/27
2.9K0
程序员应该知道的十个基础算法
ACM模版-f_zyj v 2.0——更新通知
距离 ACM模版-f_zyj v 1.1\text{ACM模版-f_zyj v 1.1} 版成工已经一年整了,这一年,我每次发现其中有不足时,都会在我在博客 ACM在线模版-f-zyj\text{ACM在线模版-f-zyj} 中对其进行更新,稀稀拉拉的一年过去了,我发现增删改的地方实在不少,所以总是有朋友问我什么时候会将这些更新整理到 PDFPDF 格式中……
f_zyj
2019/05/27
6410
文心一言 VS 讯飞星火 VS chatgpt (326)-- 算法导论22.5 2题
为了解释STRONGLY-CONNECTED-COMPONENTS算法在图22-6(假设是一个有向图)上的运行过程,并满足你的要求,我们将首先概述算法的基本步骤,然后具体说明在图上的执行过程,并给出Go语言的伪代码实现。
福大大架构师每日一题
2024/08/20
1290
文心一言 VS 讯飞星火 VS chatgpt (326)-- 算法导论22.5 2题
算法数据结构 | 20行代码实现,使用Tarjan算法求解强连通分量
在开始文章之前先跟大家同步一个坏消息,大概是由于整理了PDF分享的原因,遭到leetcode上海官方投诉侵权(虽然我一直用的都是海外版)。我个人觉得这种行为非常霸道,决定以后不再更新leetcode相关的文章,并且之前的文章也进行了删除。对于想要看这部分文章的朋友,先说声非常抱歉。周末我会寻找其他平台的算法问题作为替代,带来不便,再次抱歉。
TechFlow-承志
2020/09/03
6810
Tarjan算法
tarjan算法 一个关于有向图的联通性的神奇算法。 基于DFS(迪法师)算法,深度优先搜索一张有向图。 名词的储备,有备无患 强连通(strongly connected): 在一个有向图G里,设两个点 a、b。发现,由a有一条路可以走到b,由b又有一条路可以走到a,我们就叫这两个顶点(a,b)强连通。 强连通图(Strongly Connected Graph): 如果在一个有向图G中,每两个点都强连通,我们就叫这个图,强连通图。 强连通分量(strongly connected c
机器学习算法工程师
2018/03/06
8710
Tarjan算法
关于动态规划,你想知道的都在这里了!
在本文中,我将介绍由Richard Bellman在20世纪50年代提出的动态规划(dynamic programming)概念,这是一种强大的算法设计技术——将问题分解成多个小问题,存储它们的解,通过将其结合在一起,最终得到原始问题的解决方案。
AI科技大本营
2020/12/08
4450
关于动态规划,你想知道的都在这里了!
tarjan算法
     说到以Tarjan命名的算法,我们经常提到的有3个,其中就包括本文所介绍的求强连通分量的Tarjan算法。而提出此算法的普林斯顿大学的Robert E Tarjan教授也是1986年的图灵奖
triplebee
2018/01/09
9830
tarjan算法
算法:动态规划
上面是一个按照时间段发生的任务a,b,c,d,e,f,g,h,有的任务之间会有时间重叠。定义:
用户3578099
2022/04/18
1.7K0
算法:动态规划
tarjan算法详解
tarjan算法讲解。 tarjan算法,一个关于 图的联通性的神奇算法。基于DFS算法,深度优先搜索一张有向图。!注意!是有向图。根据树,堆栈,打标记等种种神奇方法来完成剖析一个图的工作。而图的联通性,就是任督二脉通不通。。的问题。 了解tarjan算法之前你需要知道: 强连通,强连通图,强连通分量,解答树(解答树只是一种形式。了解即可) 强连通(strongly connected): 在一个有向图G里,设两个点 a b 发现,由a有一条路可以走到b,由b又有一条路可以走到a,我们就叫这两个顶点(a,
attack
2018/04/12
1.9K0
tarjan算法详解
客户端基本不用的算法系列:Tarjan 算法的思路
在之前的 《客户端基本不用的算法系列:从 floodfill 到图的连通性》一文中,我们已经了解了在无向图中的割点和桥的定义。
用户2932962
2019/07/19
1.1K0
ACM竞赛学习指南(算法工程师成长计划)
算法工程师成长计划 近年来,算法行业异常火爆,算法工程师年薪一般20万~100 万。越来越多的人学习算法,甚至很多非专业的人也参加培训或者自学,想转到算法行业。尽管如此,算法工程师仍然面临100万的人才缺口。缺人、急需,算法工程师成为众多企业猎头争抢的对象。 计算机的终极是人工智能,而人工智能的核心是算法,算法已经渗透到了包括互联网、商业、金融业、航空、军事等各个社会领域。可以说,算法正在改变着这个世界。 下面说说如何成为一个算法工程师,万丈高楼平地起,尽管招聘启事的算法工程师都要求会机器学习,或数据挖
rainchxy
2018/09/13
4K0
动态规划基础知识点(包含文档)
我也不知道为啥要收fei,我普通上传,但是平台好像不能直接看,大家可以试看,因为该文档就两页,还没完善
用户11039529
2024/03/25
1510
《算法设计与分析》期末不挂科的原因_算法设计与分析重点
感兴趣的话可以参考 算法竞赛、小白学DP(动态规划) 学习相关代码的具体实现(Java版)
全栈程序员站长
2022/11/08
1.2K0
《算法设计与分析》期末不挂科的原因_算法设计与分析重点
推荐阅读
相关推荐
必抓!程序员必备的关键算法:探索编程世界的珍宝
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验