vue websocket组件封装

简介: vue websocket组件封装

目录结构如下



封装代码


import { Message } from 'element-ui'
let websock = null
// let messageCallback = null
// const errorCallback = null
var tryTime = 0
let wsUrl = ''
// 接收ws后端返回的数据
function websocketonmessage(e, successCallback) {
  successCallback(JSON.parse(e.data))
  // console.log(JSON.parse(e.data))
  // messageCallback(e.data)
}
/**
 * 发起websocket连接
 * @param {Object} agentData 需要向后台传递的参数数据
 */
function websocketSend(agentData) {
  // 加延迟是为了尽量让ws连接状态变为OPEN
  setTimeout(() => {
    // 添加状态判断,当为OPEN时,发送消息
    if (websock.readyState === websock.OPEN) { // websock.OPEN = 1
      // 发给后端的数据需要字符串化
      websock.send(JSON.stringify(agentData))
    }
    // if (websock.readyState === websock.CLOSED) { // websock.CLOSED = 3
    //   console.log('websock.readyState=3')
    //   Message.error('ws连接异常,请稍候重试')
    // }
  }, 3000)
}
// 关闭ws连接
function websocketclose(e) {
  // e.code === 1000  表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
  // e.code !== 1000  表示非正常关闭。
  if (e && e.code !== 1000) {
    if (tryTime < 50) {
      setTimeout(function() {
        websock = null
        tryTime++
        initWebSocket()
        console.log(`第${tryTime}次重连`)
      }, 3 * 1000)
    } else {
      Message.error('重连失败!请稍后重试')
    }
    // Message.error('ws连接异常,请稍候重试')
    // errorCallback()
  }
}
// 建立ws连接
function websocketOpen(e) {
  console.log('ws连接成功')
}
// 初始化weosocket
function initWebSocket(successCallback) {
  if (typeof (WebSocket) === 'undefined') {
    Message.error('您的浏览器不支持WebSocket,无法获取数据')
    return false
  }
  // ws请求完整地址
  const requstWsUrl = wsUrl
  websock = new WebSocket(requstWsUrl)
  websock.onmessage = function(e) {
    websocketonmessage(e, successCallback)
  }
  websock.onopen = function() {
    websocketOpen()
  }
  websock.onerror = function() {
    // Message.error('ws连接异常,请稍候重试')
    // errorCallback()
  }
  websock.onclose = function(e) {
    websocketclose(e)
  }
}
/**
 * 发起websocket请求函数
 * @param {string} url ws连接地址
 * @param {Object} agentData 传给后台的参数
 * @param {function} successCallback 接收到ws数据,对数据进行处理的回调函数
 * @param {function} errCallback ws连接错误的回调函数
 */
export function sendWebsocket(url, agentData, successCallback) {
  wsUrl = url + agentData.group_id + '/'
  initWebSocket(successCallback)
  console.log(wsUrl, 'wsurl')
  // messageCallback = successCallback
  websocketSend()
}
/**
 * 关闭websocket函数
 */
export function closeWebsocket() {
  if (websock) {
    websock.close() // 关闭websocket
    websock.onclose() // 关闭websocket
  }
}

注释的地方可以来看ws 的状态 , 在这里加入了重连次数


引用


// ws连接成功,后台返回的ws数据,组件要拿数据渲染页面等操作
    wsMessage(data) {
      const dataJson = data
     // 在这里可以写逻辑
    },
    requstWs() {
      // 防止用户多次连续点击发起请求,所以要先关闭上次的ws请求。
      closeWebsocket()
      this.percentage = 1
      this.timeNumber = 0
      // 传递给后端的数据 这里的obj 我是作为参数进行传递的 , 如果你需要与服务端对话的话obj 也可以作为消息模板进行传递
      // 但是在websocket.js 里需要修改下 websocketSend 这个函数 
      const obj = {
        group_id: this.taskRecord
      }
      // 发起ws请求
      sendWebsocket('wss://192.168.0.21/ws/task_new_infos/', obj, this.wsMessage)
    },

ok 就这么多 附赠两断代码

  1. 将 “1天4时30分60秒” 转换为 秒
const dateA = this.duration.replace('天', ',') // 更改日期格式
        const dateB = dateA.replace('时', ',') // 更改日期格式时
        const dateC = dateB.replace('分', ',') // 更改日期格式时
        const dateD = dateC.replace('秒', '') // 更改日期格式时
        // console.log(dateD)
        const fullTimer = dateD.split(',') // 数组的转换
        this.timeNumber = 0
        this.timeNumber = parseInt(fullTimer[0] * 24 * 60 * 60) + parseInt(fullTimer[1] * 60 * 60) + parseInt(fullTimer[2] * 60) + parseInt(fullTimer[3])
  1. 将秒数转换为 “00 :33:22:11”
const one_day = 60 * 60 * 24
      const one_hour = 60 * 60
      const one_minute = 60
      var days = Math.abs(parseInt(this.timeNumber / one_day)) < 10 ? '0' + parseInt(this.timeNumber / one_day) : parseInt(this.timeNumber / one_day)
      var hours = Math.abs(parseInt((this.timeNumber % one_day) / one_hour)) < 10 ? '0' + parseInt((this.timeNumber % one_day) / one_hour) : parseInt((this.timeNumber % one_day) / one_hour)
      var minutes = Math.abs(parseInt((this.timeNumber % one_day % one_hour) / one_minute)) < 10 ? '0' + parseInt((this.timeNumber % one_day % one_hour) / one_minute) : parseInt((this.timeNumber % one_day % one_hour) / one_minute)
      var seconds = Math.abs(this.timeNumber % one_day % one_hour % one_minute) < 10 ? '0' + this.timeNumber % one_day % one_hour % one_minute : this.timeNumber % one_day % one_hour % one_minute
      return days + ':' + hours + ':' + minutes + ':' + seconds
相关文章
|
7天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
91 2
|
3月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
527 0
|
3月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
5月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
741 4
|
3月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件的实现代码:支持自定义表情库、快捷键发送和输入框联动的聊天表情解决方案
本文详细介绍了在 Vue 项目中实现一个功能完善、交互友好的表情包输入组件的方法,并提供了具体的应用实例。组件设计包含表情分类展示、响应式布局、与输入框的交互及样式定制等功能。通过核心技术实现,如将表情插入输入框光标位置和点击外部关闭选择器,确保用户体验流畅。同时探讨了性能优化策略,如懒加载和虚拟滚动,以及扩展性方案,如自定义主题和国际化支持。最终,展示了如何在聊天界面中集成该组件,为用户提供丰富的表情输入体验。
318 8
|
3月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
207 1
|
3月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
130 0
|
5月前
|
存储 JavaScript 前端开发
基于 ant-design-vue 和 Vue 3 封装的功能强大的表格组件
VTable 是一个基于 ant-design-vue 和 Vue 3 的多功能表格组件,支持列自定义、排序、本地化存储、行选择等功能。它继承了 Ant-Design-Vue Table 的所有特性并加以扩展,提供开箱即用的高性能体验。示例包括基础表格、可选择表格和自定义列渲染等。
409 6
|
10月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
240 64
|
10月前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
341 64