Comment utiliser Websocket dans le projet Vue

À mesure que les applications Web deviennent de plus en plus complexes, la communication en temps réel avec le serveur est indispensable. C'est sur cette base que WebSocket a vu le jour.

WebSocket est une technologie qui crée un lien de communication bidirectionnel en temps réel entre un navigateur Web et un serveur Web. Dans les requêtes HTTP traditionnelles, le client initie la requête et le serveur répond ; mais dans WebSocket, le client et le serveur peuvent envoyer et recevoir des messages en même temps. Cela prend en charge la nature temps réel de nos applications Web.

Vue est actuellement l'un des frameworks front-end les plus populaires. Il offre un bon support pour la création de composants et la liaison de données. Dans le projet Vue, nous pouvons également utiliser WebSocket pour réaliser très facilement une communication en temps réel.

Utilisation de base de WebSocket

Pour utiliser WebSocket dans un projet Vue, nous devons introduire l'objet WebSocket. Les objets WebSocket peuvent être obtenus dans la fonction hook de cycle de vie de Vue.

Voici un exemple de base d'utilisation de WebSocket dans 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>

Dans l'exemple ci-dessus, nous avons créé l'objet WebSocket dans la fonction montée du composant Vue et défini la fonction de rappel à appeler lorsque la connexion WebSocket est réussie. De plus, une fonction de rappel est configurée pour être appelée lorsque le WebSocket reçoit un message, et le message est stocké dans la propriété data du composant Vue. Enfin, fermez la connexion WebSocket dans la fonction beforeDestroy du composant Vue.

Mise à jour en temps réel de WebSocket

Dans Vue, nous pouvons utiliser des propriétés calculées pour réaliser une mise à jour des données en temps réel. Par conséquent, il est très pratique d'utiliser des propriétés calculées dans nos composants Vue pour représenter les données reçues par WebSocket. Voici un exemple :

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

Dans l'exemple ci-dessus, nous utilisons la propriété calculée formattedMessages pour convertir le message reçu en majuscules et l'ajouter à une nouvelle propriété de données. Vue mettra automatiquement à jour la vue pour refléter ces modifications de données.

Conclusion

WebSocket fournit une méthode pratique et fiable pour établir une communication en temps réel dans les projets Vue. Dans le développement d'applications réelles, nous pouvons également utiliser d'autres bibliothèques, telles que Socket.io, pour nous aider à obtenir une communication WebSocket plus efficace.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!