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
Nach dem Login kopieren
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');
});Nach dem Login kopieren
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');
});
});Nach dem Login kopieren
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);
});
});Nach dem Login kopieren
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>Nach dem Login kopieren
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
-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
Nach dem Login kopieren
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!
