構建一個node.js供電的聊天室網絡應用程序：帶有bootstrap的聊天室UI-js教程-PHP中文網

構建一個node.js供電的聊天室網絡應用程序：帶有bootstrap的聊天室UI

鑰匙要點

本教程演示瞭如何使用node.js驅動的Web應用程序中的bootstrap創建聊天室UI，重點是創建適應不同設備的響應式設計。
>該過程涉及將Bootstrap添加到項目中，創建CHAT UI佈局，並添加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='//m.sbmmt.com/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='//m.sbmmt.com/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部分！

構建一個node.js供電的聊天室網絡應用程序：帶有bootstrap的聊天室UI

第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應用程序的用戶體驗？您的聊天室網絡應用程序可以通過各種方法來實現。首先，您應該專注於性能，因為快速響應的應用程序提供了更好的用戶體驗。其次，您應該使所有用戶（包括殘疾人）訪問您的應用程序。第三，您應該聽取用戶反饋並根據他們的建議進行改進。最後，您應該定期更新您的應用程序以添加新功能並修復所有錯誤。
>