Erstellen Sie eine Node.JS-Betriebene-Chatroom-Web-App: Chatroom UI mit Bootstrap

Key Takeaways

• Dieses Tutorial zeigt, wie eine Chatroom-Benutzeroberfläche mit Bootstrap in einer node.js-betriebenen Web-App erstellt wird, mit Schwerpunkt auf dem Erstellen eines reaktionsschnellen Designs, das sich an verschiedene Geräte anpasst.
• Der Prozess beinhaltet das Hinzufügen von Bootstrap zum Projekt, das Erstellen des Chat -UI -Layouts und das Hinzufügen von CSS, um den Bearbeitungsbereich der Nachrichten auf den unteren Rand des Ansichtsfensters zu zwingen.
• Das Tutorial beschreibt spezifische Schritte, um Bootstrap in das Projekt einzubeziehen, einschließlich der Änderung der Layout.jade -Datei, um Bootstrap -CSS -Dateilinks und JavaScript -Dateien einzuschließen.
• Das Chat -UI -Layout wird mit dem Bootstrap -Gittersystem erstellt, und benutzerdefinierte CSS -Regeln werden hinzugefügt, um sicherzustellen

Dieser Artikel ist Teil einer Web Dev Tech -Serie von Microsoft. Vielen Dank, dass Sie die Partner unterstützt haben, die SitePoint ermöglichen.

Diese Node.js-Tutorial-Serie hilft Ihnen dabei, eine in der Cloud bereitgestellte Echtzeit-Chatroom-Web-App mit Node.JS-gestütztem Chatroom-Web-App zu erstellen. In dieser Serie erfahren Sie, wie Sie Node.js auf Ihrem Windows -Computer einrichten (oder einfach die Konzepte lernen, wenn Sie sich auf dem Mac befinden), wie Sie ein Web -Frontend mit Express entwickeln, wie Sie eine Node.js Express -App für die Bereitstellung eines Node.js -Apps zu entwickeln. Azure, wie man Socket.io verwendet, um eine Echtzeitschicht hinzuzufügen und wie man alles zusammenstellt.

Das Tutorial verwendet das optionale Visual Studio und die Node.JS-Tools für das Visual Studio-Plug-In als Entwicklungsumgebung. Ich habe Links zu kostenlosen Downloads beider Tools bereitgestellt. Dies ist ein Anfänger bis mittlerer Artikel-Sie werden erwartet, dass Sie HTML5 und JavaScript kennen.

Teil 1 - Einführung in Node.js

Teil 2 - Willkommen, mit Node.js und Azure

zu exprimieren

Teil 3 - Erstellen eines Backends mit Node.js, Mongo und Socket.io

Teil 4 - Erstellen einer Chatroom -Benutzeroberfläche mit Bootstrap

Teil 5 - Verbinden des Chatrooms mit WebSockets

Teil 6 - Finale und Debugging Remote Node.js Apps

Teil 4 - Erstellen einer Chatroom -Benutzeroberfläche mit Bootstrap

Willkommen in Teil 4 der praktischen Node.JS-Tutorial-Serie: Erstellen Sie eine Node.JS-gestützte Chatroom-Web-App.

In dieser Ausgabe zeige ich Ihnen, wie Sie dem Chatroom-Backend, den Sie in Teil 2 und Teil 2 eingebaut haben, ein Frontend im Twitter-Bootstrap-Stil hinzufügen.

Was ist Bootstrap?

Bootstrap ist ein sehr beliebtes HTML- und CSS -Framework zum Erstellen von Websites und Webanwendungen. Es ist das Projekt Nummer eins auf GitHub. Bootstrap unterstützt das reaktionsschnelle Webdesign und ermöglicht das Layout Ihrer Seite an das Gerät (Desktop, Tablet, Mobile).

Startstrap zu unserem Projekt hinzufügen

Um unserem Projekt Bootstrap hinzuzufügen, müssen wir die minifizierten CSS- und JS -Dateien für Bootstrap herunterladen. Sie können Bootstrap von diesem Link herunterladen. Nachdem Sie Bootstrap heruntergeladen haben, entpacken Sie die Datei und kopieren Sie die Ordner CSS, JS und Schriftarten in den öffentlichen Ordner in Ihrem Projekt.

