狗万官网酒店 > 狗万官网下载 > vue利用websocket的主意实例分析_vue.js

vue利用websocket的主意实例分析_vue.js

来源: 2019-08-04 19:43 我来投稿 参与评论
这篇文章主要介绍了vue利用websocket的主意,构成实例形式对比分析了vue.js利用websocket的相关操作技能与注意事项,要求的爱人可以参考下

本文实例讲述了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程序设计有所帮助。

义务编辑:狗万官网酒店
 
 
0% (0)
 
 
0% (0)
机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
地名: 匿名?

    1.