JavaScript

构建一个Node.js支持的聊天室Web应用程序:Node, MongoDB和Socket

Rami Sayar
分享

本文是微软网络开发技术系列的一部分。感谢您对合作伙伴的支持，是他们让SitePoint成为可能。必威西盟体育网页登录

这node . js教程系列将帮助您构建一个完全部署在云中的node .js支持的实时聊天室web应用程序。在本系列中，您将学习如何设置node . js在你的Windows机器上(或者如果你在Mac上，只学习概念)，如何开发一个web前端表达，如何部署一个Node.js Express应用到Azure，如何使用套接字。IO如何添加实时层，以及如何将其部署在一起。

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

第1部分- Node.js简介

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

第3部分-使用Node.js, Mongo和Socket构建后端。IO

第4部分-用引导建立聊天室用户界面

第5部分-用WebSockets连接聊天室

第6部分-最终和调试远程Node.js应用程序

第3部分-用Node.js, Socket构建聊天室后端。IO和Mongo

欢迎来到实践Node.js教程系列的第3部分:构建一个Node.js支持的聊天室web应用程序。在这一部分中，我将向您展示如何使用现有的基于express的Node.js应用程序来创建一个支持WebSocket的聊天室后端。

什么是WebSockets?什么是Socket.IO?

WebSocket是一种协议，旨在允许web应用程序在web浏览器和web服务器之间通过TCP(即双向通信)创建一个全双工通道。它完全兼容HTTP，并使用TCP端口号80。WebSocket使web应用程序变得实时，并支持客户端和服务器之间的高级交互。包括Internet Explorer、谷歌Chrome、Firefox、Safari和Opera在内的多种浏览器都支持它。

套接字。IO是一个JavaScript库和Node.js模块，允许您简单快速地创建实时双向基于事件的通信应用程序。它极大地简化了使用WebSockets的过程。我们将使用Socket。IOv1.0 to make our chatroom app.

添加插座。IO,package.json

package.json保存与项目相关的各种元数据(包括其依赖项)的文件。NPM可以使用这个文件下载项目所需的模块。看看这个交互式解释的包。Json和它可以包含的内容。

让我们添加Socket。IO,the project as a dependency. There are two ways to do that.

  1. 如果你已经跟随教程系列并且在Visual Studio中设置了一个项目，右键单击项目的npm部分并选择“Install New npm Packages…”

安装新的npm包

一旦窗口打开，搜索“socket”。io”, select the top result and check the “Add to package.json” checkbox. Click the “Install Package” button. This will install Socket.IO into your project and add it to the package.json file.

添加的套接字。IO到npm

package.json

｛“名称”：“NodeChatroom”，“版本”：“0.0.0”，“描述”：“NodeChatroom”，“主要”：“app.js”，“作者”：｛“名称”：“Rami Sayar”，“电子邮件”：＂＂｝，“依赖”：｛“表达”：“3.4.4”，“玉”：“*”，“socket . io”：“^ 1.0.6”，“笔”：“*”｝｝
  1. 如果您在OS X或Linux上，您可以通过在项目文件夹的根目录中运行以下命令来实现与上述相同的操作。
npm安装——保存socket . io

添加插座。IO到app.js

下一步是添加Socket。IO,app.js．你可以通过替换下面的代码来实现这一点…

http．createServer（应用程序）．听（应用程序．得到（“端口”），函数（）｛控制台．日志（'快速服务器监听端口'+应用程序．得到（“端口”））；｝）；

与:……

var服务＝http．createServer（应用程序）；vario＝需要（“socket . io”）（服务）；服务．听（应用程序．得到（“端口”），函数（）｛控制台．日志（'快速服务器监听端口'+应用程序．得到（“端口”））；｝）；

这将在变量中捕获HTTP服务器服务并传递那个HTTP服务器，这样套接字。IO模块可以附加到它。最后一个代码块采用服务变量，并执行听启动HTTP服务器的函数。

记录用户的加入和离开

理想情况下，我们希望记录一个用户加入聊天室。下面的代码通过连接一个回调函数来实现这一点连接事件通过WebSocket发送到我们的HTTP服务器。在回调函数中，我们调用console.log记录用户的连接。我们可以在调用后添加此代码serve.listen．

io．在（“连接”，函数（套接字）｛控制台．日志（“用户连接”）；｝）；

要在用户断开连接时执行相同的操作，我们必须连接断开连接事件。在前面代码块的控制台日志之后添加以下代码。

套接字．在（“断开”，函数（）｛控制台．日志（“用户断开连接”）；｝）；

最后，代码看起来像这样:

io．在（“连接”，函数（套接字）｛控制台．日志（“用户连接”）；套接字．在（“断开”，函数（）｛控制台．日志（“用户断开连接”）；｝）；｝）；

广播在聊天频道上收到的消息

套接字。IOgives us a function called发出发送事件。

收到的任何消息闲谈，聊天通道将通过调用广播到此套接字上的所有其他连接发出与广播标记。

套接字．在（“聊天”，函数（味精）｛套接字．广播．发出（“聊天”，味精）；｝）；

最后，代码看起来像这样:

