Webprojekt mit Node.js zur Implementierung der Instant-Messaging-Funktion

Mit der rasanten Entwicklung des Internets werden Instant-Messaging-Funktionen immer häufiger. Unabhängig davon, ob es sich um soziale Netzwerke, E-Commerce, Online-Spiele usw. handelt, müssen Instant-Messaging-Funktionen implementiert werden, um das Benutzererlebnis und die Effizienz zu verbessern. Als effiziente JavaScript-Laufumgebung, die für gleichzeitige Anfragen geeignet ist, bietet Node.js gute Unterstützung für die schnelle Erstellung von Webanwendungen mit Instant-Messaging-Funktionen.

In diesem Artikel wird detailliert beschrieben, wie Sie mit Node.js eine webbasierte Instant-Messaging-Funktion implementieren. Dieses Projekt basiert auf dem WebSocket-Protokoll und verwendet keine herkömmliche Polling- oder Long-Polling-Technologie. Der Vorteil der WebSocket-Technologie besteht darin, dass sie eine bidirektionale Kommunikation zwischen Server und Client in Echtzeit realisieren kann und außerdem domänenübergreifende Anforderungen gut unterstützt.

1. Technologieauswahl

Wir werden die folgenden Technologien verwenden, um diese Instant-Messaging-Funktion zu entwickeln:

• Node.js: Wir werden Node.js als serverseitige Betriebsumgebung verwenden.
• Express: Wir werden das Express-Framework verwenden, um Webanwendungen zu entwickeln.
• Socket.IO: Socket.IO ist eine plattformübergreifende Echtzeit-Kommunikations-Engine, die auf WebSocket und Polling basiert. Sie ist mit verschiedenen Browsern und Mobilgeräten kompatibel.
• MongoDB: Wir werden MongoDB als Datenspeicher verwenden.
• Bootstrap: Wir werden das Bootstrap-Framework verwenden, um die Benutzeroberfläche zu erstellen.

2. Erstellen Sie das Projekt-Framework

Erstellen Sie zunächst einen Projektordner, geben Sie das Verzeichnis ein und führen Sie dann die folgenden Befehle aus:

npm init
npm install express socket.io mongodb --save

Die obigen Befehle erstellen ein neues Node.js-Projekt und installieren dann die erforderlichen abhängigen Bibliotheken .

Der erste Schritt besteht darin, eine neue JavaScript-Datei im Projektstammverzeichnis zu erstellen. In diesem Fall haben wir die Datei server.js genannt. Kopieren Sie dann den folgenden Code in die Datei server.js.

const express = require('express');
const app = express();
const http = require('http').Server(app);

// TODO：编写代码来启动Socket.IO服务

app.use(express.static('public'));

http.listen(3000, () => {
  console.log('listening on *:3000');
});

Der obige Code führt das Express-Framework ein, erstellt ein HTTP-Serverobjekt und überwacht Port 3000. Dies beinhaltet die Initialisierung und den Start von Socket.IO, worauf später noch eingegangen wird. Gleichzeitig wird express.static() verwendet, um den Zugriff auf den statischen Ordner des Programms festzulegen.

3. MongoDB konfigurieren

Führen Sie den folgenden Befehl aus, um MongoDB zu installieren:

npm install mongodb --save

Erstellen Sie eine neue JS-Datei mit dem Namen mongo.js im Projektstammverzeichnis und fügen Sie den folgenden Code hinzu, um MongoDB einzurichten und auszuführen.

const MongoClient = require('mongodb').MongoClient;

// Connection URL
const url = 'mongodb://localhost:27017';
// Database Name
const dbName = 'chatDB';
// Use connect method to connect to the server
MongoClient.connect(url, function (err, client) {
  console.log('Connected successfully to mongodb server');

  const db = client.db(dbName);
  client.close();
});

In dieser Datei verwenden wir das offiziell von MongoDB bereitgestellte MongoClient-Objekt, um eine Verbindung zum MongoDB-Server herzustellen. MongoClient stellt über die URL eine Verbindung zur Mongod-Instanz her und führt den Vorgang mit dbName als Parameter aus. Wenn Sie nach dem Ausführen von mongo.js eine Meldung wie „Verbindung zum MongoDB-Server erfolgreich hergestellt“ sehen, haben Sie erfolgreich eine Verbindung zu MongoDB hergestellt.

4. Starten Sie den Socket.IO-Dienst

