VueはWebSocketを通じて、長い接続の実現コードを確立します。

使用シーン:
プロジェクト開発では、バックエンドは一連のロジックを処理したり、第三者のデータが戻ってくるのを待って処理してからフロントエンドに戻ると、時間が長くなります。また、フロントエンドもバックエンドがいつ処理されるか分かりません。面倒な時はポーリングの仕組みが必要かもしれませんので、WebSocketを使って接続したほうがいいです。
使用時間:
インタフェースのロードが完了したら、WebSocket接続を構築し、この時、フロントエンドは通常のHTTPの要求を送信し、バックエンド処理が完了するまで、確立したWebSocket接続でフロントエンドに戻り、バックエンドのデータに応じて、対応する操作を行うことができます。
コードの展示:

<template>
</template>
<script>
export default {
 data() {
  return{
   //   Id
   userId:'',
   appid:'',
   //     
   type:'',
   msg:'',
   wsUrl:''
  }  
 },
 methods: {
  //   weosocket
  initWebSocket() {
   if (typeof WebSocket === "undefined") {
    alert("        WebSocket");
    return false;
   }
   const wsuri = 'ws://(  WebSocket  )/websocket/' + this.userId + '/' + this.appid // websocket  
   this.websock = new WebSocket(wsuri);
   this.websock.onopen = this.websocketonopen;
   this.websock.onmessage = this.websocketonmessage;
   this.websock.onerror = this.websocketonerror;
   this.websock.onclose = this.websocketclose;
  },
  //    
  websocketonopen() {
   console.log("WebSocket    ");
   //       ， 30      ，      （          ，                     ，         ）
   let self = this;
   this.timer = setInterval(() => {
    try {
     self.websock.send('test')
     console.log('    ');
    }catch(err){
     console.log('   ：' + err);
     self.connection()
    }
   }, 30000)
  },
  //         ，          
  websocketonmessage(e) {
   var vm = this;
   let data1Json = JSON.parse(e.data);
   console.log(data1Json);
  },
  //        
  websocketonerror(e) {
   console.log(`       ：`, e);
   this.initWebSocket(); //            
  },
  //    
  websocketclose(e) {
   console.log("    ", e);
  }
 },
 created() {
  if (this.websock) {
   this.websock.close(); //   websocket  
  }
  this.initWebSocket();
 },
 destroyed() {
  //       ws  
  if (this.websock) {
   this.websock.close(); //   websocket
  }
 }
};
</script>

問題の回顧:
実際に使う時に発生した問題：ページリンクが確立されていない場合もありますが、バックエンドはすでにデータを処理しました。この時は先端に押して、フロントエンドは受信できません。
ソリューション:
1）簡単な方法：バックエンドを数秒遅らせてから押す
利点：簡単
劣勢：性能を下げた
2）最適化後の方法：Redisを使ってユーザーの登録状態を保存し、このユーザーのデータをキャッシュし、接続を確立してから押すと、押し終わったらRedisをクリアする。
締め括りをつける
以上は、WebSocketを通じて、Websocketを通じて、長い接続を実現するコードです。皆さんに助けてほしいです。もし何か質問があれば、メッセージをください。編集はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。