So verwenden Sie WebSocket, um Echtzeitkommunikation in Vue zu erreichen

Vue ist ein beliebtes JavaScript-Framework zum Erstellen dynamischer Benutzeroberflächen und Single-Page-Anwendungen. WebSocket ist ein Netzwerktool, das auf dem TCP-Protokoll für Echtzeitkommunikation basiert. Durch die Kombination von WebSocket in Vue kann eine Datenübertragung in Echtzeit erreicht und die Echtzeitkommunikation zwischen Front-End-Anwendungen und Back-End gefördert werden. In diesem Artikel wird erläutert, wie Sie mithilfe von Vue und WebSocket eine Echtzeitkommunikation erreichen.

1. Grundkenntnisse von WebSocket

1. Eigenschaften von WebSocket

WebSocket ist ein Vollduplex-Protokoll mit langer Verbindung:

• Zwei-Wege-Kommunikation: Sowohl der Client als auch der Server können Informationen senden.
• Echtzeitkommunikation: Es ist nicht erforderlich, den Server regelmäßig anzufordern, der Server kann Informationen aktiv an den Client weiterleiten.
• Geringere Latenz: Die Datenübertragungsverzögerung von WebSocket ist gering und die Datenübertragungseffizienz relativ hoch.
• Skalierbarkeit: WebSocket verwendet das HTTP-Protokoll als Handshake-Protokoll und folgt der RESTful-Spezifikation.

2. WebSocket-Nutzungsszenarien

WebSocket wird hauptsächlich in Szenarien verwendet, in denen der Server Echtzeitinformationen an den Client überträgt, z. B. Chatrooms, Online-Spiele, Echtzeit-Börsenkurse usw.

3. Wie WebSocket implementiert wird

WebSocket erreicht eine bidirektionale Kommunikation durch den Aufbau einer TCP-Verbindung zwischen dem Server und dem Client. Der Kommunikationsprozess ist wie folgt:

Zuerst sendet der Client eine Anfrage an den Server. Der Anforderungsheader enthält die Felder „Upgrade“ und „Verbindung“, die den Server anweisen, das Protokoll zu aktualisieren und WebSocket für die Verbindung zu verwenden. Nach Erhalt der Anfrage gibt der Server eine Antwortnachricht zurück. Die Antwort enthält den Statuscode 101 Switching Protocols und ein Upgrade-Header-Feld, das angibt, dass die Verbindung erfolgreich hergestellt wurde. Nachdem die beiden Parteien erfolgreich verbunden wurden, können sie sich gegenseitig Informationen senden. Wenn eine Partei die Verbindung beendet, wird die TCP-Verbindung unterbrochen.

2. Verwenden von WebSocket in Vue

1. Installieren Sie die WebSocket-Bibliothek

Für die Verwendung von WebSocket in Vue ist die Installation der entsprechenden Bibliothek erforderlich. Wir können das vue-native-websocket-Plug-in verwenden, ein WebSocket-Plug-in für Vue.js. Die Installationsmethode ist wie folgt:

npm install vue-native-websocket --save

Unter anderem bedeutet die Option --save, das Plug-in als Abhängigkeit in der Datei package.json zu speichern.

2. Verwenden des WebSocket-Plug-Ins

Nachdem die Installation abgeschlossen ist, müssen wir WebSocket in der Vue-Instanz aktivieren. In der main.js-Datei von Vue können wir es wie folgt konfigurieren:

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, //重新连接的时间间隔
})

Der obige Code verwendet das WebSocket-Plug-in als Plug-in für Vue. Dabei ist der erste Parameter die URL der WebSocket-Verbindung und der zweite Parameter ein Konfigurationsobjekt. Wir haben einige Optionen festgelegt, z. B. das Formatieren von Daten im JSON-Format, das Aktivieren der automatischen Wiederverbindung usw.

Als nächstes können wir eine WebSocket-Instanz in der Vue-Komponente definieren, um Echtzeit-Kommunikationsfunktionen zu implementieren. Beispielsweise können wir eine Vue-Komponente mit dem Namen WebSocketExample wie folgt definieren:

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

Im obigen Code definieren wir eine Vue-Komponente, die ein Textfeld und eine Liste enthält, geben Informationen über das Textfeld ein, senden sie und zeigen die Informationen dann an in der Liste. Wir verwenden die Funktion mount(), um nach dem Laden der Komponente mit dem Abhören von WebSocket-Nachrichtenereignissen zu beginnen, die empfangenen Nachrichten im Nachrichtenarray zu speichern und sie dann zu durchlaufen und auf der Seite anzuzeigen.

Nachdem wir den Store in der Datei main.js konfiguriert haben, können wir die Methoden und Statusdaten des Stores in der VueNativeSock-Instanz verwenden. Beispielsweise können Sie die Methode this.$store.dispatch() in Methoden zum Senden von Aktionen verwenden, und Sie können this.$store.state verwenden, um in mount() auf Statusdaten zuzugreifen.

3. Zusammenfassung

Durch die Kombination von Vue und WebSocket kann problemlos eine Echtzeitkommunikation zwischen dem Front-End und dem Back-End erreicht werden. Wir verwenden das Vue-native-websocket-Plug-in in Vue, um eine WebSocket-Verbindung zu implementieren und ein einfaches Chatroom-Beispiel zu implementieren. Durch die Kombination von Vue und WebSocket können wir schnell Echtzeitanwendungen erstellen und eine Echtzeitübertragung von Daten realisieren.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie WebSocket, um Echtzeitkommunikation in Vue zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!