Sie werden einige Inkonsistenzen mit der vorhandenen Ordnerstruktur bemerken. Wir werden die Stylesheets und JavaScript -Ordner vereinen. Ich bevorzuge die Bootstrap-Nomenklatur von CSS für Stylesheets und JS für JavaScript, da dies mit anderen Bibliotheken von Drittanbietern geteilt wird. Kopieren Sie die Dateien in Stylesheets in CSS und löschen Sie den JavaScript -Ordner, so wie er leer sein sollte. Gehen Sie als nächstes zu layout.jade und ändern Sie die folgende Zeile:

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

bis:

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

Als nächstes möchten wir die Bootstrap -CSS -Dateilinks zum Header und die entsprechenden Meta -Tags für HTML5 -Apps in der Datei layout.jade hinzufügen. Sie müssen die folgenden Zeilen kurz vor der Zeile hinzufügen, die den Link style.css enthält.

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

Als nächstes möchten wir die JavaScript -Datei hinzufügen, die Bootstrap für seine Komponenten und Plugins benötigt. Fügen Sie die folgende Zeile zum Ende des Layouts hinzu. JADE:

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

abgeschlossenes layout.jade

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

Erstellen des Chat -UI -Layouts

Es ist Zeit, das Layout der Chat -Benutzeroberfläche zu entwickeln. Erstens möchten Sie vielleicht über Bootstrap lesen und sich dieses lange Tutorial ansehen. Alle Chat -Engines verfügen über einen Bereich für die kürzlich empfangenen Nachrichten und einen Bereich, in dem ein Benutzer eine Nachricht schreiben und senden kann. Historisch gesehen sollte das Layout den Bearbeitungsbereich am Boden und die Nachrichten oben angehängt haben.

Es ist nicht einfach, Elemente auf einer HTML -Seite am Ende des Ansichtsfensters ohne etwas Arbeit zu reparieren. Ich werde dieses Beispiel verfolgen, um eine Fußzeile auf den Boden zu reparieren. Wir möchten die Index.jade -Datei ändern und alle Codezeilen im Inhaltsblock entfernen.

Zunächst fügen wir den Bereich der Seite hinzu, die die empfangenen Nachrichten enthalten. Beginnen wir zunächst ein DIV mit der Klassenverpackung hinzufügen. In Jade müssen Sie nur schreiben, um ein

zu generieren. Durch die Verwendung der Eindrücke können wir dem Jade -Templating -Motor signalisieren, dass mehr eingedrückte Elemente innerhalb der weniger eingerichteten Elemente gehen. Schauen Sie sich dieses Jade -Tutorial an, wenn Sie es in den anderen Tutorials verpasst haben.

Als nächstes möchten wir ein weiteres DIV mit dem Klassenbehälter-Fluid hinzufügen, um der Seite eine Flüssigkeitsbreite hinzuzufügen. Im Inneren erstelle ich ein H1 -Element, das mit „Willkommen im Knoten -Chatroom“ und einem DIV mit einem ID -Nachrichten und einem endgültigen Div mit dem Klassenschub steht, mit dem wir den Bearbeitungsbereich des Nachrichtenbearbeitungsbereichs des Chatroom nach unten drücken werden das Ansichtsfenster

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

Als nächstes werden wir den Nachrichtenbearbeitungsbereich entwickeln. Wir möchten die Textbox erfassen und die Schaltfläche innerhalb eines DIV namens Fußzeile und ein DIV namens Containerfluid senden. Die Fußzeile DIV hat die gleiche Einkerbung wie die Wrap Div.

Als nächstes werde ich das Bootstrap Grid -System verwenden (hier lesen), um den Bearbeitungsbereich der Nachrichten in zwei Teile zu teilen. Eine der Spalten nimmt den größten Teil des Leerzeichens ein und enthält das Textfeld zum Schreiben der Nachricht. Die zweite Spalte enthält eine Block-Ebene-Schaltfläche zum Senden der Nachricht. Beachten Sie, wie mit Jade die Attribute eines Elements anhand der Absatznotation angeben können. Der Code sieht so aus:

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

abgeschlossen index.jade

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

CSS hinzufügen, um den Bearbeitungsbereich der Nachrichten zum Ende des Ansichtsfensters zu zwingen

