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

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

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 Bootstrap in Vue So verwenden Sie Bootstrap in Vue Apr 07, 2025 pm 11:33 PM

Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.

So fügen Sie Funktionen zu Schaltflächen für Vue hinzu So fügen Sie Funktionen zu Schaltflächen für Vue hinzu Apr 08, 2025 am 08:51 AM

Sie können der VUE -Taste eine Funktion hinzufügen, indem Sie die Taste in der HTML -Vorlage an eine Methode binden. Definieren Sie die Methode und schreiben Sie die Funktionslogik in der VUE -Instanz.

So verweisen Sie auf die JS -Datei mit Vue.js So verweisen Sie auf die JS -Datei mit Vue.js Apr 07, 2025 pm 11:27 PM

Es gibt drei Möglichkeiten, sich auf JS -Dateien in Vue.js zu beziehen: Geben Sie den Pfad direkt mit dem & lt; Skript & gt an. Etikett;; Dynamischer Import mit dem montierten () Lebenszyklushaken; und importieren über die Vuex State Management Library.

So verwenden Sie Watch in Vue So verwenden Sie Watch in Vue Apr 07, 2025 pm 11:36 PM

Mit der Watch -Option in Vue.js können Entwickler auf Änderungen in bestimmten Daten anhören. Wenn sich die Daten ändert, löst sich eine Rückruffunktion aus, um Aktualisierungsansichten oder andere Aufgaben auszuführen. Zu den Konfigurationsoptionen gehören unmittelbar, die festlegen, ob ein Rückruf sofort ausgeführt werden soll, und Deep, das feststellt, ob Änderungen an Objekten oder Arrays rekursiv anhören sollen.

Was bedeutet VUE Multi-Page-Entwicklung? Was bedeutet VUE Multi-Page-Entwicklung? Apr 07, 2025 pm 11:57 PM

VUE Multi-Page-Entwicklung ist eine Möglichkeit, Anwendungen mithilfe des Vue.js-Frameworks zu erstellen, in dem die Anwendung in separate Seiten unterteilt ist: Code-Wartung: Die Aufteilung der Anwendung in mehrere Seiten kann das Verwalten und Wartungsbereich erleichtern. Modularität: Jede Seite kann als separates Modul für eine einfache Wiederverwendung und den Austausch verwendet werden. Einfaches Routing: Die Navigation zwischen Seiten kann durch einfache Routing -Konfiguration verwaltet werden. SEO -Optimierung: Jede Seite hat eine eigene URL, die SEO hilft.

So kehren Sie von Vue zur vorherigen Seite zurück So kehren Sie von Vue zur vorherigen Seite zurück Apr 07, 2025 pm 11:30 PM

VUE.JS hat vier Methoden, um zur vorherigen Seite zurückzukehren: $ router.go (-1) $ router.back () verwendet & lt; Router-Link to = & quot;/& quot; Komponentenfenster.history.back () und die Methodenauswahl hängt von der Szene ab.

So verwenden Sie Vue Traversal So verwenden Sie Vue Traversal Apr 07, 2025 pm 11:48 PM

Es gibt drei gängige Methoden für Vue.js, um Arrays und Objekte zu durchqueren: Die V-für-Anweisung wird verwendet, um jedes Element zu durchqueren und Vorlagen zu rendern; Die V-Bind-Anweisung kann mit V-für dynamisch Attributwerte für jedes Element verwendet werden. und die .MAP -Methode kann Array -Elemente in Neuarrays umwandeln.

So fragen Sie die Version von Vue So fragen Sie die Version von Vue Apr 07, 2025 pm 11:24 PM

Sie können die Vue -Version mit Vue Devtools abfragen, um die Registerkarte VUE in der Konsole des Browsers anzuzeigen. Verwenden Sie NPM, um den Befehl "npm list -g vue" auszuführen. Suchen Sie das Vue -Element im Objekt "Abhängigkeiten" der Datei package.json. Führen Sie für Vue -CLI -Projekte den Befehl "Vue --version" aus. Überprüfen Sie die Versionsinformationen im & lt; Skript & gt; Tag in der HTML -Datei, die sich auf die VUE -Datei bezieht.

See all articles