构建一个node.js供电的聊天室网络应用程序：带有bootstrap的聊天室UI

钥匙要点

• 本教程演示了如何使用node.js驱动的Web应用程序中的bootstrap创建聊天室UI，重点是创建适应不同设备的响应式设计。
>
• >该过程涉及将Bootstrap添加到项目中，创建CHAT UI布局，并添加CSS将消息编辑区域迫使视图的底部。>
>教程概述了将Bootstrap纳入项目的特定步骤，包括修改Layout.jade文件以包括Bootstrap CSS文件链接和JavaScript文件。
• >
> CHAT UI布局是使用Bootstrap网格系统构建的，并添加自定义CSS规则以确保消息编辑区域位于视口的底部。
>

本文是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应用

第4部分 - 使用Bootstrap构建聊天室UI

欢迎来到动手节点的第4部分。

在本期中，我将向您展示如何在第2部分和第3部分中构建的聊天室后端添加Twitter bootstrap风格的前端

什么是bootstrap？

Bootstrap是一个非常受欢迎的HTML和CSS框架，用于构建网站和Web应用程序。这是Github上的第一个项目。 Bootstrap支持响应式Web设计，允许您的页面布局适应该设备（台式机，平板电脑，移动设备）。

>

>向我们的项目添加bootstrap

>要将Bootstrap添加到我们的项目中，我们必须下载缩小的CSS和JS文件以进行Bootstrap。您可以从此链接下载Bootstrap。下载Bootstrap后，解压缩文件，然后通过文件夹CSS，JS和字体复制到您的项目中的公共文件夹。

>

>您会注意到与现有文件夹结构的几个不一致之处。我们将统一样式表和JavaScript文件夹。我更喜欢与其他第三方库共享的javaScript的CSS的引导性命名法和javascript的JS。将样式表中的文件复制到CSS中，并删除JavaScript文件夹，因为它应该为空。接下来转到layout.jade并更改以下行：>

link(rel='stylesheet' href='/stylesheets/style.css')

to：

link(rel='stylesheet' href='/css/style.css')

接下来，我们要将Bootstrap CSS文件链接添加到标题和layout.jade文件中HTML5应用程序的适当元标记。您必须在包含样式的行之前添加以下行。CSS链接。

meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible" content="IE=edge")
link(rel='stylesheet' href='/css/bootstrap.min.css')
link(rel='stylesheet' href='/css/bootstrap-theme.min.css')

接下来，我们要添加Bootstrap对其组件和插件所需的JavaScript文件。将以下行添加到布局末尾。

完成布局

script(type=’text/javascript’ src=’/js/bootstrap.min.js’)

创建CHAT UI布局

doctype html
html
  head
    title= title
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible" content="IE=edge")
    link(rel='stylesheet' href='/css/bootstrap.min.css')
    link(rel='stylesheet' href='/css/bootstrap-theme.min.css')
    link(rel='stylesheet' href='/css/style.css')

  body
    block content

    script(type='text/javascript')

是时候开发聊天用户界面布局了。首先，您可能需要阅读有关Bootstrap的信息，并查看这个长教程。所有聊天引擎都有一个用于最近收到的消息的区域，并且用户可以编写和发送消息区域。从历史上看，布局是将编辑区域附在底部和顶部的消息。

>在没有工作的情况下，将元素在HTML页面上的元素固定到视口的底部并不容易。我将遵循此样本，将页脚固定在底部。我们想修改index.jade文件，并在内容块下删除所有代码行。

首先，我们添加页面区域，其中包含收到的消息。让我们从与类包装的添加DIV首先。在Jade中，您需要写的只是。编写以生成

。通过使用凹痕，我们可以向翡翠模板引擎发出信号，表明更多的凹痕元素将属于较小的凹痕元素。如果您错过了其他教程，请看一下本教程。

接下来，我们要在类容器流体中添加另一个DIV，以在页面上添加流体宽度。在内部，我将创建一个H1元素，上面写着“欢迎来到节点聊天室”和一个带有ID消息的DIV和带有类的最终div，我们将用来将聊天室的消息编辑区域推到底部的底部视口。

接下来，我们将开发消息编辑区域。我们想捕获文本框并在一个称为页脚的DIV和称为Container-Fluid的Div中发送按钮。页脚Div的凹痕将与包裹div。

接下来，我将使用Bootstrap网格系统（在此处阅读）将消息编辑区域分为两个。其中一列将占用大部分空间，并包含文本框以编写消息，第二列将包含一个用于发送消息的块级按钮。请注意，Jade如何使用段落表示法指定元素的属性。代码将看起来像这样：

link(rel='stylesheet' href='/stylesheets/style.css')

完成index.jade

link(rel='stylesheet' href='/css/style.css')

添加CSS将消息编辑区域迫使视图

的底部

>我们希望将消息编辑区域强制到视口的底部，我们将需要在public/css/style.styl页面中添加一些自定义CSS规则。该文件使用Stylus CSS预处理器，但您也可以粘贴逐字CSS，将重新运行到生成的CSS文件中。>

首先，我们将要确保整个页面占100％的高度。>

>第二，我们要确保包装区域占用最大高度，但在我们的页脚和消息编辑区域的底部留下了60px的边距。

meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible" content="IE=edge")
link(rel='stylesheet' href='/css/bootstrap.min.css')
link(rel='stylesheet' href='/css/bootstrap-theme.min.css')

第三，我们要确保尊重编辑区域的此空间并将其分配给页脚。

最后，出于风格原因，让我们在页脚上添加微妙的背景颜色。>

script(type=’text/javascript’ src=’/js/bootstrap.min.js’)

>完成样式