Wir möchten den Bearbeitungsbereich der Nachrichten zum Ende des Ansichtsfensters erzwingen. Wir möchten einige benutzerdefinierte CSS -Regeln auf der Seite der Öffentlichkeit/CSS/style.styl hinzufügen. Diese Datei verwendet den Stylus CSS -Präprozessor, aber Sie können auch wörtliche CSS einfügen, die in die generierte CSS -Datei wieder aufgenommen werden.

Erstens möchten wir sicherstellen, dass die gesamte Seite 100% der Höhe einnimmt.

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

Zweitens möchten wir sicherstellen, dass der Wickelbereich die maximale Höhe einnimmt, die er kann, aber ein 60px -Rand am Boden für unsere Fußzeile und unsere Meldungsbearbeitungsbereich verlässt.

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

Drittens möchten wir sicherstellen, dass dieser Raum für den Bearbeitungsbereich respektiert wird und ihn der Fußzeile zuordnen.

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

Fügen wir aus stilistischen Gründen der Fußzeile schließlich eine subtile Hintergrundfarbe hinzu.

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

abgeschlossener Stil.Styl

.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

screenshot

Wenn Sie alles richtig gemacht haben, sollten Sie eine Benutzeroberfläche haben, die so aussieht:

Schlussfolgerung

voila! Wir haben Bootstrap und die Jade/Stylus -Präprozessoren verwendet, um ein schönes UI -Layout für unseren Chatroom hinzuzufügen, der von Node.js. In der nächsten Rate zeige ich Ihnen, wie Sie die Benutzeroberfläche und das Node.js -Backend über WebSockets verbinden.

Bleiben Sie auf Teil 5!

Teil 5 - Das Verbinden des Chatrooms mit WebSockets ist hier. Sie können über diese und andere Artikel auf dem Laufenden bleiben, indem Sie meinem Twitter-Account

folgen

mehr node.js lernt auf azure

Für eingehenderes Lernen auf Node.js ist mein Kurs hier in der Microsoft Virtual Academy verfügbar.

oder einige kürzere Formatvideos zu ähnlichen Knoten.js Themen:

• Sechs-Teil-Serie: Erstellen von Apps mit Node.js

• Ein Spaziergang durch Knoten (coding4fun)

Dieser Artikel ist Teil der Web Dev Tech -Serie von Microsoft. Wir freuen uns, Projekt Spartan und seinen neuen Rendering -Engine mit Ihnen zu teilen. Holen Sie sich kostenlose virtuelle Maschinen oder testen Sie remote auf Ihrem Mac-, iOS-, Android- oder Windows -Gerät bei modernen.

häufig gestellte Fragen (FAQs) zum Erstellen eines Node.JS-Anbieter-Chatroom-Web-App

Wie kann ich die Chat-Benutzeroberfläche in meiner Node.js-gestützten Chatroom-Web-App anpassen? Dateien, die der Chat -Benutzeroberfläche zugeordnet sind. Sie können die Farben, Schriftarten und das Layout der Chat -Benutzeroberfläche zu Ihren Vorlieben ändern. Sie können auch zusätzliche Funktionen wie Emojis, Dateifreigabe und Sprachnachrichten hinzufügen, indem Sie Bibliotheken von Drittanbietern integrieren oder Ihren eigenen benutzerdefinierten Code schreiben. Denken Sie daran, Ihre Änderungen gründlich zu testen, um sicherzustellen, dass sie wie erwartet funktionieren und keine Fehler in Ihre App einführen. Es ist wichtig, sich auf Benutzerfreundlichkeit und Einfachheit zu konzentrieren. Die Chat-Benutzeroberfläche sollte auch für Erstnutzer intuitiv und einfach zu bedienen sein. Es sollte auch reagieren, dh es sollte auf allen Geräten und Bildschirmgrößen gut aussehen und funktionieren. Weitere Best Practices sind die Bereitstellung von Feedback für den Benutzer (z. B. Anzeigen, wann eine Nachricht gesendet oder gelesen wurde), die Anpassung (z. Sicher, die Benutzeroberfläche ist über die Tastatur navigierbar).

