Heim Web-Frontend View.js So verwenden Sie WebSocket, um Echtzeitkommunikation in Vue zu erreichen

So verwenden Sie WebSocket, um Echtzeitkommunikation in Vue zu erreichen

Jun 11, 2023 am 11:46 AM
vue websocket 实时通信

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

  1. 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
Nach dem Login kopieren

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

  1. 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, //重新连接的时间间隔
})
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So verwenden Sie Echarts in Vue So verwenden Sie Echarts in Vue May 09, 2024 pm 04:24 PM

Durch die Verwendung von ECharts in Vue können Sie Ihrer Anwendung ganz einfach Datenvisualisierungsfunktionen hinzufügen. Zu den spezifischen Schritten gehören: Installieren von ECharts- und Vue ECharts-Paketen, Einführung von ECharts, Erstellen von Diagrammkomponenten, Konfigurieren von Optionen, Verwenden von Diagrammkomponenten, Anpassen von Diagrammen an Vue-Daten, Hinzufügen interaktiver Funktionen und Verwenden erweiterter Verwendungsmöglichkeiten.

Die Rolle des Exportstandards in Vue Die Rolle des Exportstandards in Vue May 09, 2024 pm 06:48 PM

Frage: Welche Rolle spielt der Exportstandard in Vue? Detaillierte Beschreibung: Exportstandard definiert den Standardexport der Komponente. Beim Importieren werden Komponenten automatisch importiert. Vereinfachen Sie den Importvorgang, verbessern Sie die Übersichtlichkeit und vermeiden Sie Konflikte. Wird häufig zum Exportieren einzelner Komponenten verwendet, wobei sowohl benannte als auch Standardexporte verwendet werden und globale Komponenten registriert werden.

So verwenden Sie die Kartenfunktion in Vue So verwenden Sie die Kartenfunktion in Vue May 09, 2024 pm 06:54 PM

Die Kartenfunktion von Vue.js ist eine integrierte Funktion höherer Ordnung, die ein neues Array erstellt, wobei jedes Element das transformierte Ergebnis jedes Elements im ursprünglichen Array ist. Die Syntax lautet map(callbackFn), wobei callbackFn jedes Element im Array als erstes Argument empfängt, optional den Index als zweites Argument, und einen Wert zurückgibt. Die Kartenfunktion ändert das ursprüngliche Array nicht.

Der Unterschied zwischen Event und $event in Vue Der Unterschied zwischen Event und $event in Vue May 08, 2024 pm 04:42 PM

In Vue.js ist event ein natives JavaScript-Ereignis, das vom Browser ausgelöst wird, während $event ein Vue-spezifisches abstraktes Ereignisobjekt ist, das in Vue-Komponenten verwendet wird. Im Allgemeinen ist die Verwendung von $event bequemer, da es so formatiert und erweitert ist, dass es die Datenbindung unterstützt. Verwenden Sie „event“, wenn Sie auf bestimmte Funktionen des nativen Ereignisobjekts zugreifen müssen.

Der Unterschied zwischen Export und Exportstandard in Vue Der Unterschied zwischen Export und Exportstandard in Vue May 08, 2024 pm 05:27 PM

Es gibt zwei Möglichkeiten, Module in Vue.js zu exportieren: Export und Export Default. export wird zum Exportieren benannter Entitäten verwendet und erfordert die Verwendung von geschweiften Klammern; export default wird zum Exportieren von Standardentitäten verwendet und erfordert keine geschweiften Klammern. Beim Importieren müssen per Export exportierte Entitäten ihre Namen verwenden, während per Exportstandard exportierte Entitäten implizit verwendet werden können. Es wird empfohlen, die Export-Standardeinstellung für Module zu verwenden, die mehrmals importiert werden müssen, und die Export-Standardeinstellung für Module, die nur einmal exportiert werden müssen.

Die Rolle von Onmount in Vue Die Rolle von Onmount in Vue May 09, 2024 pm 02:51 PM

onMounted ist ein Lebenszyklus-Hook für die Komponentenmontage in Vue. Seine Funktion besteht darin, Initialisierungsvorgänge durchzuführen, nachdem die Komponente im DOM bereitgestellt wurde, z. B. das Abrufen von Referenzen auf DOM-Elemente, das Festlegen von Daten, das Senden von HTTP-Anforderungen, das Registrieren von Ereignis-Listenern usw. Es wird nur einmal aufgerufen, wenn die Komponente gemountet wird. Wenn Sie Vorgänge ausführen müssen, nachdem die Komponente aktualisiert wurde oder bevor sie zerstört wurde, können Sie andere Lebenszyklus-Hooks verwenden.

Was sind Hooks in Vue Was sind Hooks in Vue May 09, 2024 pm 06:33 PM

Vue-Hooks sind Rückruffunktionen, die Aktionen bei bestimmten Ereignissen oder Lebenszyklusphasen ausführen. Dazu gehören Lebenszyklus-Hooks (wie beforeCreate, mount, beforeDestroy), Event-Handling-Hooks (wie click, input, keydown) und benutzerdefinierte Hooks. Hooks verbessern die Komponentenkontrolle, reagieren auf Komponentenlebenszyklen, verarbeiten Benutzerinteraktionen und verbessern die Wiederverwendbarkeit von Komponenten. Um Hooks zu verwenden, definieren Sie einfach die Hook-Funktion, führen Sie die Logik aus und geben Sie einen optionalen Wert zurück.

Für welche Szenarien können Ereignismodifikatoren in Vue verwendet werden? Für welche Szenarien können Ereignismodifikatoren in Vue verwendet werden? May 09, 2024 pm 02:33 PM

Vue.js-Ereignismodifikatoren werden verwendet, um bestimmte Verhaltensweisen hinzuzufügen, darunter: Verhindern von Standardverhalten (.prevent), Stoppen von Ereignisblasen (.stop), Einmaliges Ereignis (.once), Erfassen von Ereignissen (.capture), Passives Abhören von Ereignissen (.passive), Adaptiv Modifikator (.self)Schlüsselmodifikator (.key)

See all articles