构建基于Node.js的Chatroom Web App:远程调试

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

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

本教程将使用可选的Visual StudioVisual 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应用

第6部分–结局和调试远程节点应用程序

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

在这最后一部分中,我将向您展示如何对聊天室进行最终部署以及如何执行远程调试。

部署到Azure

现在我们已经启用了由Node.js支持的匿名聊天室应用程序,让我们单击几下即可将其部署到云中。 您可以部署到任何支持Node.js的云。 我将使用Microsoft Azure,因为我可以在那里免费运行Node.js网站。

您可以在此处注册Microsoft Azure的免费试用版。 您将获得试用积分,可用于所有Azure服务。 对于我们使用的服务Azure网站 ,您实际上可以运行10个网站,而无需花费一分钱。

  1. 设置好Azure帐户后,返回IDE,右键单击该项目,然后单击“发布”。

    通过Azure发布

  2. 单击发布将打开带有几个选项的向导,然后选择目标Microsoft Azure网站

  3. 在这一步将要求您登录,请在此处使用与Azure注册相同的Microsoft帐户。

  4. 单击“ 新建”创建一个新的Azure网站,或者,如果已经创建了一个网站,则可以从下拉列表中选择它。

    发布新的Azure网站

  5. 您将需要完成向导中的字段(如下所示)。 确保选择唯一的站点名称,然后单击创建

    完成向导

  6. 您将看到一个预先填写的向导。 点击发布

    发布最后一步

我们已经部署到云中,但是工作还没有结束!

在Azure网站中启用WebSocket

您需要做一些事情来确保为您的网站启用WebSockets。 如果您需要更详细的步骤或常见问题解答,请确保访问此页面

首先,您需要从Azure命令行或“配置”选项卡启用WebSocket,如下所示:

启用Web套接字

其次,您将需要修改web.config文件以及system.webServer XML元素的以下行。

<webSocket enabled="false" />

似乎违反直觉,但这会禁用IIS WebSockets模块,该模块包括其自己的WebSockets实现,并且与Node.js特定的WebSockets模块(例如Socket.IO

调试远程Node.js应用

节点工具Visual Studio中附带了一些高级调试功能,如条件断点,“命中计数”断点,跟踪点多用于Windows,Linux和OS X.读取远程调试支持在这里

连接到远程Node.js实例

NTVS支持在Azure网站上运行的远程调试代码。 与常规远程调试不同,不能通过TCP直接访问目标计算机。 NTVS带有用于调试协议的WebSocket代理,该代理通过HTTP公开了调试器协议。 创建新的Windows Azure项目时,将在Web.Debug.config为您完全配置代理,如果通过以下几步在Debug配置中发布项目,则将在Azure WebSite上启用该代理。

  1. 右键单击项目,然后选择发布

    通过Azure发布

  2. 选择左侧的“设置”标签,并确保从下拉列表中选择“ 调试”配置。

    以调试模式发布到Web

  3. 点击发布

一旦正确部署了项目并启用了WebSocket,就可以从Server Explorer附加到该网站。 如果您没有打开“服务器资源管理器”窗口,则可以通过查看→服务器资源管理器将其打开。 然后,在Windows Azure→网站下找到您的网站 ,然后右键单击它。 如果它正在运行,并且已经使用调试配置将项目部署到了​​该项目,则应该在上下文菜单中看到“ 附加调试器(Node.js)”命令。

附加Node.js调试器

阅读日志和流日志

如果要流式传输最新日志,这很容易! 所有您需要做的就是右键单击服务器资源管理器中的网站,然后选择“ 查看流日志”

流日志

结论

瞧! 你有它! 您现在在云中有了一个匿名的实时聊天室! 在整个系列中,我们学习了如何设置Node.js,使用Express开发Web前端,将我们的应用程序部署到云中,如何使用Socket.IO添加实时层以及如何部署它。全部一起!

巴尼

确保重新阅读博客上的不同部分因为有时我可能会向本教程添加更新。 通过关注我的Twitter帐户,您可以了解有关本文和其他文章的最新信息

PS如果您想获得更多成功的GIF,请转到此处

在Azure上对Node.js的更多了解

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

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

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

From: https://www.sitepoint.com/build-node-js-powered-chatroom-web-app-debugging-remotely/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值