搜索
首页web前端js教程构建一个node.js供电的聊天室网络应用:节点,mongodb和套接字

构建一个node.js供电的聊天室网络应用:节点,mongodb和套接字

钥匙要点

  • >该教程提供了使用node.js,mongodb和socket.io构建实时聊天室应用程序的逐步指南。聊天室将完全部署在云中。
  • >
  • >教程解释了如何使用socket.io创建基于双向事件的实时交流应用程序。它简化了大量使用Websocket的过程。
  • >
  • >教程显示了如何记录用户加入和离开聊天室以及如何在聊天频道上收到的消息传播到套接字上的所有其他连接。>>>>>>>>>
  • >教程演示了如何将聊天消息保存到mongoDB数据库,以及如何发射收到的最后10条消息,以向加入聊天室的每个新用户提供上下文。
  • >
  • >教程以聊天系统的结尾,能够向所有其他连接的客户端广播通过WebSocket收到的消息。系统将消息保存到数据库,并为每个新用户检索最后10条消息。
  • >
本文是Microsoft的Web开发技术系列的一部分。感谢您支持使SitietPoint成为可能的合作伙伴。 >该教程将使用可选的Visual Studio和Node.js工具作为开发环境。我为这两个工具免费下载提供了链接。这是中级文章的初学者 - 您有望了解HTML5和JavaScript。 第1部分 - Node.js

简介

第2部分 - 欢迎使用node.js和azure

第3部分 - 使用node.js,mongo and socket.io 构建后端
第4部分 - 使用Bootstrap构建聊天室UI

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

第6部分 - 结局和调试远程node.js应用

第3部分 - 使用node.js,socket.io和mongo

建立聊天室后端

欢迎使用动手Node.js教程系列的第3部分:构建一个Node.js驱动的聊天室Web应用程序。 在本期中,我将向您展示如何使用您现有的基于Express的Node.js应用程序来创建聊天室后端,并提供WebSocket支持。

什么是Websocket?什么是socket.io?

websocket是一种协议,旨在允许Web应用程序通过Web浏览器和Web服务器之间的TCP(即进行双向通信)创建一个完整的通道。它与HTTP完全兼容,并使用TCP端口编号80。WebSocket允许Web应用程序成为实时,并支持客户端和服务器之间的高级交互。它得到了多个浏览器的支持,包括Internet Explorer,Google Chrome,Firefox,Safari和Opera。

> socket.io是一个JavaScript库和node.js模块,可让您简单,快速地创建基于双向事件的实时双向通信应用。它简化了大量使用Websocket的过程。我们将使用socket.io v1.0来制作我们的聊天室应用。

>

>将socket.io添加到package.json

package.json是一个包含与项目相关的各种元数据的文件,包括其依赖关系。 NPM可以使用此文件下载项目所需的模块。看一下package.json及其可以包含的交互式解释。>

>让我们将socket.io添加到项目中。有两种方法可以做到。

>

如果您一直关注教程系列,并且在Visual Studio设置中进行了一个项目,请右键单击项目的NPM部分,然后选择“安装新的NPM软件包……”

  1. >打开窗口后,搜索“ socket.io”,选择顶部结果,然后检查“添加到package.json”复选框。单击“安装软件包”按钮。这将将socket.io安装到您的项目中,并将其添加到package.json文件中。
package.json 构建一个node.js供电的聊天室网络应用:节点,mongodb和套接字

构建一个node.js供电的聊天室网络应用:节点,mongodb和套接字如果您在OS X或Linux上,则可以通过在项目文件夹的根部运行以下命令来实现与上面的操作。

<span>{
</span>  <span>"name": "NodeChatroom",
</span>  <span>"version": "0.0.0",
</span>  <span>"description": "NodeChatroom",
</span>  <span>"main": "app.js",
</span>  <span>"author": {
</span>    <span>"name": "Rami Sayar",
</span>    <span>"email": ""
</span>  <span>},
</span>  <span>"dependencies": {
</span>    <span>"express": "3.4.4",
</span>    <span>"jade": "*",
</span>    <span>"socket.io": "^1.0.6",
</span>    <span>"stylus": "*"
</span>  <span>}
</span><span>}</span>
    >将socket.io添加到app.js
  1. 下一步是将socket.io添加到app.js。您可以通过替换以下代码来实现这一目标……
>
<span>npm install --save socket.io</span>

…with:

>这将在称为服务的变量中捕获HTTP服务器,并通过该http服务器,以便socket.io模块可以连接到它。最后一个代码块采用服务变量并执行启动HTTP服务器的侦听功能。>
http<span>.createServer(app).listen(app.get('port'), function(){
</span>  <span>console.log('Express server listening on port ' + app.get('port'));
</span><span>});</span>
记录用户加入并离开

