NodeJS、Socket.io、ExpressJS を使用したライブ チャット

NodeJS を使用すると、私の好きな言語の 1 つである JavaScript でバックエンド コードを作成できます。これは、リアルタイム アプリケーションを構築するのに最適なテクノロジです。このチュートリアルでは、ExpressJS と Socket.io を使用して Web チャット アプリケーションを構築する方法を説明します。

---

環境のセットアップ

もちろん、最初に行うことは、システムに NodeJS をインストールすることです。 Windows または Mac ユーザーの場合は、nodejs.org にアクセスしてインストーラーをダウンロードできます。 Linux をお好みの場合は、このリンクを参照することをお勧めします。これについては詳しく説明しませんが、インストールに関する問題が発生した場合は、この記事の下にコメントを残していただければ喜んでサポートさせていただきます。

NodeJS をインストールした後、必要なツールをセットアップできます。

1. ExpressJS - これはサーバーとユーザーへの応答を管理します
2. Jade - テンプレート エンジン
3. Socket.io - フロントエンドとバックエンド間のリアルタイム通信を可能にします

続けて、空のディレクトリに次の内容を含む package.json ファイルを作成します。

リーリー

コンソール (Windows - コマンド プロンプト) を使用して、フォルダーに移動し、次のコマンドを実行します。

リーリー

数秒以内に、必要な依存関係がすべて node_modules ディレクトリにダウンロードされます。

---

バックエンドの開発

アプリケーションの HTML ページを提供する単純なサーバーから始めて、次に、より興味深い部分であるリアルタイム通信に進みましょう。次のコア Expressjs コードを使用して、index.js ファイルを作成します:

リーリー

上記では、アプリケーションを作成し、そのポートを定義しました。次に、ルートを登録します。この場合、これはパラメーターのない単純な GET リクエストです。現在、ルートのハンドラーはクライアントにテキストを送信するだけです。最後に、もちろん、一番下でサーバーを実行します。アプリケーションを初期化するには、コンソールから次のコマンドを実行します。 リーリー

サーバーが実行されているため、

http://127.0.0.1:3700/ を開くと、次の内容が表示されるはずです。 リーリー 「うまくいきます」

の代わりに、HTML を提供する必要があります。プレーン HTML の代わりにテンプレート エンジンを使用する方が有益な場合があります。 Jade は優れた選択肢であり、ExpressJS との統合が優れています。これは私が自分のプロジェクトでよく使うものです。

tpl というディレクトリを作成し、その中に次の page.jade ファイルを配置します。 リーリー Jade の構文は複雑ではありませんが、完全なガイドについては、jade-lang.com を参照することをお勧めします。 ExpressJS で Jade を使用するには、以下を設定する必要があります。 リーリー このコードは、テンプレート ファイルの場所と使用するテンプレート エンジンを Express に伝えます。これはすべて、テンプレート コードを処理する関数を指定します。すべての設定が完了したら、

response

オブジェクトの

.render

メソッドを使用して、Jade コードをユーザーに送信できます。 この時点の出力は特別なものではなく、チャット メッセージと 2 つのコントロールのコンテナとして機能する div 要素 (ID

content

を持つ要素) にすぎません。 (入力フィールドとボタン)、メッセージを送信するために使用します。 フロントエンド ロジックを保持するために外部 JavaScript ファイルを使用するため、ExpressJS にそのようなリソースを探す場所を指示する必要があります。空のディレクトリ public を作成し、 p>.listen

メソッドを呼び出す前に次の行を追加します。 リーリー ここまでは順調です。GET リクエストに正常に応答するサーバーができました。次に、Socket.io 統合を追加します。この行を変更します: リーリー ＃＃＃に：＃＃＃ リーリー 上記では、ExpressJS サーバーを Socket.io に渡しました。実際、ライブ通信は引き続き同じポート上で行われます。

次に、クライアントからメッセージを受信し、他のすべてのクライアントにメッセージを送信するコードを記述する必要があります。すべての Socket.io アプリケーションは、

connection

ハンドラーから始まります。 1 つは必要です:

リーリー

ハンドラー

socket

に渡されるオブジェクトは、実際にはクライアントのソケットです。これは、サーバーとユーザーのブラウザ間の接続ポイントと考えてください。接続が成功すると、welcome タイプのメッセージを送信し、もちろん受信側として機能する別のハンドラーをバインドします。その結果、クライアントは

send

という名前のメッセージを発行する必要があります。これをキャプチャします。次に、io.sockets.emit を使用して、ユーザーが送信したデータを他のすべてのソケットに転送します。 上記のコードにより、バックエンドはクライアントとメッセージを送受信できるようになります。フロントエンドコードを追加しましょう。 フロントエンドの開発

chat.js

を作成し、アプリケーションの

---

public

ディレクトリに配置します。次のコードを貼り付けます:

