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

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

WBOY

リリース： 2023-06-11 11:46:41

オリジナル

4588 人が閲覧しました

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

1. WebSocket の基礎知識

WebSocket の機能

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

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

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

#WebSocket の実装

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

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

2. Vue での WebSocket の使用

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

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

npm install vue-native-websocket --save

ログイン後にコピー

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

WebSocket プラグインの使用

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>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 サイトの他の関連記事を参照してください。