io．在（“连接”，函数（套接字）｛控制台．日志（“用户连接”）；套接字．在（“断开”，函数（）｛控制台．日志（“用户断开连接”）；｝）；套接字．在（“聊天”，函数（味精）｛套接字．广播．发出（“聊天”，味精）；｝）；｝）；

保存消息到NoSQL数据库

聊天室应该将聊天消息保存到一个简单的数据存储中。通常，在Node中有两种保存到数据库的方法;您可以使用特定于数据库的驱动程序，也可以使用ORM。在本教程中，我将向您展示如何将消息保存到MongoDB。当然，您可以使用任何其他您喜欢的数据库，包括SQL数据库，如PostgreSQL或MySQL。

您应该确保有一个要连接的MongoDB。您可以使用第三方服务托管您的MongoDB，如MongoHQ或MongoLab。看看这个教程看看你能不能在Azure中使用MongoLab Add-On创建MongoDB．当你读到“创建应用”部分时，你可以停止阅读，只要确保保存MONGOLAB_URI某个你稍后可以轻易进入的地方。

一旦你创建了MongoDB，你就有了MONGOLAB_URI对于数据库-在你已经复制到剪贴板的连接信息下-你要确保该URI对应用程序可用。在代码中或源代码管理工具中的配置文件中添加诸如此URI之类的敏感信息并不是最佳实践。您可以将该值添加到Azure Web应用程序的“配置”菜单中的“连接字符串”列表中(例如在您使用的教程中)，也可以将其添加到“应用程序设置”列表中(使用“名称”CUSTOMCONNSTR_MONGOLAB_URI)．在您的本地机器上，您可以将其添加到具有名称的环境变量中CUSTOMCONNSTR_MONGOLAB_URI和URI的值。

下一步是为我们的项目添加对MongoDB的支持。中的dependencies对象中添加下面的行可以做到这一点package.json．确保将更改保存到文件中。

“mongodb”：“^ 1.4.10”，

在解决方案资源管理器中右键单击项目的npm部分，显示右键单击上下文菜单。在内容菜单中单击“Install missing packages”，安装MongoDB包，使其可以作为模块使用。

安装MongoDB

我们希望导入该模块，以便能够在app.js中使用MongoDB客户端对象。您可以在第一行代码之后添加以下代码行要求(")函数调用，比如第11行。

var蒙戈＝需要（mongodb的）．MongoClient；

的URI连接到数据库CUSTOMCONNSTR_MONGOLAB_URI环境变量。一旦连接，我们希望将收到的聊天消息插入到套接字连接中。

蒙戈．连接（过程．env．CUSTOMCONNSTR_MONGOLAB_URI，函数（犯错，db）｛var集合＝db．集合（“聊天记录”）；集合．插入（｛内容：味精｝，函数（犯错，o）｛如果（犯错）｛控制台．警告（犯错．消息）；｝其他的｛控制台．日志（"聊天信息插入数据库:"+味精）；｝｝）；｝）；

在上面的代码中可以看到，我们使用process.env对象获取环境变量值。我们进入数据库中的集合，调用插入函数使用对象中的内容。

现在每条消息都被保存到我们的MongoDB数据库中。

发出最近收到的10条消息

当然，我们不希望用户在加入聊天室后感到迷茫，所以我们应该确保将最近收到的10条消息发送到服务器，这样至少我们可以为他们提供一些上下文。为此，我们需要连接MongoDB。在本例中，我避免将所有套接字代码都包装为一个到数据库的连接，这样即使失去了数据库连接，服务器也可以继续工作。

我们还将排序和限制我的查询到最后10条消息，我们将使用MongoDB生成_id由于它包含一个时间戳(尽管在更可伸缩的情况下，您将希望在聊天消息中创建一个专用的时间戳)，因此我们将调用限制函数将结果限制为10条消息。

我们将从MongoDB传输结果，这样当它们到达聊天室时，我可以尽快将它们发送到聊天室。

蒙戈．连接（过程．env．CUSTOMCONNSTR_MONGOLAB_URI，函数（犯错，db）｛var集合＝db．集合（“聊天记录”）var流＝集合．找到（）．排序（｛_id：-1｝）．限制（10）．流（）；流．在（“数据”，函数（闲谈，聊天）｛套接字．发出（“聊天”，闲谈，聊天．内容）；｝）；｝）；

上面的代码完成前面段落中解释的工作。

部署到Azure

您可以按照过去的教程(例如第2部分)．

结论

总之，我们有了一个聊天系统，它能够将通过WebSockets接收到的消息广播给所有其他连接的客户端。系统将消息保存到数据库中，并检索最近10条消息，为每个加入聊天室的新用户提供上下文。

请继续关注第四部分!

第4部分-用Bootstrap构建聊天室UI在这里．您可以通过以下方式了解本文和其他文章的最新信息我的推特账号．

更多关于Azure上的Node的学习

为了更深入地了解node，我的课程是可以在这里微软虚拟学院。

或者类似节点主题的短视频:

本文是微软网络开发技术系列的一部分。我们很高兴能分享斯巴达式的项目和它的新的渲染引擎和你在一起。获得免费虚拟机或在Mac、iOS、Android或Windows设备上远程测试现代的。即．

Baidu