WebSocket長接続とaxiosポーリングをフロントエンドとバックグラウンドで行う方法(vueフレームワーク)

目次

前言

本文

1. Websocket

の作成

2. axiosポーリング

結語

前言
WebSocketは、HTML 5が提供し始めた単一のTCP接続上でフルデュプレクス通信を行うプロトコルである.クライアントとサーバ間のデータ交換をより簡単にし、サービス側がクライアントにデータを積極的にプッシュできるようにします.WebSocket APIでは、ブラウザとサーバが握手を1回完了するだけで、両者の間に永続的な接続を直接作成し、双方向のデータ転送を行うことができます.
多くのサイトでは、プッシュテクノロジーを実現するためにAjaxポーリングが使用されています.ポーリングは、1秒ごとなどの特定の時間間隔で、ブラウザによってサーバに対してHTTP要求を発行し、サーバによって最新のデータをクライアントのブラウザに返す.このような従来のモードは、ブラウザがサーバに絶えず要求する必要があるという明らかな欠点をもたらしているが、HTTP要求には長いヘッダが含まれている可能性があり、その中で本当に有効なデータはほんの一部であり、多くの帯域幅などのリソースを浪費することは明らかである.
HTML 5で定義されたWebSocketプロトコルは、サーバリソースと帯域幅をより効率的に節約し、よりリアルタイムで通信することができます.
面白い形容を見たことがあります.

ポーリングは、

です.

   ：       ？（3  。。。）
   ：  。
   ：       ？（3  。。。）
   ：  。
   ：       ？（3  。。。）
   ：  。。

websocketは

です

  ：    ，      ！
  ：    。（1  。。）
  ：    。（10  。。）
  ：    ，     。
  ：  ，   ！

本文
1.websocketの作成
効果:ボタンをクリックして接続を確立し、ページが閉じると接続を閉じます.

コードは次のとおりです:

<template>
    <div>
        <button @click="initSocket">  websocket  button>
    div>
template>
<script>
    export default {
        data() {
            return {
                webSocket: null,
                url: '197.2.1.3:8088',
                types: '     '
            }
        },
        methods: {
            //     
            initSocket() {
                //        ：
                let url = `ws://${this.url}/${this.types}`
                //        :  
                // let url1 = 'ws://localhost:9998'
                this.webSocket = new WebSocket(url)
                this.webSocket.onopen = this.webSocketOnOpen
                this.webSocket.onclose = this.webSocketOnClose
                this.webSocket.onmessage = this.webSocketOnMessage
                this.webSocket.onerror = this.webSocketOnError

            },
            //           
            webSocketOnOpen() {
                console.log('websocket    ');
            },
            //           ，        onmessage   
            webSocketOnMessage(res) {
                // res            
                console.log(res);
                 //       
                this.webSocket.send("    ");
            },
            //     
            webSocketOnClose() {
                this.webSocket.close()
                console.log('websocket     ');
            },
            //       
            webSocketOnError(res) {
                console.log('websocket    ');
                //        
                console.log(res);
            }
        },
        created() {
            //          ，      
            this.initSocket()
        },
        destroyed() {
            //         
            this.webSocket.close()
        },
    }
script>

ライフサイクルが終了したときにwebsocket接続をオフにします.ビジネスが必要でない限り、メモリが消費されます.

destroyed() {
            //         
         this.webSocket.close()
 },

2.axiosポーリング
実現効果:ボタンをクリックして、ポーリングを確立して、3秒後に状態を判断して、成功して閉じて、失敗して引き続き要求を送信します.
ps:自体はポーリングを書きたいわけではありませんが、添付します~~結局、今のほとんどの方法はポーリングです.私の現在のプロジェクトはvueフレームワークの下にあるので、コードも基本的にvueで、オリジナルや他のフレームワークと似ています.

コード:

<template>
    <div>
        <button @click="getStatus">      button>
        <span>  ：{{status}}span>
    div>
template>
<script>
    export default {
        data() {
            return {
                status: ''
            }
        },
        computed: {
            //     
            statusData() { return this.status }
        },
        watch: {
            statusData: function (newval) {
                //              ,  3   
                if (newval == 'creating') {
                    var timer = setInterval(() => {
                        setTimeout(this.getStatus, 0)
                    }, 3000)
                }
                //             ,     ,    
                if (newval == 'success') {
                    clearInterval(timer)
                }
                //         ,    ,         ,
                //  $once(eventName, eventHandler)       
                this.$once('hook:boforeDestory', () => {
                    clearInterval(timer)
                })
            }
        },
        methods: {
            getStatus() {
                getStatusApi().then(res => {
                    if (res.status == 200) this.$message.error('    ')
                    this.status = res.data.status
                })
            }
        },
    }
script>

ヒント:

子供靴の質問があります:watchは直接statusを監視することができて、computedを使用しませんか?実はこのようにすべてできて、ただ私自身の書く習慣、私の習慣のこのような書き方の使用状況は:watchがオブジェクトの単一の属性の変化を傍受したいならば、深くすべて傍受しなくて、computedを中間品として転化して、対応する属性値を取ることができます.

またvueを知っている子供靴は、なぜbeforeDestoryにいないのか、閉じているのに、this.$once()でタイマーを閉じているのか、ルーティングジャンプのため、beforeDestoryをトリガーしないので、タイマーがクリアできません!

締めくくり
今日は締めくくりがあります!
もし本文があなたに役に立つならば、私にcallを打ってください~o(̄▽̄)do他の問題の伝言over~