node.js駆動のチャットルームWebアプリを作成する：ブートストラップ付きチャットルームUI

キーテイクアウト

このチュートリアルでは、Node.js-Powered WebアプリでBootstrapを使用してチャットルームUIを作成する方法を示しています。
• プロセスでは、プロジェクトにブートストラップを追加し、チャットUIレイアウトを作成し、CSSを追加してメッセージ編集領域をビューポートの下部に強制します。
チュートリアルでは、Bootstrapをプロジェクトに組み込むための具体的な手順の概要を示しています。これには、layout.hadeファイルを変更してBootstrap CSSファイルリンクとjavaScriptファイルを含めることを含む。
• チャットUIレイアウトはブートストラップグリッドシステムを使用して構築され、カスタムCSSルールが追加され、メッセージ編集領域がビューポートの下部に配置されていることを確認します。
• この記事は、MicrosoftのWeb Dev Techシリーズの一部です。 SitePointを可能にしてくれたパートナーをサポートしてくれてありがとう。
• このnode.jsチュートリアルシリーズは、クラウドに完全に展開されているnode.js駆動のリアルタイムチャットルームWebアプリを構築するのに役立ちます。このシリーズでは、Windowsマシンでnode.jsをセットアップする方法（またはMacにいる場合は概念を学習する）、Expressを使用したWebフロントエンドの開発方法、node.js expressアプリを展開する方法を学びます。 azure、socket.ioを使用してリアルタイムレイヤーを追加する方法、およびそれをすべて一緒に展開する方法。
チュートリアルでは、オプションのVisual Studioとnode.jsツールを開発環境としてVisual Studioプラグインに使用します。両方のツールの無料ダウンロードへのリンクを提供しました。これは中級レベルの初心者です。HTML5とJavaScriptを知ることが期待されています。

パート1 - node.jsの紹介 パート2 - node.jsとazure

を使用してExpressを歓迎します

パート3 - node.js、mongo、socket.ioでバックエンドを構築する

パート4 - ブートストラップを使用してチャットルームUIを構築します

パート5 - チャットルームをWebSockets

に接続します

パート6 - フィナーレとデバッグリモートノード.jsアプリ

パート4 - ブートストラップを使用してチャットルームUIを構築します

ハンズオンnode.jsチュートリアルシリーズのパート4へようこそ：node.js-PoweredチャットルームWebアプリを作成します。

この記事では、パート2とパート3に構築されたチャットルームバックエンドにTwitterブートストラップスタイルのフロントエンドを追加する方法を紹介します。

bootstrapとは？

Bootstrapは、WebサイトやWebアプリケーションを構築するための非常に人気のあるHTMLおよびCSSフレームワークです。 GitHubのナンバーワンプロジェクトです。 BootstrapはレスポンシブWebデザインをサポートし、ページのレイアウトがデバイス（デスクトップ、タブレット、モバイル）に適応できるようにします。

プロジェクトにブートストラップを追加します

プロジェクトにBootstrapを追加するには、bootstrap用の模倣CSSおよびJSファイルをダウンロードする必要があります。このリンクからブートストラップをダウンロードできます。 Bootstrapをダウンロードした後、ファイルを解凍して、プロジェクトのパブリックフォルダーにCSS、JS、およびフォントをフォルダーにコピーしてください。

既存のフォルダー構造とのいくつかの矛盾に気付くでしょう。 StyleSheetsとJavaScriptフォルダーを統合します。他のサードパーティライブラリと共有されているため、StyleSheetsのCSSのBootstrap命名法とJavaScriptのJSのブートストラップ命名法を好みます。 StyleSheetsのファイルをCSSにコピーし、空にする必要があるJavaScriptフォルダーを削除します。次に、レイアウトに移動して、次の行を変更して変更します

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

to：

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

次に、Bootstrap CSSファイルリンクをヘッダーに追加し、Layout.hadeファイルのHTML5アプリに適切なメタタグを追加します。 style.cssリンクを含む行の直前に次の行を追加する必要があります。

次に、ブートストラップがコンポーネントとプラグインに必要なJavaScriptファイルを追加したいと思います。レイアウトの最後に次の行を追加します。

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')

reaut.jade