>

>理想情况下,我们想记录加入聊天室的用户。以下代码可以通过挂接回调函数在每个连接事件上通过Websocket到我们的HTTP服务器执行的来实现。在回调函数中,我们调用Console.log记录该用户已连接的。我们可以在致电serve.listen后添加此代码。
<span>var serve = http.createServer(app);
</span><span>var io = require('socket.io')(serve);
</span>
serve<span>.listen(app.get('port'), function() {
</span>    <span>console.log('Express server listening on port ' + app.get('port'));
</span><span>});</span>
>
<span>{
</span>  <span>"name": "NodeChatroom",
</span>  <span>"version": "0.0.0",
</span>  <span>"description": "NodeChatroom",
</span>  <span>"main": "app.js",
</span>  <span>"author": {
</span>    <span>"name": "Rami Sayar",
</span>    <span>"email": ""
</span>  <span>},
</span>  <span>"dependencies": {
</span>    <span>"express": "3.4.4",
</span>    <span>"jade": "*",
</span>    <span>"socket.io": "^1.0.6",
</span>    <span>"stylus": "*"
</span>  <span>}
</span><span>}</span>

要为用户断开连接时做同样的事情,我们必须连接每个插座的断开事件。在上一个代码块的控制台日志之后,在内部添加以下代码。

>
<span>npm install --save socket.io</span>

>最后,代码看起来像这样:

>
http<span>.createServer(app).listen(app.get('port'), function(){
</span>  <span>console.log('Express server listening on port ' + app.get('port'));
</span><span>});</span>

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

>

> socket.io为我们提供了一个称为emit的函数以发送事件。>

在聊天频道上收到的任何消息都将通过回调中的广播标志调用EMIT。

>最后,代码看起来像这样:
<span>var serve = http.createServer(app);
</span><span>var io = require('socket.io')(serve);
</span>
serve<span>.listen(app.get('port'), function() {
</span>    <span>console.log('Express server listening on port ' + app.get('port'));
</span><span>});</span>
>

>将消息保存到NOSQL数据库
io<span>.on('connection', function (socket) {
</span>    <span>console.log('a user connected');
</span><span>});</span>

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

>您应该确保您有一个可以连接到的mongodb。您可以使用第三方服务来托管MongoDB,例如Mongohq或Mongolab。看看本教程,以查看如何使用Azure中的蒙古插件创建MongoDB。当您到达“创建应用程序”部分时,您可以停止阅读,只需确保在以后可以轻松访问的Mongolab_uri。

>创建了一个mongoDB后,您将拥有数据库的mongolab_uri - 在您已复制到剪贴板的连接信息下,您将需要确保URI可用于应用程序。在源代码管理工具中,将诸如此URI之类的敏感信息(例如此URI)或配置文件中添加到最佳实践。您可以在Azure Web应用程序的“配置”菜单(例如在您使用的教程中)中将值添加到连接字符串列表中,也可以将其添加到应用程序设置列表中(带有uname customConnstr_mongolab_uri)。在本地计算机上,您可以将其添加到环境变量中,名称customconnstr_mongolab_uri和uri的值。

下一步是在我们的项目中增加对MongoDB的支持。您可以通过将以下行添加到package.json中的依赖项对象中来做到这一点。确保将您的更改保存到文件中。

在解决方案资源管理器中,在项目的NPM部分上右键单击右键单击,以显示右键单击上下文菜单。单击内容菜单中的“安装丢失的软件包”以安装MongoDB软件包,以便可以用作模块。

我们希望导入该模块,以便能够在app.js中使用mongoDB client对象。您可以在第一个需要('')函数调用(例如在第11行)之后添加以下代码行。
<span>{
</span>  <span>"name": "NodeChatroom",
</span>  <span>"version": "0.0.0",
</span>  <span>"description": "NodeChatroom",
</span>  <span>"main": "app.js",
</span>  <span>"author": {
</span>    <span>"name": "Rami Sayar",
</span>    <span>"email": ""
</span>  <span>},
</span>  <span>"dependencies": {
</span>    <span>"express": "3.4.4",
</span>    <span>"jade": "*",
</span>    <span>"socket.io": "^1.0.6",
</span>    <span>"stylus": "*"
</span>  <span>}
</span><span>}</span>

我们希望使用我们在customConnstr_mongolab_uri环境变量中使用的URI连接到数据库。连接后,我们想插入插座连接中收到的聊天消息。

