构建由Node.js驱动的Chatroom Web App:入门

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

这个Node.js教程系列将帮助您构建完全部署在云中的由Node.js驱动的实时聊天室Web应用程序。 在本系列中,您将学习如何在Windows计算机上设置Node.js (如果在Mac上则仅学习概念),如何使用Express开发Web前端,如何将节点快速应用程序部署到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应用

欢迎来到动手Node.js教程系列的第1部分。 在本期中,我将解释什么是Node.js ,为什么要注意Node.js以及如何设置计算机。

什么是Node.js? 为什么要使用它?

Node.js是一个运行时环境和库,用于在浏览器外部运行JavaScript应用程序。 Node.js主要用于运行实时服务器应用程序,并通过使用非阻塞I / O和异步事件来提高其性能。 围绕Node.js构建了一个完整的Web生态系统,其中包含多个Web应用程序框架和协议实现可供使用。 无疑,这是当今在网络上开发实时应用程序的最简单,最快的方法之一。

为什么要使用Node.js? 一句话:JavaScript。 JavaScript是一种非常流行的语言,并且被认为是使网络成为当今动态世界的推动力之一。

JavaScript出现在前端,但是由于有了V8 JavaScript引擎和Ryan Dahl的帮助,您现在可以在浏览器外部运行联网的JavaScript应用程序,从而精确地构建Web应用程序。 Node.js使您可以统一应用程序使用的编程语言。 您的后端不再需要其他语言,您可以在整个过程中使用JavaScript。 如果您的背景是使用HTML,CSS和JavaScript构建和设计网站和Web应用程序前端,则无需选择其他语言即可为应用程序开发复杂的数据驱动的后端。

Node.js作为WebSockets的前端和后端之间的实时通信方法,在WebSockets的发展中起着至关重要的作用。 WebSockets和基于该协议构建的库(例如Socket.IO)的使用确实推动了Web应用程序的发展,并使我们的开发人员能够探索创建Web的新方法。

如何在Windows 8上设置Node.js

首先,您需要一台相当新的计算机。 我将向您展示如何在Windows 8.1上安装Node.js。

1.安装Node.js

首先, 下载并安装Node.js运行时 。 选择Windows Installer是入门最简单的方法之一。

另外,如果您是Chocolatey (Windows的软件包管理器)的迷,可以通过运行以下命令安装Node.js:

choco install nodejs.install

2.确认设置

您应该仔细检查Node.js可执行文件是否已添加到PATH系统环境变量中。 如果您想了解如何在Windows 8和Windows 8.1上更改环境变量,请观看此视频 。 您将要确保已将以下文件夹添加到PATH变量中:

C:\Program Files (x86)\nodejs\

如果转到命令提示符并输入节点–h,则应看到显示的node.js可执行文件的帮助文档。

与Node.js npm一起使用的用于管理node.js软件包的系统也应安装并在命令提示符处可用。 只需键入npm –h ,您应该会看到显示的npm帮助文档。

发生错误时...

如果您遇到与此错误类似的错误…

Error: ENOENT, stat 'C:\Users\someuser\AppData\Roaming\npm'

…解决方法是在上述指定的路径上创建一个文件夹,如此StackOverflow问题所示。 这只是最新的Node.js安装程序中的问题,下一个版本应解决。 您可以这样创建文件夹:

mkdir -r C:\Users\someuser\AppData\Roaming\npm

选择开发工具

安装了Node.js之后,就该选择开发工具了。 随意使用您想要的任何编辑工具。 在这些教程中,我将使用Visual Studio开发,调试和部署聊天引擎。 以及用于Visual Studio的Node.js工具(NTVS)–用于Visual Studio的免费开源插件,支持开发Node.js应用程序。

NTVS最酷的地方是它添加了Node.js支持,可进行编辑,Intellisense,性能分析,npm,TypeScript,本地和远程调试(包括在Windows / MacOS / Linux上)。 它还使快速创建网站并将其部署到Microsoft Azure网站或Cloud Services变得容易。

如果您没有Visual Studio,则可以下载Visual Studio 2013 Community Edition的免费副本。 然后,下载免费的Visual Studio插件Node.js工具 。 您还可以使用Visual Studio 2012 Pro或更高版本(需要更新4)或Visual Studio 2013或更高版本(需要更新2)。 NTVS插件与两个版本兼容。

在Visual Studio中启动一个新的Node.js项目

注意:屏幕截图显示了Visual Studio 2013 Ultimate。

开始一个新的Node.js项目非常简单。

  1. 启动Visual Studio。 在“文件”菜单上,单击“ 新建” ,然后单击“ 项目”
  2. 在“新建项目”窗口中,展开“ 已安装”菜单选择,展开“ 模板” ,然后单击“ JavaScript” 。 在主窗口中,选择Blank Node.js Web应用程序 。 选择项目的位置和名称,然后单击确定
  3. 将显示以下屏幕。 此时,随时探索Visual Studio。 您将要在解决方案资源管理器中打开生成的server.js文件(通常在右侧,但可能位于屏幕上的其他位置。)
  4. 现在,您可以在首选浏览器中调试node.js Web应用程序。

Node.js中的“ Hello World”应用程序

这是上面链接的server.js文件中使用的代码。

var http = require('http');
var port = process.env.port || 1337;
http.createServer(function (req, res) {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
}).listen(port);

与其他语言一样,生成的代码示例向您展示如何在浏览器中输出“ Hello World”。 让我解释一下server.js生成的代码如何逐行工作。 如本教程系列说明中所述,我假设您已经了解JavaScript,HTML5以及HTTP / Internet的工作原理。

1号线
var http = require(‘http’);

Node.js有一个简单的模块和依赖项加载系统。 您只需使用包含要加载的模块的文件或目录路径调用function “require” ,然后返回包含该模块的所有导出函数的变量。

2号线
var port = process.env.port || 1337;

在这行上,我们想确定服务HTML的HTTP服务器应在哪个端口上运行。 如果在环境变量中指定了端口号,我们将使用该端口号,或者仅使用1337。

3号线
http.createServer(function (req, res) {

我们想要创建一个服务器来处理HTTP请求。 我们还将为createServer函数传递一个包含两个参数的函数回调,以处理每个单独的请求并返回响应。 如果您从未遇到过JavaScript中的回调函数,请查看Michael Vollmer的文章 。 接收到的请求在req parameter传递,并且期望将响应写入res参数。

4号线
res.writeHead(200, { ‘Content-Type’: ‘text/plain’ });

任何HTTP响应都需要一个状态行和标头,以了解有关HTTP标头及其工作方式的更多信息,请参阅本文 。 在这种情况下,我们要返回200 OK作为状态响应,并将内容类型指定为纯文本。 我们通过在响应对象上调用writeHead function来指定它。

5号线
res.end(‘Hello World\n’);

编写完响应后,我们要调用end function 。 我们还可以通过end function传递最终内容,在这种情况下,我们想以纯文本形式发送字符串“ Hello World”。

6号线
}).listen(port);

我们关闭回调并在前面定义的端口上调用function listen ,这将启动服务器并开始接受发送到已定义端口的请求。

要查看结果,可以通过按上一个屏幕快照中显示的按钮开始调试。 您可以在浏览器中看到“ Hello World”。

瞧! 现在,您已使用Visual Studio 2013在Windows 8.1上成功运行Node.js应用程序。

敬请关注第2部分!

第2部分-如何部署的“Hello World”到云是在这里 。 通过关注我的twitter帐户,您可以了解有关本文和其他文章的最新信息

有关Azure上Node的更多信息

要在节点上进行更深入的学习, 可以在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-getting-started/

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值