vue使用websocket概念及示例

更新時(shí)間：2022年09月22日 09:11:46 作者：小小程序員。

這篇文章主要為大家介紹了vue使用websocket概念及示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

概念部分：

1，WebSocket 是 HTML5 提供的 TCP 連接上進(jìn)行全雙工通訊的協(xié)議。一次握手之后，服務(wù)器和客戶端可以互相主動通信，雙向傳輸數(shù)據(jù)。

2，瀏覽器想服務(wù)器發(fā)送請求，建立連接之后，可通過send()方法想服務(wù)器發(fā)送數(shù)據(jù)，并通過message事件接受服務(wù)器返回的數(shù)據(jù)。

使用示例

<script>
export default {
  mounted() {
    this.connectWebsocket();
  },
  methods: {
    connectWebsocket() {
      let websocket;
      if (typeof WebSocket === "undefined") {
        console.log("您的瀏覽器不支持WebSocket");
        return;
      } else {
        let protocol = "ws";
        let url = "";
        if (window.localtion.protocol == "https:") {
          protocol = "wss";
        }
        // `${protocol}://window.location.host/echo`;
        url = `${protocol}://localhost:9998/echo`;

        // 打開一個(gè)websocket
        websocket = new WebSocket(url);
        // 建立連接
        websocket.onopen = () => {
          // 發(fā)送數(shù)據(jù)
          websocket.send("發(fā)送數(shù)據(jù)");
          console.log("websocket發(fā)送數(shù)據(jù)中");
        };
        // 客戶端接收服務(wù)端返回的數(shù)據(jù)
        websocket.onmessage = evt => {
          console.log("websocket返回的數(shù)據(jù)：", evt);
        };
        // 發(fā)生錯誤時(shí)
        websocket.onerror = evt => {
          console.log("websocket錯誤：", evt);
        };
        // 關(guān)閉連接
        websocket.onclose = evt => {
          console.log("websocket關(guān)閉：", evt);
        };
      }
    }
  }
};
</script>

以上就是vue使用websocket概念及示例的詳細(xì)內(nèi)容，更多關(guān)于vue使用websocket的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

vue 中 get / delete 傳遞數(shù)組參數(shù)方法
這篇文章主要介紹了vue 中 get / delete 傳遞數(shù)組參數(shù)方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-03-03
vue實(shí)現(xiàn)批量下載文件
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)批量下載文件的方法（不走后端接口的方法）,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-12-12
vue select 獲取value和lable操作
這篇文章主要介紹了vue select 獲取value和lable操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
解決vue 按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)問題
這篇文章主要介紹了vue 按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)的問題,本文通過實(shí)例結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2018-05-05
Vue filter 過濾當(dāng)前時(shí)間實(shí)現(xiàn)實(shí)時(shí)更新效果
這篇文章主要介紹了Vue filter 過濾當(dāng)前時(shí)間實(shí)現(xiàn)實(shí)時(shí)更新效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-12-12
Vue項(xiàng)目如何根據(jù)不同運(yùn)行環(huán)境打包項(xiàng)目
這篇文章主要介紹了Vue項(xiàng)目如何根據(jù)不同運(yùn)行環(huán)境打包項(xiàng)目問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
簡單實(shí)現(xiàn)vue中的依賴收集與響應(yīng)的方法
這篇文章主要介紹了簡單實(shí)現(xiàn)vue中的依賴收集與響應(yīng)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-02-02
vue?vue-esign簽字板的demo
這篇文章主要介紹了vue?vue-esign簽字板的實(shí)例講解，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
淺談vue-router2路由參數(shù)注意的問題
下面小編就為大家?guī)硪黄獪\談vue-router2路由參數(shù)注意的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
Vue.js實(shí)現(xiàn)watch屬性的示例詳解
本文討論了watch函數(shù)是如何利用副作用函數(shù)和options進(jìn)行封裝實(shí)現(xiàn)的，也通過調(diào)度函數(shù)去控制回調(diào)函數(shù)的立即執(zhí)行和執(zhí)行時(shí)機(jī)，還可以解決競態(tài)問題，感興趣的可以了解一下
2022-04-04