Bagaimana untuk menggunakan websocket dalam projek vue

Apabila aplikasi web menjadi semakin kompleks, komunikasi masa nyata dengan pelayan adalah satu kemestian. Berdasarkan ini, WebSocket wujud.

WebSocket ialah teknologi yang mencipta pautan komunikasi dua hala masa nyata antara penyemak imbas web dan pelayan web. Dalam permintaan HTTP tradisional, pelanggan memulakan permintaan dan pelayan bertindak balas tetapi dalam WebSocket, pelanggan dan pelayan boleh menghantar dan menerima mesej pada masa yang sama. Ini memberikan sokongan untuk sifat masa nyata aplikasi web kami.

Vue ialah salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini. Ia menyediakan sokongan yang baik untuk pengkomponenan dan pengikatan data. Dalam projek Vue, kami juga boleh menggunakan WebSocket untuk mencapai komunikasi masa nyata dengan mudah.

Penggunaan asas WebSocket

Untuk menggunakan WebSocket dalam projek Vue, kita perlu memperkenalkan objek WebSocket. Objek WebSocket boleh diperolehi dalam fungsi cangkuk kitaran hayat Vue.

Berikut ialah contoh asas menggunakan WebSocket dalam Vue:

<template>
    <div>
        <h1>WebSocket Demo</h1>
        <p v-for="msg in messages">{{msg.text}}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            socket: null,
            messages: []
        }
    },
    mounted() {
        this.socket = new WebSocket('ws://localhost:8080');
        this.socket.onopen = () => {
            console.log('WebSocket connected');
        };
        this.socket.onmessage = event => {
            const message = JSON.parse(event.data);
            this.messages.push(message);
        };
    },
    beforeDestroy() {
        this.socket.close();
    }
}
</script>

Dalam contoh di atas, kami mencipta objek WebSocket dalam fungsi terpasang komponen Vue dan menetapkan nilai apabila WebSocket Fungsi panggil balik dipanggil apabila sambungan berjaya. Selain itu, fungsi panggil balik disediakan untuk dipanggil apabila WebSocket menerima mesej, dan mesej itu disimpan dalam sifat data komponen Vue. Akhir sekali, tutup sambungan WebSocket dalam fungsi beforeDestroy komponen Vue.

Kemas kini masa nyata WebSocket

Dalam Vue, kami boleh menggunakan sifat yang dikira untuk mencapai kemas kini data masa nyata. Oleh itu, adalah sangat mudah untuk menggunakan sifat yang dikira dalam komponen Vue kami untuk mewakili data yang diterima oleh WebSocket. Berikut ialah contoh:

<template>
    <div>
        <h1>WebSocket Demo</h1>
        <p v-for="msg in messages">{{msg.text}}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            socket: null,
            messages: []
        }
    },
    mounted() {
        this.socket = new WebSocket('ws://localhost:8080');
        this.socket.onopen = () => {
            console.log('WebSocket connected');
        };
        this.socket.onmessage = event => {
            const message = JSON.parse(event.data);
            this.messages.push(message);
        };
    },
    beforeDestroy() {
        this.socket.close();
    },
    computed: {
        formattedMessages() {
            return this.messages.map(msg => {
                return {
                    text: msg.text.toUpperCase()
                }
            })
        }
    }
}
</script>

Dalam contoh di atas, kami menggunakan sifat dikira formattedMessages untuk menukar mesej yang diterima kepada huruf besar dan menambahkannya pada sifat data baharu. Vue akan mengemas kini paparan secara automatik untuk mencerminkan perubahan data ini.

Kesimpulan

WebSocket menyediakan kaedah yang mudah dan boleh dipercayai untuk mencapai komunikasi masa nyata dalam projek Vue. Dalam pembangunan aplikasi sebenar, kami juga boleh menggunakan perpustakaan lain, seperti Socket.io, untuk membantu kami mencapai komunikasi WebSocket yang lebih cekap.

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