前端vue使用webscoket的简单方法

在vue 项目中使用webscoket 与后台实时通信的使用需后端提供对应的接口地址

vue项目中的使用方法

data(){return{//用户创建连接webscoketwebsock:null,//定时器timer:null,}
},
created(){//初始化websocketthis.initWebSocket();
},

methods:{//初始化websocketinitWebSocket(){if (typeof WebSocket === "undefined") return alert("您的浏览器不支持WebSocket")// websocket地址 其中 "ws" 对应的传输协议  "ws" -->http  "wss" -->https let socketApi = 后端提供的地址  例如 "xxxxxx.com/websocket/ ";let userId =  1; //和后端协定的 我这项目中是根据用户id进行区分const wsuri  = 'ws://' +  socketApi  + userId;// 初始化socket方法this.websock = new WebSocket(wsuri);// 连接成功的处理this.websock.onopen = this.websocketonopen;// 接收数据之后的处理this.websock.onmessage = this.websocketonmessage;// 报错的处理this.websock.onerror = this.websocketonerror;// 关闭连接的处理this.websock.onclose = this.websocketclose;},//scoket连接成功websocketonopen(){console.log('scoket已连接');const that= this;this.timer = setInterval(() => {try {// 向服务端标明本机心跳const jsonHeart = {status: 'heart', msg: '心跳' }// 发送消息that.websock.send(JSON.stringify(jsonHeart))//判断准备状态 if(that.websock.readyState !== 1){that.initWebSocket()}}catch (err) {that.connection()}},6000) //定时发送},//接收后端返回的数据websocketonmessage: async function (e) {//打印返回的数据 查看数据格式 可以JSON.parse()进行转换console.log(e)//根据项目需求完成后续操作},//scoket连接失败websocketonerror(e){console.log('scoket失败')console.log(e)//尝试重新连接this.initWebSocket();},//关闭socket链接websocketclose(e){console.log('断开连接' + e)console.log(e)this.websock.close()}
}

webscoket连接成功]打印

前端vue使用webscoket的简单方法相关推荐

前端vue/js刷新浏览器页面方法-案例
强制刷新当前页面 reload -- 强迫浏览器刷新当前页面 location.reload([bForceGet]) //重新加载当前文档 bForceGet, 可选参数, 默认为 false,从客 ...
前端vue js 高德地图实现雷达扫描加载，借鉴百度地图等方法，采用Canvas解决雷达背景透明度问题，解决Canvas动态指针扫描造成浏览器卡顿问题
前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...
Vue中的this.$nextTick方法的使用 [前端][Vue框架]
Vue中的this.$nextTick方法的使用因为在vue中当组件的data中的数据发生了变化之后, 如果这个data中的数据与某个Dom元素有关, 那么这个时候这个Dom元素不会立即更新, vu ...
常见的前端vue面试题
常见的前端vue面试题 1.请讲述下VUE的MVVM的理解? MVVM 是 Model-View-ViewModel的缩写,即将数据模型与数据表现层通过数据驱动进行分离,从而只需要关系数据模型的开发, ...
[vue] vue性能的优化的方法有哪些？
[vue] vue性能的优化的方法有哪些? Vue 项目性能优化 - 实践指南(网上最全 / 详细) 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM ...
vscode中前端vue项目详解_web前端Vue项目实战-Music
上篇讲到vue的使用方法,今天这一篇介绍vue的实操,可以大家更加加固去学习web前端vue技术. 第一节 Music项目环境第一部分本届作业聊一聊React和Vue的区别老版本的项目环境如何创 ...
七牛云 vue 图片上传简单解说，js 上传文件图片
七牛云 vue 图片上传简单解说,js 上传文件图片一.七牛云简介首次使用七牛云存储进行项目的图片存储,整了一上午才整明白,这些官方的教程把明白人也给说糊涂了,文档很不规范. 七牛云有免费的使用额 ...
前端VUE面试题总结
目录 VUEX vue-router 前端路由原理路由模式 hash模式 history模式路由传参路由跳转 vue的路由守卫路由相关问题脚手架rem适配封装api请求多环境变量 web ...
2021 前端 VUE 面试题总汇
文章目录 1.vue的生命周期 2.Vue2.x 双向绑定原理 3.Vue3.x 响应式原理 4.v-for 为什么要加上 key 5.Vdom的理解 6.vuex 的结构,以及 actiion 和 ...

前端vue使用webscoket的简单方法

前端vue使用webscoket的简单方法相关推荐

最新文章

热门文章