WebSocket を使用して Vue でリアルタイム通信を実現する方法

Vue は、動的なユーザー インターフェイスとシングルページ アプリケーションを構築するための人気のある JavaScript フレームワークです。 WebSocket は、リアルタイム通信のための TCP プロトコルに基づくネットワーク ツールです。 Vue で WebSocket を組み合わせることで、リアルタイムのデータ送信を実現し、フロントエンド アプリケーションとバックエンド間のリアルタイム通信を促進できます。この記事では、VueとWebSocketを使ってリアルタイム通信を実現する方法を紹介します。

1. WebSocket の基礎知識

1. WebSocket の機能

WebSocket は、次の特徴を持つ全二重、長時間接続のプロトコルです。

##双方向通信: クライアントとサーバーの両方が情報を送信できます。
• リアルタイム通信: サーバーに定期的にリクエストする必要はなく、サーバーは情報をクライアントにアクティブにプッシュできます。
• 低遅延: WebSocket はデータ送信遅延が小さく、データ送信効率が高くなります。
• スケーラビリティ: WebSocket で使用される HTTP プロトコルはハンドシェイク プロトコルであり、RESTful 仕様に従います。

WebSocket の使用シナリオ

WebSocket は主に、チャット ルームやオンライン ゲームなど、サーバーがリアルタイム情報をクライアントにプッシュするシナリオで使用されます。 、リアルタイム株価など。

#WebSocket の実装

3. WebSocket は、サーバーとクライアントの間に TCP 接続を確立することで双方向通信を実現します。通信プロセスは次のとおりです:

まず、クライアントはサーバーにリクエストを送信します。リクエスト ヘッダーには Upgrade フィールドと Connection フィールドが含まれており、プロトコルをアップグレードし、WebSocket を使用して接続するようにサーバーに指示します。リクエストを受信したサーバーは、接続が正常に確立されたことを示すステータス コード 101 Switching Protocols と Upgrade ヘッダー フィールドを含む応答メッセージを返します。両者が正常に接続されると、相互に情報を送信できるようになりますが、どちらかが接続を終了すると、TCP 接続は中断されます。

2. Vue での WebSocket の使用

WebSocket ライブラリのインストール

1. Vue で WebSocket を使用するには、対応するライブラリをインストールする必要があります。 Vue.js の WebSocket プラグインである vue-native-websocket プラグインを使用できます。インストール方法は以下の通りです。

npm install vue-native-websocket --save

このうち --save オプションは、プラグインを依存関係として package.json ファイルに保存することを意味します。

WebSocket プラグインの使用

2. インストールが完了したら、Vue インスタンスで WebSocket を有効にする必要があります。 Vue の main.js ファイルでは、次のように設定できます。

import VueNativeSock from 'vue-native-websocket'

Vue.use(VueNativeSock, 'ws://localhost:3000', {
  store: store, //将store注入到VueNativeSock实例中，使其能够访问store中的state和action。
  format: 'json', //设置数据格式为JSON
  reconnection: true, //断开连接时自动重新连接
  reconnectionAttempts: 5, //重新连接的最大尝试次数
  reconnectionDelay: 3000, //重新连接的时间间隔
})

上記のコードは、WebSocket プラグインを Vue のプラグインとして使用します。このうち、最初のパラメータは WebSocket 接続の URL、2 番目のパラメータは設定オブジェクトです。データを JSON 形式でフォーマットしたり、自動再接続を有効にしたりするなど、いくつかのオプションを設定しました。

次に、Vue コンポーネントで WebSocket インスタンスを定義して、リアルタイム通信機能を実装します。たとえば、WebSocketExample という名前の Vue コンポーネントを次のように定義できます。

<template>
  <div>
    <h1 id="WebSocketExample">WebSocketExample</h1>
    <div>
      <input type="text" v-model="message" placeholder="input message" />
      <button @click="send">Send</button>
    </div>
    <ul>
      <li v-for="msg in messages" :key="msg.id">{{msg.text}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'WebSocketExample',
  data() {
    return {
      message: '',
      messages: [],
    }
  },
  methods: {
    send() {
      this.$socket.send(
        JSON.stringify({
          message: this.message,
        })
      )
      //清空输入框
      this.message = ''
    },
  },
  mounted() {
    this.$socket.onMessage((msg) => {
      console.log('Received:', msg.data)
      const message = JSON.parse(msg.data)
      this.messages.push({
        id: Math.random()
          .toString()
          .slice(2),
        text: message.message,
      })
    })
  },
}
</script>

上記のコードでは、テキスト ボックスとリストを含む Vue コンポーネントを定義し、テキスト ボックスに情報を入力して送信します。情報をリストに表示します。コンポーネントがロードされた後、mounted() 関数を使用して WebSocket メッセージ イベントのリッスンを開始し、受信したメッセージをメッセージ配列に保存し、トラバースしてページに表示します。

main.js ファイルでストアを構成した後、VueNativeSock インスタンスでストアのメソッドとステータス データを使用できるようになります。たとえば、メソッド内で this.$store.dispatch() メソッドを使用してアクションを送信したり、 this.$store.state を使用して mount() 内の状態データにアクセスしたりできます。

3. 概要

Vue と WebSocket を組み合わせることで、フロントエンドとバックエンド間のリアルタイム通信を簡単に実現できます。 Vue の vue-native-websocket プラグインを使用して WebSocket 接続を実装し、簡単なチャット ルームの例を実装します。 Vue と WebSocket を組み合わせることで、リアルタイム アプリケーションを迅速に構築し、リアルタイムのデータ送信を実現できます。

以上がWebSocket を使用して Vue でリアルタイム通信を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。