を完了しました

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

チャット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.hadeファイルを変更し、コンテンツブロックの下のすべてのコード行を削除します。

最初に、受信したメッセージが含まれるページの領域を追加します。クラスラップでDIVを追加することから始めましょう。 Jadeでは、書く必要があるのは.wrapでa

を生成することだけです。インデントを使用することにより、Jadeテンプレートエンジンに、インデントが少ない要素内に進むことを示すことができます。他のチュートリアルで見逃した場合は、このジェイドのチュートリアルを見てください。

次に、クラスのコンテナフルイド付きの別のDIVを追加して、ページに流体幅を追加します。内部では、「ノードチャットルームへようこそ」と書かれたH1要素と、IDメッセージを備えたDIVと、チャットルームのメッセージ編集領域を下に押し下げるために使用するクラスのプッシュを備えた最終的なDIVを作成します。ビューポート。

次に、メッセージ編集領域を開発します。テキストボックスをキャプチャして、フッターと呼ばれるDiv内のボタンとコンテナフルイドと呼ばれるdivボタンを送信します。フッターdivには、ラップdivと同じインデントがあります。

次に、ブートストラップグリッドシステム（こちらについて読んでください）を使用して、メッセージ編集領域を2つに分割します。列の1つはスペースの大部分を取り、メッセージを書くためのテキストボックスが含まれます。2番目の列には、メッセージを送信するためのブロックレベルボタンが含まれます。 Jadeを使用して、段落表記を使用して要素の属性を指定できる方法に注意してください。コードは次のようになります：

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

index.jade

を完了しました

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

CSSを追加して、メッセージ編集領域をビューポートの下部に強制します

メッセージ編集領域をビューポートの下部に強制したい場合は、パブリック/CSS/style.stylページにいくつかのカスタムCSSルールを追加します。このファイルはStylus CSS Preprocessorを使用していますが、生成されたCSSファイルに再リコープする逐語的なCSSを貼り付けることもできます。

最初に、ページ全体が高さの100％を占めるようにしたいと思うでしょう。

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')

第二に、ラップエリアが最大の高さを占めることを確認したいが、フッターとメッセージ編集領域の下部に60pxのマージンを残す。

3番目に、編集領域のこのスペースが尊重され、フッターに割り当てられるようにしたいと思います。

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')

完成したstyle.styl

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

スクリーンショット

すべてを正しく行った場合、次のようなUIになるはずです：

.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

結論

voila！ BootstrapとJade/Stylus Preprocessorsを使用して、node.jsが提供するチャットルームに素敵なUIレイアウトを追加しました。次の記事では、WebSocketsを介してUIとnode.jsバックエンドを接続する方法を紹介します。 パート5！

にご期待ください

パート5 - チャットルームをWebSocketsに接続することはこちらです。私のTwitterアカウントをフォローして、この記事や他の記事を最新の状態に保つことができますその他のnode.js azureでの学習

node.jsの詳細な学習については、私のコースはMicrosoft Virtual Academyで入手できます。

または類似のnode.jsの被験者に関するいくつかの短い形式のビデオ：

6部構成のシリーズ：node.js

を使用したアプリを構築します

ノード（Coding4Fun）

この記事は、MicrosoftのWeb Dev Techシリーズの一部です。 Project Spartanとその新しいレンダリングエンジンを皆さんと共有できることを楽しみにしています。モダンでMac、iOS、Android、またはWindowsデバイスで無料の仮想マシンを入手するか、リモートでテストしてください

。Node.js-Powered Chatroom Webアプリの構築に関するよくある質問（FAQ）

