亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue使用websocket的方法實例分析

 更新時間:2019年06月22日 11:05:32   作者:etemal_bright  
這篇文章主要介紹了vue使用websocket的方法,結(jié)合實例形式對比分析了vue.js使用websocket的相關(guān)操作技巧與注意事項,需要的朋友可以參考下

本文實例講述了vue使用websocket的方法。分享給大家供大家參考,具體如下:

最近項目需要使用到websocket 但是框架是vue  網(wǎng)上查閱很多資料 vue-websocket 老是連接不上 索性就不適用封裝的插件了,直接使用原生的websocket  我這邊需求是 只需要接受就好 不需要發(fā)送 代碼如下:

爬坑之路: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('當(dāng)前瀏覽器 Not support websocket')
    } //連接成功建立的回調(diào)方法 websocket.onopen = function () { console.log("WebSocket連接成功")
    console.log(this)----------------------------------------------------------this指向websocket
  };
//接收到消息的回調(diào)方法
websocket.onmessage = function (event) {
console.log(this)
console.log(event);
 this.productinfos=JSON.parse(event.data);//websocket請求過來的是string 需要格式
 if(demo.offsetHeight<demo1.offsetHeight){//內(nèi)部比外部高度大的時候滑動
this.upScroll()//這是this指向websocket 所以沒有此方法 會報錯
}
this.sliceArray() }
 }
 };
//連接關(guān)閉的回調(diào)方法 websocket.onclose = function () {
console.log("WebSocket連接關(guān)閉");
};
//連接發(fā)生錯誤的回調(diào)方法 websocket.onerror = function () {
console.log("WebSocket連接發(fā)生錯誤");
};
//監(jiān)聽窗口關(guān)閉事件,當(dāng)窗口關(guān)閉時,主動去關(guān)閉websocket連接,防止連接還沒斷開就關(guān)閉窗口,server端會拋異常。
 window.onbeforeunload = function () {
websocket.close();
//關(guān)閉WebSocket連接 };
 },
sliceArray(){//截取數(shù)組的后四位 },
 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){ //數(shù)據(jù)接收
  console.log(e)
  this.productinfos = JSON.parse(e.data);
 },
 websocketclose(){ //關(guān)閉
  console.log("WebSocket關(guān)閉");
 },
 websocketerror(){ //失敗
  console.log("WebSocket連接失敗");
 },
}

this.websock.onopen  的 this指向的是websocket 如果想要給vue里面的data里面的變量賦值 就需要 this指向vue 所以需要對websocket的方法賦值

希望本文所述對大家vue.js程序設(shè)計有所幫助。

相關(guān)文章

  • Vue發(fā)布項目實例講解

    Vue發(fā)布項目實例講解

    在本篇文章里小編給各位分享的是關(guān)于Vue發(fā)布項目的實例內(nèi)容以及知識點講解,需要的朋友們參考下。
    2019-07-07
  • vue+Element?ui實現(xiàn)照片墻效果

    vue+Element?ui實現(xiàn)照片墻效果

    這篇文章主要為大家詳細介紹了vue+Element?ui實現(xiàn)照片墻效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • Vue 實現(xiàn)CLI 3.0 + momentjs + lodash打包時優(yōu)化

    Vue 實現(xiàn)CLI 3.0 + momentjs + lodash打包時優(yōu)化

    今天小編就為大家分享一篇Vue 實現(xiàn)CLI 3.0 + momentjs + lodash打包時優(yōu)化,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Element Timeline時間線的實現(xiàn)

    Element Timeline時間線的實現(xiàn)

    本文主要介紹了Element Timeline時間線的實現(xiàn),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • VUE簡單的定時器實時刷新的實現(xiàn)方法

    VUE簡單的定時器實時刷新的實現(xiàn)方法

    這篇文章主要介紹了VUE簡單的定時器實時刷新的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-01-01
  • 在vant中使用時間選擇器和popup彈出層的操作

    在vant中使用時間選擇器和popup彈出層的操作

    這篇文章主要介紹了在vant中使用時間選擇器和popup彈出層的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • Vue組件之間四種通信方式詳解

    Vue組件之間四種通信方式詳解

    vue框架提供了前端開發(fā)組件的思想,可以通過組件來組合成一個完整的頁面,都是隨著組件數(shù)量原來越多,組件之間難免需要相互通信。本文將為大家介紹四種組件間的通信方式,需要的可以參考一下
    2022-01-01
  • vue移動端實現(xiàn)手機左右滑動入場動畫

    vue移動端實現(xiàn)手機左右滑動入場動畫

    這篇文章主要為大家詳細介紹了vue移動端實現(xiàn)手機左右滑動入場動畫,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-08-08
  • Vue 全家桶實現(xiàn)移動端酷狗音樂功能

    Vue 全家桶實現(xiàn)移動端酷狗音樂功能

    這篇文章主要介紹了Vue 全家桶實現(xiàn)移動端酷狗音樂功能,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-11-11
  • 在vue中如何使用Mock.js模擬數(shù)據(jù)

    在vue中如何使用Mock.js模擬數(shù)據(jù)

    這篇文章主要介紹了在vue中如何使用Mock.js模擬數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05

最新評論