Cara menggunakan websocket dalam projek vue (langkah)

WebSocket ialah protokol untuk komunikasi dupleks penuh melalui satu sambungan TCP. Vue ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna. Menggabungkan WebSocket dan Vue boleh mencapai kesan komunikasi data masa nyata dan mengemas kini UI secara dinamik.

Dalam tutorial ini, kita akan belajar cara menggunakan WebSocket dalam aplikasi Vue.

Langkah 1: Pasang pustaka WebSocket

Gunakan npm atau benang untuk memasang pustaka WebSocket. Masukkan arahan berikut dalam terminal:

npm install vue-websocket

atau

yarn add vue-websocket

Vue-Websocket ialah klien WebSocket ringan untuk Vue.js yang membolehkan anda menyediakan WebSocket Connect, simpan dengan mudah peristiwa dalam komponen Vue, dan kosongkannya secara automatik apabila komponen itu dipasang.

Langkah 2: Buat tika WebSocket

Dalam komponen Vue, gunakan VueWS untuk mencipta tika WebSocket. Apabila mencipta komponen, gunakan cangkuk created atau mounted untuk membuat contoh WebSocket dan menyambung ke pelayan:

import VueWS from "vue-websocket";

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

Kami mencampurkan VueWS ke dalam komponen Vue, yang menyediakan connect() dan hantar () kaedah, dan panggilan balik onmessage().

Dalam contoh ini, kami menggunakan kaedah connect() untuk menyambung ke pelayan WebSocket dan lulus dua parameter, satu ialah alamat sambungan dan satu lagi ialah objek pilihan yang boleh digunakan untuk mengkonfigurasi sambungan WebSocket. Selain itu, kami mengisytiharkan kaedah handleData() dalam komponen Vue dan mencetak data untuk pemprosesan kemudian.

Langkah 3: Hantar mesej

Anda boleh menggunakan kaedah hantar() untuk menghantar mesej. Panggil kaedah send() dalam kaedah komponen Vue, menghantar data yang akan dihantar sebagai parameter:

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

Langkah 4: Tutup sambungan

Gunakan close() kaedah untuk menutup sambungan WebSocket:

this.close();

Langkah 5: Proses mesej yang diterima

Panggil onmessage(panggilan balik) untuk mendaftarkan pendengar, yang akan dipanggil apabila WebSocket menerima mesej:

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

Sebagai alternatif, gunakan kaedah handleData() untuk mengendalikan data yang diterima, seperti yang ditunjukkan dalam kod sampel.

Langkah 6: Contoh Lengkap

Berikut ialah contoh komponen Vue yang lengkap, yang termasuk menyambung ke pelayan WebSocket, menghantar dan menerima mesej dan menutup sambungan WebSocket selepas mencipta komponen:

<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>

Dalam contoh ini, kami menggunakan pemalam VueWS untuk mencipta contoh WebSocket dan menggunakan kaedah connect() untuk menyambung ke pelayan WebSocket selepas komponen dibuat. Kami telah menentukan beberapa kaedah dalam komponen Vue, seperti handleData(), yang mempunyai parameter data untuk memproses data yang diterima.

Kaedah sendMessage() digunakan untuk menghantar mesej, dan kaedah closeConnection() digunakan untuk menutup sambungan WebSocket. Kami juga mentakrifkan pembolehubah mesej untuk memaparkan mesej yang diterima pada komponen Vue.

Dalam templat Vue, kami menggunakan arahan {{message}} untuk memaparkan mesej yang diterima.

Ringkasan

Menggunakan Vue-Websocket, aplikasi Vue boleh berkomunikasi dengan pelayan dalam masa nyata melalui protokol WebSocket Ini adalah cara yang sangat berkesan untuk melaksanakan aliran data dua hala dan mengemas kini UI dalam masa nyata. Menggunakan Vue-Websocket untuk membina aplikasi Vue akan menjadikan pemprosesan perniagaan lebih cekap.

Atas ialah kandungan terperinci Cara menggunakan websocket dalam projek vue (langkah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!