Vue websocket封装实现方法详解

目录
  • 1.封装的ws.js文件
  • 2.使用方法

1.封装的ws.js文件

let global_callback = null
let socket = '' // 存储 WebSocket 连接.
let timeoutObj = null  // 心跳定时器
let serverTimoutObj = null // 服务超时定时关闭
let lockReconnect = false // 是否真正建立了连接
let timeoutnum = null // 重新连接的定时器，  没连接上会一直重连，设置延迟避免请求过多
const socketConfig = {
  url: '',
  retryTimeout: 20000 // 心跳时间 暂定20s
}
export const sendWebsocket = function (agentData, callback) {
  global_callback = callback
  socketOnSend(agentData)
}
export const initWebSocket = function (url) {
  let weburl = url || socketConfig.url
  if (window.WebSocket) { return }
  if (!socket) {
    socket = new WebSocket(weburl)
    socketOnOpen()
    socketOnClose()
    socketOnError()
    socketOnMessage()
  }
}
/**
 * 关闭websocket函数
 */
export const closeWebsocket = function () {
  if (socket) {
    socket.close()
  }
  clearTimeout(timeoutObj)
  clearTimeout(serverTimoutObj)
}
function socketOnSend(data) {
  socket.send(data)
}
function socketOnOpen() {
  socket.onopen = () => {
    console.log('socket连接成功')
    start()
  }
}
// 开启心跳
function start() {
  timeoutObj && clearTimeout(timeoutObj)
  serverTimoutObj && clearTimeout(serverTimoutObj)
  timeoutObj = setTimeout(() => {
    // 这里发送一个心跳，后端收到后返回一个心跳消息
    if (socket.readyState === 1) {
      // 如果连接正常  给后端发送指定消息
      socket.send('')
      console.log('发送消息')
    } else {
      // 重连
      reconnect()
    }
    serverTimoutObj = setTimeout(() => {
      // 超时关闭连接
      socket.close()
    }, socketConfig.retryTimeout);
  }, socketConfig.retryTimeout);
}
// 重连
function reconnect() {
  if (lockReconnect) {
    return
  }
  lockReconnect = true
  timeoutnum && clearTimeout(timeoutnum)
  timeoutnum = setTimeout(() => {
    initWebSocket()
    lockReconnect = false
  }, 5000);
}
function socketOnClose() {
  socket.onclose = () => {
    console.log('socket已经关闭')
  }
}
function socketOnError() {
  socket.onerror = () => {
    reconnect()
    console.log('socket 连接失败')
  }
}
function socketOnMessage() {
  socket.onmessage = (e) => {
    global_callback(e.data)
    reset()
  }
}
// 重置心跳
function reset() {
  // 清除时间
  clearTimeout(timeoutObj)
  clearTimeout(serverTimoutObj)
  // 重启心跳
  start()
}

这里的封装export了三个方法

  • initWebSocket 用来初始化websock，可传入url
  • sendWebsocket 用来发送数据
  • closeWebsocket 用来关闭连接

2.使用方法

文件存放路径： /src/utils/ws.js

所需文件中按需引入

1.首先需要再项目中进行初始化，如果你的项目有登陆的话，则你可以再home.vue里面进行引入：
 ```vue
 import { initWebSocket } from ‘@/utils/ws.js’
 ···
 eport default {
      created () {
         initWebSocket ()
     } 
 }
 ```

2. 然后在你需要获取实时数据的地方进行引入并调用 sendWebsocket 
 ```vue
 import { sendWebsocket } from ‘@/utils/ws.js’
 ···
 eport default {
      created () {
         sendWebsocket (this.onWebSocketMessage)
     },
     methods: {
         onWebSocketMessage(data) {}
     }
 }
 ```

关闭websock

 import { closeSock} from "@/api/socket";
 export default {
 	destoryed () {
 		closeSock()
 	}
 }

