自制chatroom_构建一个由Node.js驱动的Chatroom Web App：与WebSockets连接

自制chatroom

本文是Microsoft的Web开发技术系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

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

本教程将使用可选的Visual Studio和Visual Studio插件的Node.js工具作为开发环境。 我提供了两个工具的免费下载链接。 这是中级文章的初学者–您应该了解HTML5和JavaScript。

第1部分– Node.js简介

第2部分–欢迎使用带有Node.js和Azure的Express

第3部分–使用Node.js，Mongo和Socket.IO构建后端

第4部分–使用Bootstrap构建Chatroom UI

第5部分–将聊天室与WebSockets连接

第6部分–结局和调试远程Node.js应用

第5部分–将聊天室与WebSockets连接

欢迎来到动手Node.js教程系列的第5部分：构建一个由Node.js驱动的聊天室Web应用程序。

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

添加jQuery，SocketIO和index.js

开始编写前端JavaScript代码之前，我们要做的第一件事是确保Node.js服务器将交付所需的文件和依赖项。 让我们首先将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 Content Delivery Network上托管的jQuery。 该CDN托管流行的第三方JavaScript库（例如jQuery），并使您可以轻松地将它们添加到Web应用程序中。 通过使用CDN，可以大大提高Ajax应用程序的性能。 CDN的内容缓存在世界各地的服务器上。 如果您需要使用安全套接字层提供网页服务，则CDN支持SSL（HTTPS）。

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

block body_end

我这样做是为了使任何扩展layout.jade Jade文件也可以在body标签结尾之前添加脚本标签。

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

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

确保该块以零缩进开始，以遵循Jade编码约定。 如果运行Node.js服务器并浏览到浏览器的主页，您将在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); });

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

不要忘记在重新运行app.js文件之前设置CUSTOMCONNSTR_MONGOLAB_URI环境变量，否则Node.js后端在无法连接到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的$()函数和val()方法在消息框中获取字符串值。

4号线

我们在第1行中创建的套接字变量上使用emit()函数，以在“聊天”通道上发送包含消息框值的消息。

5-7行

此时，我们将消息框中的消息附加到以messages为ID的div上，以便用户可以看到消息已发送。 我们将消息框的值分配给一个空字符串以清除它。

9-10行

我们希望将在聊天通道上从其他用户收到的消息附加到以messages为ID的div上。 Node.js后端不会重新发送客户端写回其自身的消息，但这没关系，因为我们立即在click()函数处理程序中添加了该消息。

结论

瞧！ 您已经使用WebSockets连接了后端和前端。 如果您要确定聊天室中的人或为每个用户添加头像，则由您自己决定，但可以继续使用此聊天室。 在下一部分中，我将向您展示如何将此匿名聊天室部署到Azure并向您展示如何调试它。

敬请关注第6部分！

第6部分-结局和调试远程节点应用程序！ 在这里 。 您可以通过关注我的Twitter帐户来了解有关本文和其他文章的最新信息

在Azure上学习更多Node.js

要对节点进行更深入的学习， 可以在Microsoft Virtual Academy上找到我的课程。

或一些类似节点主题的短格式视频：

• 六部分系列：使用node.JS构建应用

• 漫步节点（Coding4Fun）

本文是Microsoft的Web开发技术系列的一部分。 我们很高兴与您分享Project Spartan及其新的渲染引擎 。 获取免费的虚拟机或者在你的Mac，iOS设备，Android或Windows设备上远程测试modern.IE 。

翻译自: https://www.sitepoint.com/build-node-js-powered-chatroom-web-app-connecting-websockets/

自制chatroom