Nodejs kombiniert mit Socket.IO zur Realisierung einer sofortigen WebSocket-Kommunikation

Warum WebSocket verwenden?

Websocket ist ein Netzwerkkommunikationsprotokoll, das im Allgemeinen für Echtzeitkommunikation verwendet wird.

Das WebSocket-Protokoll ähnelt dem HTTP-Protokoll. Das HTTP-Protokoll weist einen Fehler auf, da es nur von der Clientseite initiiert werden kann und die Serverseite das entsprechende Ergebnis basierend auf der Anforderungs-URL und den übergebenen Parametern zurückgibt.

Websocket ist雙向通信. Sobald die Websocket-Verbindung hergestellt ist, kann der Client Daten an den Server senden und der Server kann auch aktiv Daten an den Client senden.

Websocket ist auf Szenarien wie Web-Chatrooms, Web-Kundendienst und Instant Messaging-Szenarien anwendbar, in denen Front-End und Back-End häufig Daten austauschen.

Socket.io

Ein bidirektionales WebSocket-Kommunikationspaket mit geringer Latenz, hoher Leistung, hoher Zuverlässigkeit und Skalierbarkeit.
(Einfach ausgedrückt geht es darum, WebSocket zu kapseln und zu optimieren.)

Socket.IO ist eine Bibliothek, die eine bidirektionale, ereignisbasierte Kommunikation in Echtzeit zwischen Browsern und Servern ermöglicht. Es beinhaltet:

• Server
• Kunde
  

Offizielle Website
https://socket.io/
Offizielle Dokumentation
https://socket.io/docs/v4/

Open Source Projekte

Die folgenden Code- und Zeitelemente werden im Open Source-Projekt [nodejs-study] veröffentlicht. Sie können sie gerne herunterladen und studieren.

Effektvorschau

Nachdem Sie node app aufgerufen haben, um den Dienst auszuführen, können Sie über http://localhost:3000/ darauf zugreifen. Wenn Sie sehen, dass die Ausgabe auf Port 3000 lauscht und das Front-End „Hallo Welt“ anzeigt, wurde das Projekt erfolgreich gestartet.

Front-End-Seite: eine Chat-UI-Box, einschließlich Sende- und Empfangsfunktionen http://localhost:3000/test

Hintergrund-WebSocket: Zuhören und Antworten

app.js

Zuerst müssen Sie die Bibliotheken express und socket.io installieren

Geben Sie npm install express --save oder yarn add express

Geben Sie npm install socket.io--save oder yarn add socket,io

Als nächstes überwachen wir die beiden Pfade / und /test

• / Zurück zu „Hallo Welt“
• /test kehrt zur HTML-Verbindungsseite zurück

socket.on ("Chat-Nachricht", Callback-Funktion)
Zeigt an, dass mit der Überwachung des Kanals „Chat-Nachrichten“ begonnen wird, sofern es sich bei Frontend und Backend um denselben Kanal handelt.

socket.emit ("Chat-Nachricht", msg.toUpperCase());
Zeigt eine Antwort auf diesen „Chat-Nachricht“-Kanal an. Wir werden die englischen Buchstaben vorübergehend groß schreiben und zurückgeben.

const express = erfordern('express');
const app = express();
const http = erfordern('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = neuer Server(Server);

app.get('/', (req, res) => {
    res.send('<h1>Hallo Welt</h1>');
  });

app.get('/test', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

// io.on('Verbindung', (Socket) => {
// console.log('ein Benutzer hat sich verbunden');
// });
//von zhengkai.blog.csdn.net
//Verarbeite socket.on-Informationen und socket.emit-Antwortinformationen //Schreibe hier die empfangene Nachricht groß io.on('connection', (socket) => {
    //Socket.io von zhengkai.blog.csdn.net
    socket.on('Chat-Nachricht', (msg) => {
      console.log('empfangen: ' + msg);
      socket.emit("Chat-Nachricht", msg.toUpperCase());
    });
  });
