Comment utiliser WebSocket pour établir une communication en temps réel dans Vue

Vue est un framework JavaScript populaire pour créer des interfaces utilisateur dynamiques et des applications à page unique. WebSocket est un outil réseau basé sur le protocole TCP pour la communication en temps réel. La combinaison de WebSocket dans Vue peut réaliser une transmission de données en temps réel et promouvoir la communication en temps réel entre les applications frontales et back-end. Cet article expliquera comment utiliser Vue et WebSocket pour établir une communication en temps réel.

1. Connaissance de base de WebSocket

1. Fonctionnalités de WebSocket

WebSocket est un connexion durable Le protocole présente les caractéristiques suivantes :

• Communication bidirectionnelle : le client et le serveur peuvent envoyer des informations.
• Communication en temps réel : Il n'est pas nécessaire de demander régulièrement au serveur, le serveur peut activement transmettre des informations au client.
• Latence plus faible : WebSocket a un délai de transmission de données plus faible et une efficacité de transmission de données plus élevée.
• Évolutivité : WebSocket utilise le protocole HTTP comme protocole de prise de contact et suit la spécification RESTful.

2. Scénarios d'utilisation de WebSocket

WebSocket est principalement utilisé dans des scénarios où le serveur transmet des informations en temps réel au client, tels que les salons de discussion, les jeux en ligne, les cotations boursières en temps réel, etc.

3. Implémentation de WebSocket

WebSocket réalise une communication bidirectionnelle en établissant une connexion TCP entre le serveur et le client. Le processus de communication est le suivant. :# 🎜🎜#

Tout d'abord, le client envoie une requête au serveur. L'en-tête de la requête contient les champs Mise à niveau et Connexion, indiquant au serveur de mettre à niveau le protocole et d'utiliser WebSocket pour se connecter. Après avoir reçu la demande, le serveur renvoie un message de réponse. La réponse contient le code d'état 101 Switching Protocols et un champ d'en-tête Upgrade, indiquant que la connexion a été établie avec succès. Une fois que les deux parties sont connectées avec succès, elles peuvent s'envoyer des informations et lorsque l'une des parties met fin à la connexion, la connexion TCP est interrompue.

2. Utiliser WebSocket dans Vue

Installer la bibliothèque WebSocket

L'utilisation de WebSocket dans Vue nécessite l'installation du correspondant bibliothèque . Nous pouvons utiliser le plug-in vue-native-websocket, qui est un plug-in WebSocket pour Vue.js. La méthode d'installation est la suivante :

npm install vue-native-websocket --save

Parmi elles, l'option --save signifie enregistrer le plug-in en tant que dépendance dans le fichier package.json.

Utiliser le plug-in WebSocket

Une fois l'installation terminée, nous devons activer WebSocket dans l'instance Vue. Dans le fichier main.js de Vue, nous pouvons le configurer comme ceci :

import VueNativeSock from 'vue-native-websocket'

Vue.use(VueNativeSock, 'ws://localhost:3000', {
  store: store, //将store注入到VueNativeSock实例中，使其能够访问store中的state和action。
  format: 'json', //设置数据格式为JSON
  reconnection: true, //断开连接时自动重新连接
  reconnectionAttempts: 5, //重新连接的最大尝试次数
  reconnectionDelay: 3000, //重新连接的时间间隔
})

Le code ci-dessus utilise le plug-in WebSocket comme plug-in Vue. Parmi eux, le premier paramètre est l'URL de la connexion WebSocket et le deuxième paramètre est un objet de configuration. Nous avons défini certaines options, comme le formatage des données au format JSON, l'activation de la reconnexion automatique, etc.

Ensuite, nous pouvons définir une instance WebSocket dans le composant Vue pour implémenter une fonctionnalité de communication en temps réel. Par exemple, nous pouvons définir un composant Vue nommé WebSocketExample comme ceci :

<template>
  <div>
    <h1>WebSocketExample</h1>
    <div>
      <input type="text" v-model="message" placeholder="input message" />
      <button @click="send">Send</button>
    </div>
    <ul>
      <li v-for="msg in messages" :key="msg.id">{{msg.text}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'WebSocketExample',
  data() {
    return {
      message: '',
      messages: [],
    }
  },
  methods: {
    send() {
      this.$socket.send(
        JSON.stringify({
          message: this.message,
        })
      )
      //清空输入框
      this.message = ''
    },
  },
  mounted() {
    this.$socket.onMessage((msg) => {
      console.log('Received:', msg.data)
      const message = JSON.parse(msg.data)
      this.messages.push({
        id: Math.random()
          .toString()
          .slice(2),
        text: message.message,
      })
    })
  },
}
</script>

Dans le code ci-dessus, nous définissons un composant Vue contenant une zone de texte et une liste, saisissons des informations via la zone de texte et l'envoyons , puis affiche les informations dans la liste. Nous utilisons la fonction Mounted() pour commencer à écouter les événements de message WebSocket après le chargement du composant, enregistrer les messages reçus dans le tableau de messages, puis les parcourir et les afficher sur la page.

Après avoir configuré le magasin dans le fichier main.js, nous pouvons utiliser les méthodes et les données d'état du magasin dans l'instance VueNativeSock. Par exemple, vous pouvez utiliser la méthode this.$store.dispatch() dans les méthodes pour envoyer des actions, et vous pouvez utiliser this.$store.state pour accéder aux données d'état dans Mounted().

3. Résumé

La combinaison de Vue et WebSocket peut facilement réaliser une communication en temps réel entre le front-end et le back-end. Nous utilisons le plug-in vue-native-websocket dans Vue pour implémenter la connexion WebSocket et implémentons un exemple simple de salle de discussion. Grâce à la combinaison de Vue et WebSocket, nous pouvons rapidement créer des applications en temps réel et réaliser une transmission de données en temps réel.

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!