Vue は Websocket カスタマー サービス チャット機能を実装します

'@/store' からストアをインポートします
var webSocket = null;
var globalCallback = null; //外部データ受信用のコールバック関数を定義する //WebSocketを初期化する
エクスポート関数 initWebSocket (url) {
  // ブラウザがWebSocketをサポートしているかどうかを判定する
  if (ウィンドウ内に「WebSocket」がある場合) {
    webSocket = new WebSocket(url); //ソケットオブジェクトを作成する } else {
    alert("このブラウザはWebSocketをサポートしていません!");
  }
  // 開く webSocket.onopen = function () {
    webSocket を開きます。
  };
  //メールを受信するwebSocket.onmessage = function (msg) {
    webSocketOnMessage(メッセージ);
  };
  //閉じる webSocket.onclose = function () {
    webSocket を閉じる();
  };
  //接続エラー発生時のコールバックメソッド webSocket.onerror = function () {
    console.log("WebSocket接続エラー");
  };
}

//接続ソケットが確立されたときにトリガーする export function webSocketOpen () {
  console.log("WebSocket接続が成功しました");
}

//クライアントがサーバーからデータを受信したときにトリガーされます。eは受信したデータオブジェクトです。エクスポート関数webSocketOnMessage(e) {
  // ストアに保存し、チャットインターフェースの変更を監視して、受信した情報を自動的に取得します store.commit('user/SET_WS_MSG', e)
}

//データエクスポート関数webSocketSend(data)を送信{
  console.log('データを送信');
  //ここで必要に応じてデータ形式を変換します webSocket.send(JSON.stringify(data));
}

//ソケットを閉じる
エクスポート関数webSocketClose() {
  webSocket.close()
  console.log("会話接続が閉じられました");
  // }
}


//データの送受信にソケットが必要な他の場所で呼び出される関数 export function sendSock (agentData, callback) {
  globalCallback = callback; //このコールバックは、他の場所で呼び出されたときに定義されるソケットデータを受信するための関数であり、非常に重要です。
  //以下の判断は主にソケット接続の中断やその他の要因の可能性に基づいており、メッセージを再送信できます。
  スイッチ (webSocket.readyState) {
    //CONNECTING: 値は 0 で、接続中であることを示します。
    webSocket.CONNECTINGの場合:
      setTimeout(関数() {
        console.log('接続中...');
        webSocketSend(エージェントデータ、コールバック);
      }, 1000);
      壊す;
    //OPEN: 値は 1 で、接続が成功し、通信が可能であることを示します。
    webSocket.OPENの場合:
      console.log('接続に成功しました');
      webSocketSend(エージェントデータ);
      壊す;
    //CLOSING: 値は 2 で、接続が閉じていることを示します。
    webSocket.CLOSINGの場合:
      setTimeout(関数() {
        console.log('接続を閉じています');
        webSocketSend(エージェントデータ、コールバック);
      }, 1000);
      壊す;
    //CLOSED: 値は 3 で、接続が閉じられたか、接続の開始に失敗したことを示します。
    webSocket.CLOSEDの場合:
      console.log('接続が閉じられました/開けませんでした');
      // 何かをする
      壊す;
    デフォルト：
      // これは決して起こりません
      壊す;
  }
}

//ソケット初期化関数、データ送信（受信）関数、接続終了関数をエクスポートします。export default {
  WebSocketの初期化、
  webSocketClose、
  送信Sock
};

状態 = {
 webSocketメッセージ: ''
};

//状態を変更する
const 変異 = {
    //Websocketによってプッシュされたメッセージを保存する SET_WS_MSG: (state, msg) => {
        state.webSocketMsg = メッセージ
    }
}
// ミューテーションを送信します。 acceptブロックに問題がある場合は、これを追加して//const actions = {を確認してください。
 // webSockets ({ コミット }) {
 // コミット('SET_WS_MSG', 2)
 // }
//

//状態を取得する const getters = {
    webSocketMsg: 状態 => state.user.webSocketMsg
}

デフォルトのゲッターをエクスポートする

<スクリプト>
'@/utils/websocket.js' から { initWebSocket、sendSock、webSocketClose } をインポートします。
エクスポートデフォルト{
  データ（） {
    戻る {
     // このアドレスはバックエンドによって提供され、Websocket に接続するために使用されます。 暗号化されたwss 暗号化されていないws
      wsUrl:'ws://アドレス',
    }
  },
  // ストアから受信した情報を取得します。計算: {
    getSocketMsg() {
      this.$store.state.user.webSocketMsg を返します
    },
  },
  //getSocketMsgを監視して、データを受信したかどうかを確認します。watch: {
    ソケットメッセージの取得: {
      ハンドラ: 関数 (val) {
        this.getConfigResult(val)
      },
    },
    // このステップはチャット ボックスの CSS デザインです。これを記述する必要はありません。必要なときに参照できます。
    // 受信メッセージと送信メッセージを obList に保存し、値の変化を監視してチャットの位置を一番下に保ちます (CSS では overflow: auto;)
    オブリスト: {
      ハンドラ: 関数 (val) {
        this.$nextTick(() => {
          this.$refs.chatContent.scrollTop = this.$refs.chatContent.scrollHeight
        })
      },
    },
    即時: true、
  },
  メソッド: {
    // ボタンをクリックしてチャット接続を確立します customerDialog() {
      WebSocket を初期化します(this.wsUrl)
    },
    // データを返すソケットコールバック関数を受信するためのメソッド。この関数は、受信したデータを監視するときに呼び出されます（上記のウォッチ内）
    getConfigResult(val) { },

 // 送信ボタンをクリックしてメッセージを送信します---送信するメッセージの形式はバックエンドで確認する必要があります sending() {
      sendSock('メッセージを送信しました')
    },
    // チャットボックスの終了イベントを処理する handleClose() {
     //接続を閉じる webSocketClose()
    },
  },
}
</スクリプト>