node.js-PoweredチャットルームWebアプリでチャットUIをカスタマイズするにはどうすればよいですか？チャットUIに関連付けられたファイル。チャットUIの色、フォント、レイアウトを変更して、好みに合わせて変更できます。サードパーティライブラリを統合したり、独自のカスタムコードを書いたりすることにより、絵文字、ファイル共有、音声メッセージなどの機能を追加することもできます。変更が期待どおりに機能し、バグをアプリに導入しないように徹底的にテストすることを忘れないでください。 、使いやすさとシンプルさに集中することが重要です。チャットUIは、初めてのユーザーであっても、直感的で使いやすい必要があります。また、レスポンシブである必要があります。つまり、すべてのデバイスと画面サイズで見た目と機能をうまく機能させる必要があります。その他のベストプラクティスには、ユーザーにフィードバックを提供すること（メッセージが送信または読み取られたときの表示など）、カスタマイズ（テーマの変更やフォントサイズの変更など）、アクセシビリティ（画像のALTテキストの提供や作成などのアクセシビリティの確保が含まれます。確かに、UIはキーボード経由でナビゲート可能です）。 WebSocketは、単一のTCP接続にわたって全二重通信チャネルを提供するプロトコルです。これにより、クライアントとサーバー間のリアルタイム通信が可能になります。 node.jsでは、socket.ioなどのライブラリを使用して、WebSocket機能を簡単に実装できます。これにより、メッセージを即座に送信および受信できるようになり、ユーザーにシームレスなチャットエクスペリエンスを提供します。 Webアプリの重要な側面です。 node.jsでは、ミドルウェア関数を使用してエラーを処理できます。これらの関数は、コードの実行中に発生するエラーをキャッチおよび処理できます。 Try/Catchブロックを使用して、同期コードのエラーを処理することもできます。ユーザーに有益なエラーメッセージを提供し、デバッグの目的でエラーを記録することが重要です。

チャットルームWebアプリのセキュリティを確保するにはどうすればよいですか？いくつかのステップが含まれます。まず、HTTPSを使用して、輸送中にデータを暗号化する必要があります。第二に、クロスサイトスクリプト（XSS）攻撃を防ぐために、ユーザー入力をサニタイズする必要があります。第三に、セッションのハイジャックを防ぐために、セキュアクッキーを使用する必要があります。第四に、ブルートフォース攻撃を防ぐためにレート制限を実装する必要があります。最後に、最新のセキュリティパッチの恩恵を受けるために、node.jsと他のすべてのソフトウェアを最新の状態に保ちます。

node.js-PoweredチャットルームWebアプリをスケーリングするにはどうすればよいですか？

node.js搭載のチャットルームWebアプリのスケーリングは、さまざまな方法で達成できます。一般的な方法の1つは水平スケーリングです。これには、より多くのサーバーを追加して負荷の増加を処理することが含まれます。別の方法は、垂直スケーリングです。これには、既存のサーバーにリソース（CPUやRAMなど）を追加することが含まれます。ロードバランシングを使用して、複数のサーバー全体にトラフィックを均等に配布することもできます。

チャットルームWebアプリをテストするにはどうすればよいですか？優れたユーザーエクスペリエンス。ユニットテストを使用して個々の機能、統合テストをテストして、アプリのさまざまな部分がどのように機能するか、エンドツーエンドテストをテストしてユーザーの観点からアプリをテストできます。手動テストを使用して、自動テストに見逃される可能性のある問題をキャッチすることもできます。 Webアプリは、Heroku、AWS、Google Cloudなどのさまざまなプラットフォームを使用して実行できます。これらのプラットフォームは、アプリの展開、拡張、監視を容易にするツールとサービスを提供します。また、継続的な統合/継続展開（CI/CD）ツールを使用して、展開プロセスを自動化し、アプリが常に最新であることを確認する必要があります。 Chatroom Webアプリのパフォーマンスを監視することは、迅速で応答性の高いものを確保するために重要です。 New RelicやDataDogなどのツールを使用して、アプリのパフォーマンスをリアルタイムで監視できます。これらのツールは、応答時間、エラー率、サーバーの負荷など、さまざまなメトリックに関する洞察を提供できます。チャットルームのWebアプリは、さまざまな方法で達成できます。まず、高速で応答性の高いアプリがより良いユーザーエクスペリエンスを提供するため、パフォーマンスに焦点を合わせる必要があります。第二に、障害のあるユーザーを含むすべてのユーザーがアプリにアクセスできるようにする必要があります。第三に、ユーザーのフィードバックを聞いて、提案に基づいて改善を行う必要があります。最後に、新しい機能を追加してバグを修正するには、アプリを定期的に更新する必要があります。

以上がnode.js駆動のチャットルームWebアプリを作成する：ブートストラップ付きチャットルームUIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。