Comment utiliser Websocket dans le projet Vue (étapes)

WebSocket est un protocole de communication full-duplex sur une seule connexion TCP. Vue est un framework JavaScript populaire pour créer des interfaces utilisateur. La combinaison de WebSocket et de Vue peut obtenir les effets de la communication de données en temps réel et de la mise à jour dynamique de l'interface utilisateur.

Dans ce tutoriel, nous apprendrons comment utiliser WebSocket dans une application Vue.

Étape 1 : Installer la bibliothèque WebSocket

Utilisez npm ou Yarn pour installer la bibliothèque WebSocket. Entrez la commande suivante dans le terminal :

npm install vue-websocket

ou

yarn add vue-websocket

Vue-Websocket est un client WebSocket léger pour Vue.js qui vous permet d'établir facilement des connexions WebSocket, de stocker des événements dans les composants Vue et d'être automatiquement effacé lorsque le composant est monté. .

Étape 2 : Créer une instance WebSocket

Dans le composant Vue, utilisez VueWS pour créer une instance WebSocket. Lorsque le composant est créé, utilisez le hook created或者mounted pour instancier WebSocket et vous connecter au serveur :

import VueWS from "vue-websocket";

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

Nous avons mélangé VueWS dans le composant Vue, qui fournit les méthodes connect() et send(), ainsi qu'un rappel onmessage() .

Dans cet exemple, nous utilisons la méthode connect() pour nous connecter au serveur WebSocket et transmettre deux paramètres, l'un est l'adresse de connexion et l'autre est un objet d'options qui peut être utilisé pour configurer la connexion WebSocket. De plus, nous avons déclaré la méthode handleData() dans le composant Vue et imprimé les données pour un traitement ultérieur.

Étape 3 : Envoyer un message

Vous pouvez utiliser la méthode send() pour envoyer un message. Appelez la méthode send() dans la méthode du composant Vue en passant les données à envoyer en paramètre :

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

Étape 4 : Fermez la connexion

Utilisez la méthode close() pour fermer la connexion WebSocket :

this.close();

Étape 5 : Traitez le message reçu

Call onmessage(callback) pour enregistrer un écouteur qui sera appelé lorsque WebSocket recevra un message :

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

Vous pouvez également utiliser la méthode handleData() pour traiter les données reçues, comme indiqué dans l'exemple code.

Étape 6 : Exemple complet

Vous trouverez ci-dessous un exemple complet de composant Vue, qui inclut la connexion au serveur WebSocket, l'envoi et la réception de messages et la fermeture de la connexion WebSocket après la création du composant :

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

Dans cet exemple, nous utilisons le Plugin VueWS Créez une instance WebSocket et utilisez la méthode connect() pour vous connecter au serveur WebSocket après la création du composant. Nous avons défini certaines méthodes dans le composant Vue, telles que handleData(), qui possède un paramètre data pour traiter les données reçues.

La méthode sendMessage() est utilisée pour envoyer des messages, tandis que la méthode closeConnection() est utilisée pour fermer la connexion WebSocket. Nous définissons également une variable de message pour afficher le message reçu sur le composant Vue.

Dans le modèle Vue, nous utilisons la directive {{message}} pour afficher le message reçu.

Résumé

En utilisant Vue-Websocket, les applications Vue peuvent communiquer avec le serveur en temps réel via le protocole WebSocket. Il s'agit d'un moyen très efficace d'implémenter un flux de données bidirectionnel et de mettre à jour l'interface utilisateur en temps réel. L'utilisation de Vue-Websocket pour créer des applications Vue rendra le traitement métier 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!