>
<span>npm install --save socket.io</span>
如您在上面的代码中所看到的,我们使用process.env对象获取环境变量值。我们进入数据库中的集合,并将其称为插入函数,并使用对象中的内容。

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

发射最后10条消息

>当然,我们不希望我们的用户在加入聊天室后会感到迷失,因此我们应该确保将接收到的最后10条消息发送到服务器,因此至少我们可以给他们一些上下文。为此,我们需要连接mongodb。在这种情况下,我避免将所有套接字代码与数据库的一个连接包装,以便我仍然可以使服务器运行,即使它丢失了数据库连接。

>我们还需要将我的查询分类并将我的查询限制为最后10条消息,因为它包含时间戳,我们将使用MongoDB生成的_id(尽管在更可扩展的情况下,您将需要在聊天消息中创建一个专用时间戳),我们将限制函数调用以将结果限制在10条消息中。

>

>我们将从MongoDB中流式传输结果,以便我可以在它们到达时尽快将其发射到聊天室中。

上面的代码可以按照上一段中的解释来完成该作业。

>部署到Azure

http<span>.createServer(app).listen(app.get('port'), function(){
</span>  <span>console.log('Express server listening on port ' + app.get('port'));
</span><span>});</span>
>您可以按照过去的教程(例如第2部分)重新部署Azure。

结论

总而言之,我们有一个聊天系统,能够向所有其他连接的客户端广播通过Websocket收到的消息。该系统将消息保存到数据库并检索最后10条消息,以向连接聊天室的每个新用户提供上下文。

敬请期待第4部分!

>

第4部分 - 在这里构建使用Bootstrap的聊天室UI。您可以按照我的Twitter帐户来保持最新和其他文章的最新信息。

在Azure

上进行节点的更多学习

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

或类似节点主题上的一些较短的格式视频:>

六部分系列:用node.js

构建应用程序

漫步在节点(coding4fun)

  • 本文是Microsoft的Web Dev技术系列的一部分。我们很高兴与您共享Spartan项目及其新的渲染引擎。在Modern.ie

  • 经常询问有关构建node.js供电的聊天室网络应用程序的问题(常见问题解答)

    >如何确保使用Node.js,MongoDB和Socket.io?

    安全性构建的Chatroom Web应用程序的安全性是任何Web应用程序的重要方面。对于使用node.js,mongodb和socket.io构建的聊天室Web应用程序,您可以实施多种安全措施。首先,使用HTTP而不是HTTP来确保您的服务器和客户端之间的所有通信都已加密。其次,验证所有传入数据以防止SQL注入攻击。第三,使用JWT(JSON Web令牌)进行用户身份验证。最后,定期将您的所有依赖项更新到其最新版本,以避免潜在的安全漏洞。

    我可以将其他数据库与node.js集成在一起的聊天室Web应用程序?高度灵活,可以与各种数据库集成。尽管MongoDB是由于其可伸缩性和灵活性而是一种流行的选择,但您也可以根据您的特定需求使用其他数据库,例如MySQL,PostgreSQL或SQLITE。数据库的选择在很大程度上取决于您应用程序的数据要求和数据库的特定功能。

    >如何缩放我的node.js chatroom Web应用程序来处理更多用户? node.js聊天室网络应用程序,您可以使用负载平衡器在多个服务器上分发传入的流量。您还可以使用node.js中的聚类模块来创建所有共享服务器端口的子进程。此外,请考虑使用MongoDB等NOSQL数据库,该数据库可以轻松地进行水平扩展以处理更多数据。

    >

    我可以将其他实时技术而不是socket.io用于我的Chatroom Web应用程序? >是的,您可以使用其他几种实时技术,而不是socket.io。其中包括Websocket,服务器范围事件(SSE)以及Pusher或Firebase(例如Pusher或Firebase)的第三方服务。这些技术中的每一个都有其自己的优点和劣势,因此选择取决于您的特定需求。

    >

    >我如何测试我的node.js聊天室Web应用程序以确保其正常工作?是开发过程的重要组成部分。对于Node.js聊天室Web应用程序,您可以使用Mocha或Jest等测试框架编写单元测试和集成测试。您还可以使用邮递员或失眠等工具进行API测试。此外,请考虑使用柏树或木偶等端到端测试工具模拟用户交互并确保您的应用程序按预期工作。

    >如何将我的node.js聊天室Web应用程序部署到实时服务器?>有几个平台可让您部署Node.js Chatroom Web应用程序。其中包括Heroku,AWS,Google Cloud和Azure。每个平台都有其自己的部署过程,但是通常,您需要创建一个帐户,设置一个新项目并遵循平台的说明以部署您的应用程序。

    >我可以在我的Node.js Chatroom Web应用程序中添加多媒体支持吗?这可以通过集成Cloudinary或AWS S3(以存储和检索多媒体文件)等第三方服务或AWS S3来完成。您还可以使用socket.io实时发送和接收多媒体数据。

    >如何将用户身份验证添加到我的node.js chatroom web应用程序?

    任何聊天室网络应用程序的功能。对于Node.js应用程序,您可以使用Passport.js,Passport.js是处理用户身份验证的流行中间件。它支持各种身份验证策略,包括本地用户名和密码,Oauth和JWT。

    >我可以将其他前端框架与node.js一起使用我的聊天室Web应用程序?是后端技术,可以与任何前端框架或库一起使用。虽然教程使用普通的HTML和CSS,但您可以使用React,Angular或Vue.js(例如React,Angular或vue.js)来构建更复杂和交互式的用户界面。

    >

    >我如何处理Node.js Chatroom Web中的错误App?

    错误处理是任何Web应用程序的重要组成部分。在Node.js中,您可以使用中间件处理错误。这涉及创建一个有四个参数的特殊功能:错误,请求,响应等。然后,您可以使用此函数记录错误,向客户端发送错误响应,甚至将用户重定向到错误页面。

