实践：构建一个 Node.js 驱动的聊天室 Web 应用 | 第 5 部分

Rami Sayar

0/5 (0投票)

2015年5月25日

CPOL

5分钟阅读

5637

在本期中，我将向您展示如何将前端聊天室连接到 Node 聊天室后端。

本Node.js 教程系列将帮助您构建一个完全部署在云中的 Node.js 驱动的实时聊天室 Web 应用。在本系列中，您将学习如何在 Windows 计算机上设置 Node.js，如何使用 Express 开发 Web 前端，如何将基于 Node Express 的应用部署到 Microsoft Azure，如何使用 Socket.IO 添加实时层，以及如何将所有这些整合在一起。

级别：初学者到中级——您需要了解 HTML5 和 JavaScript

第一部分 - Node.js 入门

第二部分 - 欢迎使用 Node.js 和 Azure 的 Express

第三部分 - 使用 Node、Mongo 和 Socket.IO 构建后端

第四部分 – 使用 Bootstrap 构建聊天室 UI

第五部分 - 使用 WebSockets 连接聊天室

第六部分 – 最终章和调试远程 Node 应用

第 5 部分 – 使用 WebSockets 连接聊天室

欢迎来到实践 Node.js 教程系列《构建一个 Node.js 驱动的聊天室 Web 应用》的第 5 部分。

在本期中，我将向您展示如何将前端聊天室连接到您在第 2 部分、第 3 部分和第 4 部分中构建的 Node 聊天室后端。

添加 jQuery、SocketIO 和 index.js

在开始编写前端 JavaScript 代码之前，我们要做的第一件事是确保所需的文件和依赖项将由 Node 服务器提供。首先，让我们将 jQuery 和 Socket.IO 添加到 layout.jade 文件中，该文件被我们项目中的所有其他 jade 文件继承。

将指向 bootstrap.min.js 的单个链接替换为指向我们所需所有其他文件的链接。

script(type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js')
script(type='text/javascript' src='/js/bootstrap.min.js')
script(type='text/javascript' src='/socket.io/socket.io.js')

请注意，第一行链接到托管在 Microsoft Ajax 内容分发网络上的 jQuery。此 CDN 托管流行的第三方 JavaScript 库（如 jQuery），并使您能够轻松地将它们添加到 Web 应用程序中。通过使用 CDN，您可以显著提高 Ajax 应用程序的性能。CDN 的内容缓存在位于世界各地的服务器上。CDN 支持 SSL (HTTPS)，以防您需要使用安全套接字层 (Secure Sockets Layer) 提供网页。

现在，我将在最后添加另一行来创建一个新的块。

block body_end

我这样做是为了让任何继承 layout.jade 的 Jade 文件也能在 body 标签结束前添加 script 标签。

现在，我们要使用那个新块添加一个指向我们 index.js 文件的链接，该文件将在 public/js 文件夹中创建，请确保创建该文件。

block body_end
  script(type='text/javascript' src='/js/index.js')

请确保该块以零缩进开始，以遵循 Jade 编码约定。如果您运行 Node 服务器并在浏览器中导航到主页，您会注意到在 F12 工具中，这些文件正在被正确提供。

对 app.js 进行快速更改

我有几件事想在 app.js 中更改。首先，我想反转排序方向，以便最早的消息先发送；其次，我希望在接收新消息的同一频道上发出之前接收到的聊天消息。这些更改将转到 app.js 中的第 49 行和第 50 行。这是结果：

var stream = collection.find().sort().limit(10).stream();
stream.on('data', function (chat) { socket.emit('chat', chat.content); });

在重新运行 app.js 文件之前，请不要忘记设置 CUSTOMCONNSTR_MONGOLAB_URI 环境变量，否则当 Node 后端无法连接到您的 MongoDB 时将会崩溃。

激活发送按钮

是时候激活发送按钮，通过 WebSockets 将消息框中的消息发送到聊天频道上的后端服务器了。

	var socket = io();
$('#send-message-btn').click(function () {
    var msg = $('#message-box').val();
    socket.emit('chat', msg);
    $('#messages').append($('<p>').text(msg));
    $('#message-box').val('');
    return false;
});
socket.on('chat', function (msg) {
    $('#messages').append($('<p>').text(msg));
});

线 1

我们要创建一个套接字，可以通过调用 socket.io-client.js 文件中的 io() 函数来实现。

线 2

接下来，我们希望使用 jQuery 的 $ 函数和 click 事件处理程序，在单击发送消息按钮时执行一个函数。

第 3 行

我们将使用 jQuery 的 $ 函数获取消息框中的字符串值。

第 4 行

我们在 line 1 中创建的 socket 变量上使用 emit 函数，在“chat”频道上发送一条包含消息框值的消息。

第 5-7 行

此时，我们将消息框中的消息追加到 #messages div 中，以便用户可以看到消息已被发送。我们将把消息框的值赋给一个空字符串以清空它。

第 9-10 行

我们要将从其他用户在 chat 频道上接收到的消息追加到 #messages div 中。Node 后端不会将客户端自己写的消息重新发送给自己，但这没关系，因为我们在 click 函数处理程序中立即添加了消息。

结论

瞧！您已经使用 WebSockets 将后端和前端连接起来了。如果您想识别聊天室中的用户或为每个用户添加头像，这取决于您，但您可以在此基础上继续使用这个聊天室。在下一期中，我将向您展示如何将这个匿名聊天室部署到 Azure，并向您展示如何对其进行调试。

敬请关注第 6 部分！

第 6 部分——终结和调试远程 Node 应用！——将很快发布到 CodeProject，也可以在我的博客这里找到。您可以通过关注我的 Twitter 帐户：@ramisayar 来及时了解此文章和其他文章。