Node.jsを使用してインスタントメッセージング機能を実装するWebプロジェクト-jsチュートリアル-php.cn

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

インターネットの急速な発展に伴い、インスタントメッセージング機能はますます一般的になってきています。ソーシャルネットワーク、電子商取引、オンラインゲームなど、ユーザーエクスペリエンスと効率を向上させるためにインスタントメッセージング機能を実装する必要があります。 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 の構成

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 サービスを開始します

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 つの部分で構成されます:

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

要素。

著者別の最新記事