以上是构建一个node.js供电的聊天室网络应用:节点,mongodb和套接字的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
在JavaScript中替换字符串字符在JavaScript中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法:在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项,需使用正则表达式并添加全局标志g: str = str.replace(/fi

如何创建和发布自己的JavaScript库?如何创建和发布自己的JavaScript库?Mar 18, 2025 pm 03:12 PM

文章讨论了创建,发布和维护JavaScript库,专注于计划,开发,测试,文档和促销策略。

如何在浏览器中优化JavaScript代码以进行性能?如何在浏览器中优化JavaScript代码以进行性能?Mar 18, 2025 pm 03:14 PM

本文讨论了在浏览器中优化JavaScript性能的策略,重点是减少执行时间并最大程度地减少对页面负载速度的影响。

jQuery矩阵效果jQuery矩阵效果Mar 10, 2025 am 12:52 AM

将矩阵电影特效带入你的网页!这是一个基于著名电影《黑客帝国》的酷炫jQuery插件。该插件模拟了电影中经典的绿色字符特效,只需选择一张图片,插件就会将其转换为充满数字字符的矩阵风格画面。快来试试吧,非常有趣! 工作原理 插件将图片加载到画布上,读取像素和颜色值: data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data 插件巧妙地读取图片的矩形区域,并利用jQuery计算每个区域的平均颜色。然后,使用

如何使用浏览器开发人员工具有效调试JavaScript代码?如何使用浏览器开发人员工具有效调试JavaScript代码?Mar 18, 2025 pm 03:16 PM

本文讨论了使用浏览器开发人员工具的有效JavaScript调试,专注于设置断点,使用控制台和分析性能。

如何构建简单的jQuery滑块如何构建简单的jQuery滑块Mar 11, 2025 am 12:19 AM

本文将引导您使用jQuery库创建一个简单的图片轮播。我们将使用bxSlider库,它基于jQuery构建,并提供许多配置选项来设置轮播。 如今,图片轮播已成为网站必备功能——一图胜千言! 决定使用图片轮播后,下一个问题是如何创建它。首先,您需要收集高质量、高分辨率的图片。 接下来,您需要使用HTML和一些JavaScript代码来创建图片轮播。网络上有很多库可以帮助您以不同的方式创建轮播。我们将使用开源的bxSlider库。 bxSlider库支持响应式设计,因此使用此库构建的轮播可以适应任何

如何使用Angular上传和下载CSV文件如何使用Angular上传和下载CSV文件Mar 10, 2025 am 01:01 AM

数据集对于构建API模型和各种业务流程至关重要。这就是为什么导入和导出CSV是经常需要的功能。在本教程中,您将学习如何在Angular中下载和导入CSV文件

用JavaScript增强结构标记用JavaScript增强结构标记Mar 10, 2025 am 12:18 AM

核心要点 利用 JavaScript 增强结构化标记可以显着提升网页内容的可访问性和可维护性,同时减小文件大小。 JavaScript 可有效地用于为 HTML 元素动态添加功能,例如使用 cite 属性自动在块引用中插入引用链接。 将 JavaScript 与结构化标记集成,可以创建动态用户界面,例如无需页面刷新的选项卡面板。 确保 JavaScript 增强功能不会妨碍网页的基本功能至关重要;即使禁用 JavaScript,页面也应保持功能正常。 可以使用高级 JavaScript 技术(

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。