Node.js はシングル チャット機能を実装します
Node.js は、Chrome の V8 エンジンをベースとした JavaScript 実行環境であり、サーバー側で JavaScript を実行できます。 Node.js を使用すると、高性能でスケーラブルな Web アプリケーションを簡単に構築できます。
この記事では、Node.js を使用して、単純な単一チャット機能、つまり 2 人のユーザー間のリアルタイム チャットを実装します。
必要なツールとテクノロジー:
Node.js- Express Framework
- Socket.IO
-
プロジェクトの作成-
まず、新しい Node.js プロジェクトを作成する必要があります。 npm init コマンドを使用してプロジェクトを初期化することも、他の方法を使用してプロジェクト フォルダーを作成することもできます。
依存関係のインストール-
次に、Express ライブラリと Socket.IO ライブラリをインストールする必要があります。プロジェクト フォルダーでコマンド ラインを開き、次のコマンドを入力します。
npm install express socket.io --save
ログイン後にコピー
これにより、Express ライブラリと Socket.IO ライブラリがインストールされ、package.json ファイルに追加されます。
サーバーの作成
プロジェクト フォルダーに、server.js というファイルを作成します。これがメイン サーバー ファイルです。次のコードを追加します:
const express = require('express');
const app = express();
const server = app.listen(3000, () => {
console.log('Server is listening on port 3000');
});
ログイン後にコピー
これにより、Express アプリケーションが作成され、ポート 3000 にバインドされます。これで、ブラウザを開いて http://localhost:3000 にアクセスして、サーバーが適切に実行されていることをテストできます。すべてが正常であれば、アプリケーションにルートを追加していないため、「Cannot GET /」というメッセージが表示されます。
チャット ルームの作成
次に、2 人の異なるユーザー間のリアルタイム チャット機能を実装するためにチャット ルームを作成する必要があります。このために、Socket.IO ライブラリを使用してリアルタイムのイベントと通信を処理できます。
まず、次のコードをserver.js ファイルに追加する必要があります。
const io = require('socket.io')(server);
io.on('connection', (socket) => {
console.log('A user connected');
socket.on('disconnect', () => {
console.log('A user disconnected');
});
});
ログイン後にコピー
これにより、Socket.IO インスタンスが作成され、既存の HTTP サーバーにバインドされます。新しい接続がある場合、コールバック関数は「ユーザーが接続しました」というメッセージを出力します。接続が切断されると、コールバック関数は「ユーザーが切断されました」というメッセージを出力します。
これで、チャット ルームにメッセージを送受信する機能を追加できます。これには、Socket.IO の Emit() メソッドと on() メソッドを使用できます。
次のコードをserver.js ファイルに追加します。
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);
});
});
ログイン後にコピー
これにより、ユーザーはメッセージを送信し、接続されているすべてのクライアントにメッセージをブロードキャストできるようになります。
クライアントの作成
次に、単純な HTML と JavaScript ページを使用して Socket.IO サーバーに接続し、メッセージの送受信機能を実装する必要があります。プロジェクト フォルダーに、index.html という名前の新しいファイルを作成し、次のコードを追加します。
この HTML ファイルでは、DOM 操作を簡略化するために jQuery ライブラリを使用しています。これには、入力ボックスと「送信」ボタンに加えて、すべてのメッセージを表示する