window.onload = function() {

    var messages = [];
    var socket = io.connect('http://localhost:3700');
    var field = document.getElementById("field");
    var sendButton = document.getElementById("send");
    var content = document.getElementById("content");

    socket.on('message', function (data) {
        if(data.message) {
            messages.push(data.message);
            var html = '';
            for(var i=0; i<messages.length; i++) {
                html += messages[i] + '<br />';
            }
            content.innerHTML = html;
        } else {
            console.log("There is a problem:", data);
        }
    });

    sendButton.onclick = function() {
        var text = field.value;
        socket.emit('send', { message: text });
    };

}

我们的逻辑包装在 .onload 处理程序中，只是为了确保所有标记和外部 JavaScript 均已完全加载。在接下来的几行中，我们创建一个数组，它将存储所有消息、一个 socket 对象以及一些 DOM 元素的快捷方式。同样，与后端类似，我们绑定一个函数，它将对套接字的活动做出反应。在我们的例子中，这是一个名为 message 的事件。当此类事件发生时，我们期望收到一个对象，data，其属性为 message。将该消息添加到我们的存储中并更新 content div。我们还包含了发送消息的逻辑。这非常简单，只需发出一条名为 send 的消息。

如果你打开http://localhost:3700，你会遇到一些错误弹出窗口。这是因为我们需要更新 page.jade 以包含必要的 JavaScript 文件。

head
    title= "Real time web chat"
    script(src='/chat.js')
    script(src='/socket.io/socket.io.js')

请注意，Socket.io 管理 socket.io.js 的交付。您不必担心手动下载此文件。

我们可以在控制台中使用 node index.js 再次运行我们的服务器并打开http://localhost:3700。您应该会看到欢迎消息。当然，如果你发送一些东西，应该显示在内容的div中。如果您想确保它有效，请打开一个新选项卡（或者更好的是，一个新浏览器）并加载应用程序。 Socket.io 的伟大之处在于，即使您停止 NodeJS 服务器它也能工作。前端将继续工作。一旦服务器再次启动，您的聊天也会正常。

在目前的状态下，我们的聊天并不完美，需要一些改进。

---

改进

我们需要做的第一个更改是消息的标识。目前，尚不清楚哪些消息是由谁发送的。好处是我们不必更新 NodeJS 代码来实现这一点。这是因为服务器只是转发 data 对象。因此，我们需要在那里添加一个新属性，并稍后读取它。在对 chat.js 进行更正之前，让我们添加一个新的 input 字段，用户可以在其中添加他/她的姓名。在 page.jade 中，更改 controls div:

.controls
    | Name: 
    input#name(style='width:350px;')
    br
    input#field(style='width:350px;')
    input#send(type='button', value='send')

接下来，在code.js中：

window.onload = function() {

    var messages = [];
    var socket = io.connect('http://localhost:3700');
    var field = document.getElementById("field");
    var sendButton = document.getElementById("send");
    var content = document.getElementById("content");
    var name = document.getElementById("name");

    socket.on('message', function (data) {
        if(data.message) {
            messages.push(data);
            var html = '';
            for(var i=0; i<messages.length; i++) {
                html += '<b>' + (messages[i].username ? messages[i].username : 'Server') + ': </b>';
                html += messages[i].message + '<br />';
            }
            content.innerHTML = html;
        } else {
            console.log("There is a problem:", data);
        }
    });

    sendButton.onclick = function() {
        if(name.value == "") {
            alert("Please type your name!");
        } else {
            var text = field.value;
            socket.emit('send', { message: text, username: name.value });
        }
    };

}

为了总结这些变化，我们：

1. 为用户名的 input 字段添加了新快捷方式
2. 稍微更新了消息的呈现方式
3. 向对象添加了一个新的 username 属性，该属性将发送到服务器

如果消息数量过多，用户将需要滚动 div:

content.innerHTML = html;
content.scrollTop = content.scrollHeight;

请记住，上述解决方案可能不适用于 IE7 及更低版本，但没关系：IE7 是时候消失了。但是，如果您想确保支持，请随意使用 jQuery：

$("#content").scrollTop($("#content")[0].scrollHeight);

如果发送消息后输入字段被清除，那就太好了：

socket.emit('send', { message: text, username: name.value });
field.value = "";

最后一个无聊的问题是每次点击发送按钮。通过一点 jQuery，我们可以监听用户何时按下 Enter 键。

$(document).ready(function() {
    $("#field").keyup(function(e) {
        if(e.keyCode == 13) {
            sendMessage();
        }
    });
});

可以注册函数 sendMessage，如下所示：

sendButton.onclick = sendMessage = function() {
    ...
};

请注意，这不是最佳实践，因为它注册为全局函数。但是，对于我们在这里的小测试来说，一切都很好。

---

结论

NodeJS 是一项非常有用的技术，它为我们提供了巨大的力量和乐趣，特别是考虑到我们可以编写纯 JavaScript 的事实。正如您所看到的，仅用几行代码，我们就编写了一个功能齐全的实时聊天应用程序。非常整洁！

想要了解有关使用 ExpressJS 构建 Web 应用程序的更多信息？我们为您服务！

以上がNodeJS、Socket.io、ExpressJS を使用したライブ チャットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。