Vue プロジェクトで WebSocket を使用する方法 (手順)

WebSocket は、単一の TCP 接続を介した全二重通信用のプロトコルです。 Vue は、ユーザー インターフェイスを構築するための人気のある JavaScript フレームワークです。 WebSocket と Vue を組み合わせることで、リアルタイムのデータ通信と UI の動的更新の効果を実現できます。

このチュートリアルでは、Vue アプリケーションで WebSocket を使用する方法を学びます。

ステップ 1: WebSocket ライブラリをインストールする

npm または Yarn を使用して、WebSocket ライブラリをインストールします。ターミナルで次のコマンドを入力します:

npm install vue-websocket

または

yarn add vue-websocket

Vue-Websocket は、WebSocket 接続を簡単に確立し、Vue に保存されたイベントを転送できる、Vue.js 用の軽量 WebSocket クライアントです。コンポーネントがマウントされ、コンポーネントがマウントされると自動的にクリアされます。

ステップ 2: WebSocket インスタンスを作成する

Vue コンポーネントで、VueWS を使用して WebSocket インスタンスを作成します。コンポーネントが作成されたら、created または mounted フックを使用して WebSocket をインスタンス化し、サーバーに接続します。

import VueWS from "vue-websocket";

export default{
    name: "WebSocketDemo",
    mixins: [VueWS],
    created() {
        this.connect();
    },
    methods: {
        handleData(data) {
            console.log(data);
        }
    }
}

VueWS を Vue コンポーネントに混合しました。 connect() メソッドと send() メソッド、および onmessage() コールバックがあります。

この例では、connect() メソッドを使用して WebSocket サーバーに接続し、2 つのパラメーターを渡します。1 つは接続アドレスで、もう 1 つは WebSocket の構成に使用できるオプション オブジェクトです。繋がり。さらに、Vue コンポーネントで handleData() メソッドを宣言し、後の処理のためにデータを出力しました。

ステップ 3: メッセージを送信する

send() メソッドを使用してメッセージを送信できます。 Vue コンポーネントのメソッドで send() メソッドを呼び出し、送信するデータをパラメータとして渡します。

this.send("Hello, world!");

ステップ 4: 接続を閉じる

close() メソッドを使用して、 WebSocket 接続を閉じます:

this.close();

ステップ 5: 受信したメッセージを処理します

onmessage(callback) を呼び出してリスナーを登録します。リスナーは、WebSocket がメッセージを受信したときに呼び出されます:

this.onmessage = function (event) {
    console.log(event.data);
};

または、サンプル コードに示すように、handleData( ) メソッドを使用して、受信したデータを処理します。

ステップ 6: 完全な例

これは、WebSocket サーバーへの接続、メッセージの送受信、コンポーネント作成後の WebSocket 接続の終了を含む完全な Vue コンポーネントの例です。

<script>
import VueWS from "vue-websocket";

export default {
    name: "WebSocketDemo",
    mixins: [VueWS],
    created() {
        this.connect("ws://localhost:8080");
    },
    data() {
        return {
            message: ""
        };
    },
    methods: {
        handleData(data) {
            this.message = data;
        },
        sendMessage() {
            this.send(&quot;Hello, world!&quot;);
        },
        closeConnection() {
            this.close();
        }
    }
};
</script>

この例では、VueWS プラグインを使用して WebSocket インスタンスを作成し、コンポーネントの作成後に connect() メソッドを使用して WebSocket サーバーに接続します。 Vue コンポーネントには、受信したデータを処理するためのデータ パラメーターを持つ handleData() などのいくつかのメソッドが定義されています。

sendMessage() メソッドはメッセージの送信に使用され、closeConnection() メソッドは WebSocket 接続を閉じるために使用されます。また、受信したメッセージを Vue コンポーネントに表示するためのメッセージ変数も定義します。

Vue テンプレートでは、{{message}} ディレクティブを使用して、受信したメッセージを表示します。

概要

Vue-Websocket を使用すると、Vue アプリケーションは WebSocket プロトコルを通じてリアルタイムでサーバーと通信できます。これは、双方向のデータ フローを実装し、リアルタイムのUIです。 Vue-Websocket を使用して Vue アプリケーションを構築すると、ビジネス処理がより効率的になります。

以上がVue プロジェクトで WebSocket を使用する方法 (手順)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。