doctype html
html
  head
    title= title
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible" content="IE=edge")
    link(rel='stylesheet' href='/css/bootstrap.min.css')
    link(rel='stylesheet' href='/css/bootstrap-theme.min.css')
    link(rel='stylesheet' href='/css/style.css')

  body
    block content

    script(type='text/javascript')

>屏幕截图

如果您正确地完成了所有操作，则应最终得到一个看起来像这样的UI：

.wrap
  .container-fluid
    h1 Welcome to the Node Chatroom
    #messages
    .push

>

结论

.footer
  .container-fluid
    .row
      .col-xs-8.col-sm-9
        input(type="text"   placeholder="Write a message here..." rows="3")
      .col-xs-4.col-sm-3
        button#send-message-btn.btn.btn-primary.btn-lg.btn-block Send Message

瞧！我们已经使用了Bootstrap和Jade/Stylus预处理器为Node.js提供的聊天室添加了一个不错的UI布局。在下一部分中，我将向您展示如何通过WebSockets连接UI和Node.js后端。

敬请期待第5部分！

> 第5部分 - 在这里将聊天室与Websocket连接起来。您可以通过遵循我的Twitter帐户

>来保持最新和其他文章。

更多节点。

要在Node.js上进行更多深入的学习，我的课程可在Microsoft Virtual Academy上找到。

>

或类似节点上的一些较短的格式视频：

六部分系列：用node.js

构建应用程序

漫步在节点（coding4fun）

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

  >常见问题（常见问题解答）有关构建node.js供电的聊天室网络应用

  >如何在我的node.js供电聊天室网络应用中自定义chat ui？

  >可以通过修改CSS和JavaScript来完成您的node.js驱动的聊天室Web应用程序中的聊天UI与聊天UI关联的文件。您可以更改CHAT UI的颜色，字体和布局，以适合您的喜好。您还可以通过集成第三方库或编写自己的自定义代码来添加其他功能，例如表情符号，文件共享和语音消息。请记住要彻底测试您的更改，以确保它们按预期工作，并且不会在您的应用程序中引入任何错误。

  >在构建CHAT UI的最佳实践是什么？ ，重要的是要专注于可用性和简单性。聊天UI也应该直观且易于使用，即使对于初次用户也是如此。它也应该具有响应速度，这意味着它应该在所有设备和屏幕尺寸上看起来都很好地工作。其他最佳实践包括向用户提供反馈（例如显示何时发送或读取消息），允许自定义（例如更改主题或字体大小），并确保可访问性（例如，为图像提供alt文本和制作确保UI可以通过键盘导航）。

  如何将实时功能添加到我的聊天室Web应用程序中？

  ​​

  可以使用实时功能将实时功能添加到您的聊天室Web应用程序中WebSocket，一种协议，可通过单个TCP连接提供全双工通信渠道。这允许客户端和服务器之间实时通信。在node.js中，您可以使用诸如socket.io之类的库来轻松实现WebSocket功能。这将允许立即发送和接收消息，为您的用户提供无缝的聊天体验。

  如何处理node.js-power的聊天室Web应用程序中的错误？是任何Web应用程序的关键方面。在Node.js中，您可以使用中间件功能处理错误。这些功能可以捕获并处理执行代码期间发生的错误。您还可以使用尝试/捕获块来处理同步代码中的错误。向用户提供信息的错误消息并为调试目的记录错误很重要。

  >如何确保我的聊天室网络应用程序的安全性？

  确保聊天室Web应用程序的安全性涉及几个步骤。首先，您应使用HTTPS在运输中加密数据。其次，您应该对用户输入进行消毒，以防止跨站点脚本（XSS）攻击。第三，您应该使用安全的cookie来防止会话劫持。第四，您应该实施限制费率，以防止蛮力攻击。最后，您应该将node.js和所有其他软件保持最新状态，以从最新的安全补丁中受益。

  。

  >如何缩放我的node.js供电聊天室网络应用程序？

  >缩放node.js驱动的聊天室网络应用程序可以通过各种方法来实现。一种常见的方法是水平缩放，其中涉及添加更多的服务器来处理增加的负载。另一种方法是垂直缩放，其中涉及在现有服务器中添加更多资源（例如CPU或RAM）。您还可以使用负载平衡在多个服务器上均匀分配流量。

  如何测试我的聊天室Web应用程序？

  >测试您的聊天室网络应用程序对于确保其按预期工作和提供的提供至关重要良好的用户体验。您可以使用单元测试来测试单个功能，集成测试来测试应用程序的不同部分如何一起工作，以及端到端测试以从用户的角度来测试您的应用程序。您还可以使用手动测试来捕获自动测试可能会错过的任何问题。

  >如何部署我的node.js驱动的聊天室Web应用程序？

  >

  >部署node.js驱动的聊天室可以使用各种平台（例如Heroku，AWS或Google Cloud）完成Web应用程序。这些平台提供了工具和服务，使其易于部署，扩展和监视您的应用程序。您还应考虑使用连续集成/连续部署（CI/CD）工具来自动执行部署过程并确保您的应用程序始终是最新的。

  >

  如何监视聊天室Web应用程序的性能？

  如何改善聊天室Web应用程序的用户体验？您的聊天室网络应用程序可以通过各种方法来实现。首先，您应该专注于性能，因为快速响应的应用程序提供了更好的用户体验。其次，您应该让所有用户（包括残疾人）访问您的应用程序。第三，您应该听取用户反馈并根据他们的建议进行改进。最后，您应该定期更新您的应用程序以添加新功能并修复所有错误。

  >

以上是构建一个node.js供电的聊天室网络应用程序：带有bootstrap的聊天室UI的详细内容。更多信息请关注PHP中文网其他相关文章！