ホームページ > 記事 > ウェブフロントエンド > Node.jsを使用してインスタントメッセージング機能を実装するWebプロジェクト

Node.jsを使用してインスタントメッセージング機能を実装するWebプロジェクト

PHPzオリジナル: 2023-11-08 11:38:05694ブラウズ

インターネットの急速な発展に伴い、インスタントメッセージング機能はますます一般的になってきています。ソーシャルネットワーク、電子商取引、オンラインゲームなど、ユーザーエクスペリエンスと効率を向上させるためにインスタントメッセージング機能を実装する必要があります。 Node.js は、同時リクエストに適した効率的な JavaScript 実行環境として、インスタントメッセージング機能を備えた Web アプリケーションを迅速に構築するための優れたサポートを提供します。

この記事では、Node.js を使用して Web ベースのインスタントメッセージング機能を実装する方法を詳しく紹介します。このプロジェクトは WebSocket プロトコルに基づいており、従来のポーリングやロングポーリングテクノロジは使用しません。 WebSocket テクノロジの利点は、サーバーとクライアントの間でリアルタイムの双方向通信を実現できることと、クロスドメインリクエストのサポートも充実していることです。

テクノロジーの選択

このインスタントメッセージング機能を開発するには、次のテクノロジーを使用します:

Node.js: Node を使用します。 .js はサーバー側の動作環境として機能します。
Express: Express フレームワークを使用して Web アプリケーションを開発します。
Socket.IO: Socket.IO は、WebSocket とポーリングに基づくクロスプラットフォームのリアルタイム通信エンジンであり、さまざまなブラウザーやモバイルデバイスと互換性があります。
MongoDB: データストレージとして MongoDB を使用します。
ブートストラップ: ブートストラップフレームワークを使用してユーザーインターフェイスを構築します。

プロジェクトフレームワークの構築

最初にプロジェクトフォルダーを作成し、ディレクトリに入り、次のコマンドを実行します。上記のコマンドは、新しい Node.js プロジェクトを作成し、必要な依存関係をインストールします。

最初のステップは、プロジェクトのルートディレクトリに新しい JavaScript ファイルを作成することです。この場合、ファイルにserver.jsという名前を付けました。次に、以下のコードをserver.jsファイルにコピーします。

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

上記のコードは、Express フレームワークを導入し、HTTP サーバーオブジェクトを作成し、ポート 3000 をリッスンします。これには、後で説明する Socket.IO の初期化と起動が含まれます。同時に、express.static() を使用してプログラムの静的フォルダーへのアクセスを設定します。

MongoDB の構成

次のコマンドを実行して MongoDB をインストールします。

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

プロジェクトのルートディレクトリの JS ファイルに mongo.js という名前の新しいファイルを作成します。次に、次のコードを追加して MongoDB をセットアップして実行します。

npm install mongodb --save

このファイルでは、MongoDB によって公式に提供されている MongoClient オブジェクトを使用して MongoDB サーバーに接続します。 MongoClient は URL を使用して mongod インスタンスに接続し、dbName をパラメータとして操作を実行します。 mongo.js を実行した後、「MongoDB サーバーに正常に接続されました」のようなメッセージが表示されたら、MongoDB に正常に接続されています。

Socket.IO サービスを開始します

Socket.IO サービスを開始するには、今、server.js ファイルに次のコードを追加します。 ##

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

上記のコードは、socket.io モジュールからインスタンスをインポートして作成し、接続イベントを設定します。接続イベントは、クライアントが Socket.IO サーバーに接続するとトリガーされます。 Socket.IO サーバーに接続しているユーザーの数をサーバーコンソールで確認できるように、接続イベントにログ出力を追加しました。

クライアントの作成

次に、クライアントの作成を開始します。パブリックフォルダーに、index.html というファイルを作成し、次のコードを追加します。

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

上記のコードでは、インスタントメッセージを送受信するための単純なユーザーインターフェイスを作成しました。ユーザーインターフェイスは主に 3 つの部分で構成されます:

チャットメッセージを表示するために使用される

要素。

2 つの <script> 要素。 1 つはsocket.io クライアントライブラリのロードに使用され、もう 1 つはクライアントスクリプトのロードに使用されます。 <li><li>クライアントスクリプトの実装</script>

client.js という名前の新しい JS ファイルをパブリックフォルダーに作成し、次のコードを追加します。

<!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>

上記のコードは、ユーザーインターフェイスと Socket.IO 間の通信を処理する単純なクライアントスクリプトです。クライアントコードの主な役割は、メッセージをサーバーに送信し、受信したメッセージをユーザーインターフェイスに表示することです。 Socket.IO の Emit() メソッドを使用してサーバーにメッセージを送信し、on() メソッドを使用してサーバーから送信されたメッセージを受信します。

アプリケーションのテスト

すべてのファイルの準備ができたので、Web サーバーを起動してブラウザでテストできます。ターミナルでプロジェクトのルートディレクトリに移動し、次のコマンドを入力します。

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

ブラウザに http://localhost:3000/ と入力してアプリケーションを開きます。ユーザーインターフェイスにチャットメッセージを入力すると、チャットメッセージリストに追加されることがわかります。

結論

Node.js と Socket.IO は、インスタントメッセージングを実装する Web アプリケーションを開発するのに非常に良い選択肢です。この記事では、ランタイム環境として Node.js、Web フレームワークとして Express、リアルタイム通信エンジンとして Socket.IO、データストレージとして MongoDB を使用する Web ベースのチャットアプリケーションを作成する方法を紹介しました。これは非常に単純な例ですが、これらのテクノロジを使用してインスタントメッセージング機能を実装する方法を示しています。

以上がNode.jsを使用してインスタントメッセージング機能を実装するWebプロジェクトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript bootstrap html express Static public Interface 并发 JS 对象事件 mongodb http websocket

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Node.jsを使用してオンライン注文機能を実装するWebプロジェクト次の記事：Node.jsを使用してオンライン注文機能を実装するWebプロジェクト

続きを見る