Heim > Artikel > Web-Frontend > nodejs implementiert eine einzelne Chat-Funktion

nodejs implementiert eine einzelne Chat-Funktion

WBOYOriginal: 2023-05-28 11:01:09588Durchsuche

Node.js implementiert die Einzel-Chat-Funktion

Node.js ist eine JavaScript-Ausführungsumgebung, die auf der V8-Engine von Chrome basiert und die Ausführung von JavaScript auf der Serverseite ermöglicht. Mit Node.js können wir problemlos leistungsstarke, skalierbare Webanwendungen erstellen.

In diesem Artikel werden wir Node.js verwenden, um eine einfache Einzel-Chat-Funktion zu implementieren, bei der es sich um einen Echtzeit-Chat zwischen zwei Benutzern handelt.

Benötigte Tools und Technologien:

Node.js
Express-Framework
Socket.IO

Projekt erstellen

Zuerst müssen wir ein neues Node.js-Projekt erstellen. Sie können den Befehl npm init verwenden, um das Projekt zu initialisieren, oder den Projektordner auf andere Weise erstellen.

Abhängigkeiten installieren

Als nächstes müssen wir die Express- und Socket.IO-Bibliotheken installieren. Öffnen Sie die Befehlszeile im Projektordner und geben Sie den folgenden Befehl ein:

npm install express socket.io --save

Dadurch werden die Express- und Socket.IO-Bibliotheken installiert und zur Datei package.json hinzugefügt.

Server erstellen

Erstellen Sie im Projektordner eine Datei mit dem Namen server.js. Dies ist unsere Hauptserverdatei. Fügen Sie den folgenden Code hinzu:

const express = require('express');
const app = express();

const server = app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

Dadurch wird eine Express-Anwendung erstellt und an Port 3000 gebunden. Jetzt können wir testen, ob der Server ordnungsgemäß läuft, indem wir einen Browser öffnen und http://localhost:3000 aufrufen. Wenn alles in Ordnung ist, sollte die Meldung „Cannot GET /“ angezeigt werden. Dies liegt daran, dass wir der Anwendung keine Routen hinzugefügt haben.

Chatraum erstellen

Jetzt müssen wir einen Chatraum erstellen, um die Echtzeit-Chat-Funktion zwischen zwei verschiedenen Benutzern zu implementieren. Zu diesem Zweck können wir die Socket.IO-Bibliothek verwenden, um Echtzeitereignisse und Kommunikation abzuwickeln.

Zuerst müssen wir den folgenden Code zur Datei server.js hinzufügen:

const io = require('socket.io')(server);

io.on('connection', (socket) => {
  console.log('A user connected');

  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });
});

Dadurch wird eine Socket.IO-Instanz erstellt und an den vorhandenen HTTP-Server gebunden. Wenn eine neue Verbindung besteht, gibt die Rückruffunktion die Meldung „Ein Benutzer verbunden“ aus. Wenn die Verbindung getrennt wird, gibt die Callback-Funktion die Meldung „Ein Benutzer wurde getrennt“ aus.

Jetzt können wir dem Chatroom die Möglichkeit hinzufügen, Nachrichten zu senden und zu empfangen. Hierzu können wir die Methoden emit() und on() von Socket.IO verwenden.

Fügen Sie den folgenden Code in die Datei server.js ein:

io.on('connection', (socket) => {
  console.log('A user connected');

  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });

  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });
});

Dadurch können Benutzer Nachrichten senden und diese an alle verbundenen Clients senden.

Client erstellen

Jetzt müssen wir eine einfache HTML- und JavaScript-Seite verwenden, um eine Verbindung zum Socket.IO-Server herzustellen und die Funktionalität zum Senden und Empfangen von Nachrichten zu implementieren. Erstellen Sie im Projektordner eine neue Datei mit dem Namen index.html und fügen Sie den folgenden Code hinzu:

<!DOCTYPE html>
<html>
<head>
  <title>Node.js Chat</title>
</head>
<body>
  <ul id="messages"></ul>
  <form id="message-form">
    <input type="text" id="input-message" autocomplete="off" />
    <button>Send</button>
  </form>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(function () {
      const socket = io();
      $('#message-form').submit(function(e) {
        e.preventDefault(); // prevents page reloading
        const message = $('#input-message').val();
        socket.emit('chat message', message);
        $('#input-message').val('');
        return false;
      });
      socket.on('chat message', function(msg) {
        $('#messages').append($('<li>').text(msg));
      });
    });
  </script>
</body>
</html>

In dieser HTML-Datei haben wir die jQuery-Bibliothek verwendet, um die DOM-Manipulation zu vereinfachen. Es enthält ein Eingabefeld und einen „Senden“-Button, sowie ein ff6d136ddc5fdfeffaf53ff6ee95f185-Element zur Anzeige aller Nachrichten.

Im JavaScript-Teil haben wir die clientseitige Bibliothek von Socket.IO verwendet, um eine Socket.IO-Instanz zu erstellen, die eine Verbindung zum Server herstellt und eine Nachricht an den Server sendet, nachdem der Benutzer das Formular übermittelt hat. Wenn der Client eine neue Nachricht vom Server empfängt, fügt er der Seite ein neues Listenelement hinzu.

Starten Sie die Anwendung

Jetzt können wir die Anwendung starten, indem wir den folgenden Befehl in die Befehlszeile eingeben:

node server.js

Als nächstes öffnen Sie einen Webbrowser und besuchen http://localhost:3000. Sie sollten eine einfache Chat-Oberfläche sehen. Öffnen Sie ein anderes Browserfenster oder eine andere Browserregisterkarte auf demselben Computer, um mit dem Chatten zu beginnen.

Zusammenfassung

In diesem Artikel haben wir eine Echtzeit-Einzelchatanwendung mit Node.js und der Socket.IO-Bibliothek erstellt. Diese Anwendung ermöglicht Benutzern das Senden und Empfangen von Nachrichten und nutzt die Socket.IO-Bibliothek, um die gesamte Echtzeitkommunikation abzuwickeln. Obwohl diese Anwendung relativ einfach ist, demonstriert sie die Grundprinzipien zum Erstellen von Echtzeit-Webanwendungen mit Node.js und Socket.IO.

Das obige ist der detaillierte Inhalt vonnodejs implementiert eine einzelne Chat-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：JQuery-Traverse-Array löschenNächster Artikel：JQuery-Traverse-Array löschen

In Verbindung stehende Artikel

Mehr sehen