本文实例讲述了vue使用websocket的方法。分享给大家供大家参考,具体如下:
最近项目需要使用到websocket 但是框架是vue 网上查阅很多资料 vue-websocket 老是连接不上 索性就不适用封装的插件了,直接使用原生的websocket 我这边需求是 只需要接受就好 不需要发送 代码如下:
爬坑之路:vue里面this指向问题
第一版 使用原生js
mounted(){ console.log(this)----------------------------------------------------------this指向vue this.initWebpack(); }, methods: { initWebpack() { let websocket = ''; if ('WebSocket' in window) { websocket = new WebSocket("ws://192.168.1.99:8080/tv/websocket"); } else { alert('当前浏览器 Not support websocket') } //连接成功建立的回调方法 websocket.onopen = function () { console.log("WebSocket连接成功") console.log(this)----------------------------------------------------------this指向websocket }; //接收到消息的回调方法 websocket.onmessage = function (event) { console.log(this) console.log(event); this.productinfos=JSON.parse(event.data);//websocket请求过来的是string 需要格式 if(demo.offsetHeight<demo1.offsetHeight){//内部比外部高度大的时候滑动 this.upScroll()//这是this指向websocket 所以没有此方法 会报错 } this.sliceArray() } } }; //连接关闭的回调方法 websocket.onclose = function () { console.log("WebSocket连接关闭"); }; //连接发生错误的回调方法 websocket.onerror = function () { console.log("WebSocket连接发生错误"); }; //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。 window.onbeforeunload = function () { websocket.close(); //关闭WebSocket连接 }; }, sliceArray(){//截取数组的后四位 }, upScroll(){ }, }
第二版:正解
methods:{ initWebpack(){//初始化websocket const wsuri = "ws地址"; this.websock = new WebSocket(wsuri);//这里面的this都指向vue this.websock.onopen = this.websocketopen; this.websock.onmessage = this.websocketonmessage; this.websock.onclose = this.websocketclose; this.websock.onerror = this.websocketerror; }, websocketopen(){//打开 console.log("WebSocket连接成功") }, websocketonmessage(e){ //数据接收 console.log(e) this.productinfos = JSON.parse(e.data); }, websocketclose(){ //关闭 console.log("WebSocket关闭"); }, websocketerror(){ //失败 console.log("WebSocket连接失败"); }, }
this.websock.onopen
的 this指向的是websocket 如果想要给vue里面的data里面的变量赋值 就需要 this
指向vue 所以需要对websocket的方法赋值
希望本文所述对大家vue.js程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月15日
2024年11月15日
- 黄妃.2020-色違【米乐士娱乐】【FLAC分轨】
- LouisHayes-ArtformRevisited(2024)[24Bit-96kHz]FLAC
- 永恒英文金曲精选5《TheBestOfEverlastingFavouritesVol.5》[WAV+CUE]
- 黑鸭子2005-紫丁香[首版][WAV+CUE]
- 林忆莲《爱上一个不回家的人》XRCD版[低速原抓WAV+CUE][999M]
- 经典《历届奥斯卡金曲回顾》[正版原抓WAV+CUE] [1G]
- 群星《试音草原·女声篇》经典蒙古民歌[WAV+CUE][1G]
- 炉石传说月末上分卡组推荐 国服月末最快上分卡组推荐
- 炉石传说月底最强卡组有哪些 2024国服月底最强卡组推荐
- 炉石传说月初最强卡组有哪些 2024月初最强上分卡组推荐
- 狼人杀亮相原生鸿蒙之夜 假面科技强势登陆华为生态
- 12小时光线挑战!AI画质专家才是大平层首选
- 2024游戏IP报告:1~9月规模1960亿 68%用户愿为之付费
- 群星.2024-今夜一起为爱鼓掌电视剧原声带【相信音乐】【FLAC分轨】
- BIGFOUR.2013-大家利事【寰亚】【WAV+CUE】