//Auf Port 3000 lauschen
server.listen(3000, () => {
  console.log('hört auf *:3000');
});

Hauptseite

Dies führt einige Styling-Aktionen durch und hat den folgenden Textinhalt:

• Die UL der Nachricht kann verwendet werden, um LI-Informationen anzuhängen und so die Aufzeichnungen der Transaktionen anzuzeigen.
• Ein Formular zur Übermittlung der zu sendenden Informationen

Was den Skriptteil betrifft, verwenden Sie zuerst den offiziellen socket.io js-Client, um eine Verbindung zu initialisieren und ein Abhörereignis hinzuzufügen:

• Nach Eingabe des nicht leeren Inhalts und Absenden werden die Informationen an das WebSocket-Backend gesendet und ebenfalls in der Informationsliste ausgegeben.
• Nach dem Empfang der Nachricht wird diese in der Nachrichtenliste angezeigt

<!DOCTYPE html>
<html>
  <Kopf>
    <title>Socket.IO-Chat</title>
    <Stil>
      body { Rand: 0; Polsterung unten: 3rem; Schriftfamilie: -apple-system, BlinkMacSystemFont, „Segoe UI“, Roboto, Helvetica, Arial, sans-serif; }

      #form { Hintergrund: rgba(0, 0, 0, 0,15); Polsterung: 0,25rem; Position: fest; unten: 0; links: 0; rechts: 0; Anzeige: flexibel; Höhe: 3rem; Boxgröße: Rahmenbox; Hintergrundfilter: Unschärfe (10px); }
      #Eingabe { Rahmen: keiner; Polsterung: 0 1rem; Flex-Wachstum: 1; Rahmenradius: 2rem; Rand: 0,25rem; }
      #input:fokus { Gliederung: keine; }
      #Formular > Schaltfläche { Hintergrund: #333; Rahmen: keiner; Polsterung: 0 1rem; Rand: 0,25rem; Rahmenradius: 3px; Umriss: keiner; Farbe: #fff; }

      #Nachrichten { Listenstiltyp: keiner; Rand: 0; Polsterung: 0; }
      #Nachrichten > li { Polsterung: 0,5rem 1rem; }
      #Nachrichten > li:n-tes Kind(ungerade) { Hintergrund: #efefef; }
    </Stil>
  </Kopf>
  <Text>
    <ul id="Nachrichten"></ul>
    <Formular-ID="Formular" Aktion="">
      <input id="input" autocomplete="off" /><button>Senden</button>
    </form>
  </body>
  <script src="/socket.io/socket.io.js"></script>
  <Skript>
    var socket = io();
    
    var Nachrichten = document.getElementById('Nachrichten');
    var form = document.getElementById('form');
    var Eingabe = document.getElementById('Eingabe');

    //Ausgabe auf dem Bildschirm Funktion addMessage(str){
        const li = document.createElement("li")
        li.innerHTML=str;
        Nachrichten.anhängenUntergeordnetesElement(li); 
        
    }
    // console.log(Formular)
    form.addEventListener('senden', Funktion(e) {
      e.preventDefault();
      if (Eingabe.Wert) {
        //Socket.io von zhengkai.blog.csdn.net
        let msg = 'Nachricht senden:' + input.value;
        Konsole.log(Nachricht)
        socket.emit('Chat-Nachricht', input.value);
        füge Nachricht hinzu(msg);
        //Ein Eingabefeld löschen//input.value = '';
      }
    });
    socket.on("Chatnachricht", (arg) => {
        let msg = 'Nachricht empfangen:' + arg;
        console.log(msg); // Welt
        füge Nachricht hinzu(msg);
    }); 
  </Skript>
  
</html>

Dies ist das Ende dieses Artikels über die Kombination von nodejs mit Socket.IO zur Implementierung von WebSocket-Instant-Messaging. Weitere verwandte Inhalte zu Node-WebSocket-Instant-Messaging finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!