Um den Socket.IO-Dienst zu starten, fügen wir gerade den folgenden Code zur server.js-Datei hinzu:

const express = require('express');
const app = express();
const http = require('http').Server(app);

const io = require('socket.io')(http);
io.on('connection', function (socket) {
  console.log('a user connected');
  socket.on('disconnect', function () {
    console.log('user disconnected');
  });
});

app.use(express.static('public'));

http.listen(3000, () => {
  console.log('listening on *:3000');
});

Der obige Code importiert und erstellt eine Instanz aus socket.io-Modul und dann Das Verbindungsereignis wird festgelegt. Das Verbindungsereignis wird ausgelöst, wenn ein Client eine Verbindung zu einem Socket.IO-Server herstellt. Wir haben den Verbindungsereignissen einige Protokollierungsausgaben hinzugefügt, damit wir auf der Serverkonsole wissen, wie viele Benutzer mit unserem Socket.IO-Server verbunden sind.

5. Client erstellen

Jetzt beginnen wir mit der Erstellung des Clients. Erstellen Sie im öffentlichen Ordner eine Datei mit dem Namen index.html und fügen Sie den folgenden Code hinzu:

<!DOCTYPE html>
<html>
  <head>
    <title>Node.js Chat App</title>
  </head>
  <body>
    <h1>Welcome to the Chat Room!</h1>
    <div id="messages"></div>
    <form id="chat-form" action="#">
      <input id="message" type="text" placeholder="Type message" />
      <button type="submit">Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/client.js"></script>
  </body>
</html>

Im obigen Code haben wir eine einfache Benutzeroberfläche zum Senden und Empfangen von Sofortnachrichten erstellt. Die Benutzeroberfläche besteht im Wesentlichen aus drei Teilen:

• Ein
  -Element, das zur Anzeige von Chat-Nachrichten verwendet wird.
• Ein Formular, mit dem Benutzer Nachrichten senden können.
• Zwei <script>-Elemente. Einer dient zum Laden der socket.io-Client-Bibliothek und der andere zum Laden des Client-Skripts. </script>
6. Implementieren eines clientseitigen Skripts

Erstellen Sie eine neue JS-Datei mit dem Namen client.js im öffentlichen Ordner und fügen Sie dann den folgenden Code hinzu:

const socket = io();
const messageList = document.getElementById('messages');
const messageForm = document.getElementById('chat-form');
const messageInput = document.getElementById('message');

messageForm.addEventListener('submit', function (e) {
  e.preventDefault();
  socket.emit('chat message', messageInput.value);
  messageInput.value = '';
});

socket.on('chat message', function (msg) {
  const item = document.createElement('li');
  item.textContent = msg;
  messageList.appendChild(item);
  window.scrollTo(0, document.body.scrollHeight);
});

Der obige Code ist ein einfaches clientseitiges Skript, das die Kommunikation verarbeitet zwischen der Benutzeroberfläche und Socket.IO. Die Hauptaufgabe des Client-Codes besteht darin, Nachrichten an den Server zu senden und die empfangenen Nachrichten auf der Benutzeroberfläche anzuzeigen. Wir verwenden die emit()-Methode von Socket.IO, um Nachrichten an den Server zu senden, und die on()-Methode, um vom Server gesendete Nachrichten zu empfangen.

7. Testen der App

Da wir nun alle Dateien bereit haben, können wir den Webserver starten und sie im Browser testen. Gehen Sie im Terminal in das Stammverzeichnis des Projekts und geben Sie den folgenden Befehl ein:

node server.js

Geben Sie http://localhost:3000/ in Ihren Browser ein, um die Anwendung zu öffnen. Geben Sie einige Chat-Nachrichten in die Benutzeroberfläche ein und wir können sehen, wie sie zur Chat-Nachrichtenliste hinzugefügt werden.

8. Fazit

Node.js und Socket.IO sind sehr gute Optionen für die Entwicklung von Webanwendungen, die Instant Messaging implementieren. In diesem Artikel haben wir vorgestellt, wie man eine webbasierte Chat-Anwendung erstellt, die Node.js als Laufzeitumgebung, Express als Web-Framework, Socket.IO als Echtzeit-Kommunikations-Engine und MongoDB als Datenspeicher verwendet. Dies ist ein sehr einfaches Beispiel, aber es zeigt uns, wie diese Technologien zur Implementierung von Instant-Messaging-Funktionen genutzt werden können.