到此这篇关于Vue websocket封装实现方法详解的文章就介绍到这了,更多相关Vue websocket封装内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue3.0中使用websocket,封装到公共方法的实现

    目录 使用websocket,封装到公共方法 vue中封装websocket问题 1.在untils文件夹下新建socket_service.js 2.在main.js里引用 2.在组件里调用$socket 使用websocket,封装到公共方法 首先创建一个socket.ts文件封装公共方法 /* * @Descripttion: 封装socket方法 * @version: * @Date: 2021-08-06 11:14:39 * @LastEditTime: 2021-10-26 14

  • vue3+ts+Vuex中使用websocket协议方式

    目录 vue3+ts+Vuex使用websocket协议 在stroe中 vue3中 vue封装websocket 封装的socket.js文件内容 使用方法 vue3+ts+Vuex使用websocket协议 本文作者使用的是ts+vue3的setup语法糖,大家注意使用的vue版本! 在stroe中 import { createStore } from 'vuex' import { stateInt } from '../interface/storeInterface' const s

  • vue项目使用websocket连接问题及解决

    目录 vue使用websocket连接 前景 解决过程 vue2全局使用websocket记录 新建ws模块文件 在main.js中引用ws模块文件 App.vue挂载时再次连接服务器并且接收消息 vue使用websocket连接 前景 公司做一个包含websocket的项目,我用的是vue做的,开始只有一个组件的要求demo,就将websocket的配置直接放在组件方法中,组件挂载时直接初始化ws,但是后续组件增加,开始出现多个websocket链接的情况,是不允许的. 刚开始的做法是将web

  • vue使用websocket概念及示例

    目录 概念部分: 使用示例 概念部分: 1,WebSocket 是 HTML5 提供的 TCP 连接上进行全双工通讯的协议.一次握手之后,服务器和客户端可以互相主动通信,双向传输数据. 2,浏览器想服务器发送请求,建立连接之后,可通过send()方法想服务器发送数据,并通过message事件接受服务器返回的数据. 使用示例 <script> export default { mounted() { this.connectWebsocket(); }, methods: { connectWe

  • Vue项目使用Websocket大文件FileReader()切片上传实例

    目录 使用技术 upfile.js文件 新增需求:对上传文件流进行加密,并传给后端做验证 还是在upfile.js文件(也可以单独放一个文件) 大文件上传,本地1.3G文件不到一分钟上传完毕 使用技术 Vue框架 WebSocket双向传输 FileReader读取文件 封装的WebSocket请求文件上传方法,目前只支持单文件上传,有研究出来多文件上传,记得评论哦 upfile.js文件 //file.slice(起始字节,终止字节)与FileReader实现文件切片读取 function P

  • Vue websocket封装实现方法详解

    目录 1.封装的ws.js文件 2.使用方法 1.封装的ws.js文件 let global_callback = null let socket = '' // 存储 WebSocket 连接. let timeoutObj = null // 心跳定时器 let serverTimoutObj = null // 服务超时定时关闭 let lockReconnect = false // 是否真正建立了连接 let timeoutnum = null // 重新连接的定时器, 没连接上会一直

  • 基于Vue的ajax公共方法(详解)

    为了减少代码的冗余,决定抽离出请求ajax的公共方法,供同事们使用. 我使用了ES6语法,编写了这个方法. /** * @param type 请求类型,分为POST/GET * @param url 请求url * @param contentType * @param headers * @param data * @returns {Promise<any>} */ ajaxData: function (type, url, contentType, headers, data) {

  • Python底层封装实现方法详解

    这篇文章主要介绍了Python底层封装实现方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 事实上,python封装特性的实现纯属"投机取巧",之所以类对象无法直接调用私有方法和属性,是因为底层实现时,python偷偷改变了它们的名称. python在底层实现时,将它们的名称都偷偷改成了"_类名__属性(方法)名"的格式 class Person: def setname(self, name): if le

  • Vue中watch使用方法详解

    目录 前言 watch immediate和handler deep 拓展 前言 说到 vue 中的 watch 方法,大家可能首先想到,它是用来监听数据的变化,一旦数据发生变化可以执行一些其他的操作.但是 watch 的操作可不止如此,本章就带大家一起深剖细析 vue 中的 watch 方法. watch 因为 vue 是双向数据绑定,所以当页面数据发生变化时,我们通过 watch 方法就可以拿到数据变化前和变化后的值,从而做一系列操作,下面我们通过一个简单的例子来解释. 先看下面这段代码 <

  • AngularJS封装指令方法详解

    本文实例讲述了AngularJS封装指令方法.分享给大家供大家参考,具体如下: 引言:angularjs是一个中等重量级的前端开发框架 HTML是一门很好的为静态文本设计的语言,但要构建动态的web应用它就显的乏力了.通常,我们使用以下技术来解决静态网页技术在构建动态应用上的不足: 1.类库:类库是一类函数的集合,它能帮助你写web应用.这里起主导作用是你的代码,由你来决定何时使用类库.典型的类库,例如prototype.jQuery等. 2.框架:框架式一种特殊的.已经实现的web应用,你只需

  • vue自定义指令实现方法详解

    本文实例讲述了vue自定义指令实现方法.分享给大家供大家参考,具体如下: vue中的指令就是v-on v-bind v-show等等,那么自定义指令是什么呢? 自己定义的指令就是自定义指令. 语法: Vue.directive(id, definition) 这里可以参考vue中的指令 <h1 v-if="yes">Yes</h1> 其中,if就是指令ID,yes是expression Vue.directive()传入接受两个参数,id是指指令ID,defin

  • vue component组件使用方法详解

    什么是组件 按照惯例,引用Vue官网的一句话: 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件component的注册 全局组件: Vue.component('todo-item',{ props:['grocery'], template:'<li>{{grocery.te

  • Asp.Net Core中WebSocket绑定的方法详解

    说明 Websocket是html5后的产物,对于asp.net core中也得到了支持,Asp.Net Core中WebScoket的操作使用基本上和Asp.net中相同,不同的是,绑定监听. Asp.Net Core2.0默认已经支持WebSocket,不需要另外安装Nuget包. 通过对HttpContext中的WebSockets.AcceptWebSocketAsync方法,接受WebSocket请求:并返回WebScoket对象. 下面话不多说了,来一起看看详细的介绍吧. 一.示例1

  • vue组件tabbar使用方法详解

    vue组件tabbar使用方法详解

    本文实例为大家分享了vue组件tabbar的具体使用方法,供大家参考,具体内容如下 1.App.vue <!-- 入口文件 --> <template> <div id="app"> <!-- 视图层 --> <router-view></router-view> <!-- 底部选项卡 --> <tabbar @on-index-change="onIndexChange" v

  • Vue3纯前端实现Vue路由权限的方法详解

    Vue3纯前端实现Vue路由权限的方法详解

    目录 前言 RBAC模型 代码实现 登录 菜单信息 动态路由筛选 总结 前言 在开发管理后台时,都会存在多个角色登录,登录成功后,不同的角色会展示不同的菜单路由.这就是我们通常所说的动态路由权限,实现路由权限的方案有多种,比较常用的是由前端使用addRoutes(V3版本改成了addRoute)动态挂载路由和服务端返回可访问的路由菜单这两种.今天主要是从前端角度,实现路由权限的功能. RBAC模型 前端实现路由权限主要是基于RBAC模型. RBAC(Role-Based Access Contr

随机推荐