Wie kann ich meiner Chatroom-Web-App Echtzeit-Funktionen hinzufügen? WebSocket, ein Protokoll, das über eine einzelne TCP-Verbindung mit Full-Duplex-Kommunikationskanälen verfügt. Dies ermöglicht eine Echtzeitkommunikation zwischen Client und Server. In node.js können Sie Bibliotheken wie Socket.io verwenden, um die WebSocket -Funktionalität einfach zu implementieren. Auf diese Weise können Nachrichten sofort gesendet und empfangen werden, wodurch Ihre Benutzer ein nahtloses Chat-Erlebnis bereitgestellt werden. ist ein entscheidender Aspekt jeder Web -App. In node.js können Sie Fehler mithilfe von Middleware -Funktionen verarbeiten. Diese Funktionen können Fehler aufnehmen und umgehen, die während der Ausführung Ihres Codes auftreten. Sie können auch Try/Catch -Blöcke verwenden, um Fehler im synchronen Code zu verarbeiten. Es ist wichtig, dem Benutzer informative Fehlermeldungen bereitzustellen und Fehler für Debugging -Zwecke zu protokollieren.

Wie kann ich die Sicherheit meiner Chatroom -Web -App sicherstellen? beinhaltet mehrere Schritte. Zunächst sollten Sie HTTPS verwenden, um Daten auf dem Transport zu verschlüsseln. Zweitens sollten Sie die Benutzereingabe sanieren, um die Skriptangriffe (Skript-) Angriffe (Cross-Site-Skripts) zu verhindern. Drittens sollten Sie sichere Cookies verwenden, um eine Entführungs von Sitzungen zu verhindern. Viertens sollten Sie die Ratenbeschränkung umsetzen, um Brute -Force -Angriffe zu verhindern. Schließlich sollten Sie Ihren Node.js und alle anderen Software auf dem neuesten Stand halten, um von den neuesten Sicherheitspatches zu profitieren.

Wie kann ich meine node.js-angetriebene Chatroom-Web-App skalieren? Eine gemeinsame Methode ist die horizontale Skalierung, bei der mehr Server hinzugefügt werden, um eine erhöhte Last zu bewältigen. Eine andere Methode ist die vertikale Skalierung, bei der mehr Ressourcen (z. B. CPU oder RAM) zu einem vorhandenen Server hinzugefügt werden. Sie können auch Lastausgleich verwenden, um den Datenverkehr gleichmäßig auf mehrere Server zu verteilen.

Wie kann ich meine Chatroom -Web -App testen? Eine gute Benutzererfahrung. Sie können Unit-Tests verwenden, um einzelne Funktionen zu testen, Integrationstests zu testen, wie unterschiedliche Teile Ihrer App zusammenarbeiten, und End-to-End-Tests, um Ihre App aus der Sicht des Benutzers zu testen. Sie können auch manuelle Tests verwenden, um Probleme zu erfassen, die automatisierte Tests möglicherweise vermissen. Die Web -App kann mit verschiedenen Plattformen wie Heroku, AWS oder Google Cloud erfolgen. Diese Plattformen bieten Tools und Dienste, mit denen Sie Ihre App einfach bereitstellen, skalieren und überwachen können. Sie sollten auch in Betracht ziehen, die Tools für kontinuierliche Integration/Continuous Deployment (CD) zu verwenden, um den Bereitstellungsprozess zu automatisieren und sicherzustellen, dass Ihre App immer auf dem neuesten Stand ist. 🎜>

Überwachung der Leistung Ihrer Chatroom -Web -App ist entscheidend, um sicherzustellen, dass sie schnell und reaktionsschnell bleibt. Sie können Tools wie neuer Relikt oder Datadog verwenden, um die Leistung Ihrer App in Echtzeit zu überwachen. Diese Tools können Einblicke in verschiedene Metriken liefern, wie z. B. Antwortzeit, Fehlerrate und Serverlast.

Wie kann ich die Benutzererfahrung meiner Chatroom -Web -App verbessern? Ihrer Chatroom -Web -App kann durch verschiedene Methoden erreicht werden. Zunächst sollten Sie sich auf die Leistung konzentrieren, da eine schnelle und reaktionsschnelle App eine bessere Benutzererfahrung bietet. Zweitens sollten Sie Ihre App für alle Benutzer zugänglich machen, einschließlich derjenigen mit Behinderungen. Drittens sollten Sie sich auf das Feedback der Benutzer anhören und Verbesserungen auf der Grundlage ihrer Vorschläge vornehmen. Schließlich sollten Sie Ihre App regelmäßig aktualisieren, um neue Funktionen hinzuzufügen und Fehler zu beheben.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Node.JS-Betriebene-Chatroom-Web-App: Chatroom UI mit Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!