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

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.

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.

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

Nach dem Login kopieren

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');
});

Nach dem Login kopieren

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.

MongoDB konfigurieren

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

npm install mongodb --save

Nach dem Login kopieren

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();
});

Nach dem Login kopieren

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.

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');
});

Nach dem Login kopieren

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.

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>

Nach dem Login kopieren

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: