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.4K00
代码可运行
举报
文章被收录于专栏: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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Vue合理配置WebSocket并实现群聊
写JQuery项目时,使用websocket很简单,不用去考虑模块化,组件之间的访问问题,面向文档编程即可,在Vue项目中使用时,远远没有想象中的那么简单,需要考虑很多场景,本篇文章将与各位开发者分享下vue-native-websocket库的使用以及配置,用其实现群聊功能。
神奇的程序员
2022/04/10
2K0
Vue合理配置WebSocket并实现群聊
2万字长文肝了一个实时聊天室,只为让她学会websocket
看演示不过瘾,我也玩一下(http://socket.vjscoder.com/websocket-chatroom/index.html#/)
前端胖头鱼
2022/07/25
1K0
2万字长文肝了一个实时聊天室,只为让她学会websocket
简易版websocket封装及本地启动socket服务
使用node启动本地socket服务 创建项目目录 mkdir server 初始化 npm npm init -y 安装依赖库 npm i nodejs-websocket -S 创建服务文件 const ws = require('nodejs-websocket'); const server = ws.createServer(connect => { connect.on("text", data => { console.log("received: "+data); connect
peng_tianyu
2022/12/15
1.4K0
微信小程序中websocket的运用
近期在开发一个类似于小年糕的小程序,当用户在合成影集后会立马跳到个人中心的影集列表,但是立刻跳过去,服务端并没有马上制作完成,所以会有个“影集正在制作中”的提示,为了避免用户退出页面重新请求查看影集是否制作完成,决定前后端通信采用websocket通信的方式,当有影集制作完成时,服务端可实时向用户推送消息。
越陌度阡
2020/11/26
1.4K0
赶快收藏!全网最佳 WebSocket 封装:完美支持断网重连、自动心跳!
在现代 Web 开发中,WebSocket 已成为实现实时通讯的常用技术。然而,直接使用 WebSocket API 时,开发者常常需要面对断网重连、心跳检测等问题,增加了开发难度和复杂度。本文将介绍一种封装后的 WebSocket 解决方案,不仅支持断网重连和自动心跳,还简化了使用流程,极大提升开发效率。
IT_陈寒
2025/06/01
1410
赶快收藏!全网最佳 WebSocket 封装:完美支持断网重连、自动心跳!
uni-app中websocket的使用 断开重连、心跳机制
最近关于H5和APP的开发中使用到了webSocket,由于web/app有时候会出现网络不稳定或者服务端主动断开,这时候导致消息推送不了的情况,需要客户端进行重连。查阅资料后发现了一个心跳机制,也就是客户端间隔一段时间就向服务器发送一条消息,如果服务器收到消息就回复一条信息过来,如果一定时间内没有回复,则表示已经与服务器断开连接了,这个时候就需要进行重连。
唐志远
2022/10/27
5.1K0
uni-app中websocket的使用 断开重连、心跳机制
websocket长连接和公共状态管理方案(vuex + websocket or redux + websocket )
我们都知道在vue和react这种单页面组件化项目中,建立socket连接会遇到:重复连接,切换页面连接中断 ,状态丢失等问题,而且如果想要在任何页面接受到来自socket传递的信息,所以在建立socket连接时候就要考虑是否要把连接实例化放在公共state里边统一管理,这样可以方便在任何组件中调用socket方法。这里会介绍socket与Vuex和redux进行连接实时接受信息改变数据的方案。
用户6835371
2021/06/01
7.1K0
websocket长连接和公共状态管理方案(vuex + websocket or redux + websocket )
WebSocket加入心跳包防止自动断开连接
近日,在公司中开发一个使用websocket为前端推送消息的功能时,发现一个问题:就是每隔一段时间如果不传送数据的话,与前段的连接就会自动断开;
用户1212940
2022/04/13
5K0
基于Vite2+Vue3的项目复盘总结
https://juejin.cn/post/6969758357288648718
@超人
2021/07/05
1.2K0
基于Vite2+Vue3的项目复盘总结
通信系列 | Websocket在微信小程序的用法
使用Websocket的及时通讯实现直播间的评论、加入直播间、离开直播间、点赞、关注、商品上下架等操作。
Tinywan
2021/01/28
4.7K0
微信小程序websocket正确姿势
1.请求地址必须是ws://或wss:// var wsurl = 'wss://zsj.itdos.net/v1' 2.服务端websocket必须返回文件头protocol 小程序端请求会发
hotqin888
2021/08/10
1.4K0
js实现websocket实例
<!-- websocket 接口 --> <script type="text/javascript"> var websocket_url = 'ws://127.0.0.1:' + "{$Think.config.prompt_service.ws_port}"; var admin_userid = "{$Think.const.UID}"; var socket_type = JSON.parse('{$mginfo.socket_type|default=[]|json_encode}');
OwenZhang
2021/12/08
4.3K0
WebSocket :用WebSocket实现推送你必须考虑的几个问题
本项目通过WebSocket实现同时在线用户量几千的推送服务器(可内网运行)。且可实时查看用户在线状态。
全栈程序员站长
2022/09/14
1.7K0
前端 实战项目·WebSocket 心跳重连机制
WebSocket 是一种网络通信协议,它使得客户端和服务器之间的数据交换变得更加简单。最近在项目中使用 WebSocket 实现了一个简单在线聊天室功能,在此探究下心跳重连的机制。
数媒派
2022/12/01
4.9K1
使用SpringBoot + WebSocket实现单人聊天
在做之前,不管在界面布局,还是功能实现方面都下了一点功夫,最终还是一点点实现了,现在就记录一下。
全栈开发Dream
2021/06/08
2.3K0
使用SpringBoot + WebSocket实现单人聊天
WebSocket断开原因、心跳机制防止自动断开连接
WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来。
安德玛
2022/03/09
17.9K0
「IM系列」WebSocket教程:心跳检测与重连机制
正常的情况客户端断开连接会向服务端发送一个fin包,服务端收到fin包后得知客户端连接断开,则立刻触发onClose事件回调。
Tinywan
2023/12/13
4.8K0
「IM系列」WebSocket教程:心跳检测与重连机制
WebSocket 实现数据实时刷新
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。
青梅煮码
2023/02/18
4.9K0
【黄啊码】微信小程序:webSocket的使用手册
创建一个 WebSocket 连接;一个微信小程序同时只能有一个 WebSocket 连接,如果当前已存在一个 WebSocket 连接,会自动关闭该连接,并重新创建一个 WebSocket 连接。
黄啊码
2022/01/09
7930
记一次 websocket 实战,“我没有拿到回执呀”
web 前端 A1 与后端 C1 建立 websocket,等后端 C2 推送给 C1 一个 callBack 消息后,C1 再将这个消息推回给 A1,最后 A1 拿到这个回执后渲染界面;
掘金安东尼
2022/09/19
4660
推荐阅读
相关推荐
Vue合理配置WebSocket并实现群聊
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验