Wie man eine einfache webbasierte Chat-Anwendung erstellt

PubNub Developer Relations - Jan 19 - - Dev Community

Echtzeitsysteme und Messaging-Plattformen sind aus unserem Alltag nicht mehr wegzudenken, da sie eine sofortige Kommunikation zwischen den Benutzern ermöglichen. Von Textnachrichten und E-Mails bis hin zu Gruppenchats in Microsoft Teams, Slack oder WhatsApp - wir alle haben unsere bevorzugten Plattformen, um die ständige Kommunikation mit Freunden und Kollegen zu pflegen. Diese Chat-Anwendungen sind allgegenwärtig und aufgrund ihrer unmittelbaren Antwortzeiten und umfangreichen Funktionen in fast jede moderne Echtzeitanwendung integriert.

Die zunehmende Abhängigkeit von Chat-Anwendungen ist auf ihre zahlreichen Vorteile zurückzuführen. Sie ermöglichen beispielsweise eine schnellere Entscheidungsfindung, eine bessere Zusammenarbeit und eine höhere Produktivität. Darüber hinaus zeichnen Chat-Plattformen alle Unterhaltungen auf, was die Nachverfolgung des Fortschritts erleichtert und den Rückgriff auf frühere Diskussionen ermöglicht. Außerdem werden diese Anwendungen immer ausgefeilter und bieten Funktionen wie Video- und Sprachanrufesowie die gemeinsame Nutzung von Bildschirmen und Dateien, was sie noch vielseitiger für verschiedene Zwecke macht. Insgesamt sind Chat-Anwendungen zu unverzichtbaren Werkzeugen für die moderne Kommunikation und Zusammenarbeit geworden.

Warum eine einfache webbasierte Chat-Anwendung erstellen?

Es besteht eine große Nachfrage nach neuen und innovativen Chat-Anwendungen, die auf spezifische Bedürfnisse zugeschnitten sind.

Webbasierte Chat-Anwendungen können angepasst werden an verschiedene Branchen und Unternehmenangepasst werden und bieten den Benutzern eine einzigartige Plattform für Kommunikation und Zusammenarbeit. So kann eine Chat-Anwendung, die für Fachleute im Gesundheitswesen entwickelt wurde, spezielle Funktionen wie sichere Nachrichtenübermittlung enthalten (HIPAA-konform) und Videokonsultationen enthalten, was die Effizienz und Effektivität für Mediziner erhöht.

Die Entwicklung einer Chat-Anwendung kann auch lukrative Geschäftsmöglichkeiten bieten, die durch Werbung, Abonnements und In-App-Käufe Einnahmen generieren können. Darüber hinaus sind die Möglichkeiten für Chat-Anwendungen angesichts des technologischen Fortschritts endlos und bieten das Potenzial, modernste Funktionen wie künstliche Intelligenz und virtuelle Realität einzubinden.

Vorteile einer einfachen webbasierten Chat-Anwendung

Der Aufbau einer einfachen webbasierten Chat-Anwendung kann viele Vorteile mit sich bringen. Eine Chat-Anwendung macht es einfach, mit Menschen überall auf der Welt zu kommunizieren, indem Nachrichten gesendet und empfangen werden. Mit einer webbasierten Chat-Anwendung können die Benutzer durch benutzerdefinierte Nachrichtenfunktionen die gleichen fesselnden und lebhaften Interaktionen erhalten, wie sie sie auch persönlich führen würden. Dies ermöglicht es den Nutzern auch, sich auf Ihrer Plattform zu unterhalten, anstatt anderswo nach einer Messaging-Lösung zu suchen. Ob es sich um privater Chat, Gruppen-Chatoder groß angelegter ChatDurch das Hinzufügen von personalisierten Chat-Funktionen zu Ihrer Anwendung können Sie sicherstellen, dass Ihre Nutzer ein unvergessliches Erlebnis haben.

Eine webbasierte Chat-Anwendung kann einen Komfort bieten, den andere Kommunikationsformen nicht bieten können. Die Benutzer können von jedem Ort mit einer Internetverbindung auf die Anwendung zugreifen, so dass es einfach ist, auch unterwegs in Verbindung zu bleiben. Außerdem können webbasierte Chat-Anwendungen so gestaltet werden, dass sie nahtlos mit anderen Anwendungen zusammenarbeiten, so dass die Benutzer zwischen verschiedenen Tools und Funktionen wechseln können, ohne ihre Gespräche zu unterbrechen.

Erstellen oder Kaufen einer einfachen webbasierten Chat-Anwendung

Die Entscheidung, ob man eine interne Chat-Lösung entwickelt oder sich für eine von einem Anbieter bereitgestellte Lösung entscheidet, ist eine wichtige Entscheidung. Für einige Unternehmen kann die Verfügbarkeit von Entwicklern im eigenen Haus oder bei einem Vertragsunternehmen die Aussicht auf die Entwicklung und den Besitz einer vollständig angepassten Chat- oder Messaging-Lösung verlockend machen. Alternativ dazu kann der Kauf einer bestehenden Chat-Lösung mit einem As-a-Service-Preismodell zahlreiche Vorteile bieten, aber auch Herausforderungen mit sich bringen. Ein Plug-and-Play-Chat-Anbieter ist jedoch eine dritte Möglichkeit, einem Softwareprodukt Chatfunktionen hinzuzufügen. Diese Option kann für bestimmte Anwendungen ausreichen, da sie UI-Funktionen bietet, die für alle Größen geeignet sind, und Backend-Integrationen vereinfacht.

Bevor Sie sich dazu entschließen, eine Chatfunktion zu entwickeln oder zu kaufen, sollten Sie sich unbedingt Gedanken über das zentrale Wertversprechen Ihres Unternehmens machen und den Chat im Verhältnis zu den Hauptproblemen, die Sie für Ihre Kunden lösen wollen, angemessen priorisieren. Obwohl er viele Vorteile bietet, ist er selten ein entscheidendes Unterscheidungsmerkmal für Ihr Unternehmen.

Von außen betrachtet mag der Chat wie eine unkomplizierte Komponente erscheinen, die in Ihre aktuelle Infrastruktur integriert werden kann. Die Entwicklung einer solchen Komponente kann jedoch die gleiche, wenn nicht sogar mehr, Entwicklungskraft beanspruchen als ein völlig neues Produkt, und Entwicklungsressourcen sind sowohl kostspielig als auch begrenzt. In den meisten Fällen ist es wichtiger, sich auf das zentrale Wertversprechen zu konzentrieren, als an einem Chat zu arbeiten. Beantworten wir nun die Frage: Wie können Sie Kosten und Zeit sparen und trotzdem eine vollständig anpassbare Chat-Lösung erreichen, die in Ihre Webanwendung integriert werden kann?

Um eine vollständig anpassbare Chatlösung zu erhalten, die leicht in jede Webanwendung integriert werden kann, und gleichzeitig Kosten und Zeit zu sparen, können Sie die Vorteile von Infrastruktur als Dienstleistung (IaaS) nutzen. IaaS ist ein Cloud-basiertes Computermodell, das es Ihnen ermöglicht, Rechenressourcen wie Server, Speicher und Netzwerkkomponenten auf einer Pay-as-you-go-Basis zu mieten. Durch den Einsatz von IaaS können Unternehmen die Vorlaufkosten für den Aufbau und die Wartung ihrer Infrastruktur vermeiden und sich stattdessen auf die Entwicklung ihres Kernangebots konzentrieren. Mit diesem Modell lässt sich die Infrastruktur schnell und je nach Bedarf und Anforderungen skalieren.

Was ist bei der Entwicklung einer webbasierten Chat-Anwendung zu beachten?

Die Entwicklung einer Echtzeit-Chat-Anwendung erfordert eine sorgfältige Planung und Überlegung, um sicherzustellen, dass die Anwendung die gewünschte Funktionalität und Benutzerfreundlichkeit bietet. Im Folgenden werden einige Überlegungen zur Erstellung einer Echtzeit-Chat-Anwendung von Grund auf oder unter Verwendung eines IaaS-Dienstes erläutert.

Ansprechende Echtzeit-Messaging-Funktionen

Chat-Anwendungen sind heute viel komplexer als das Senden und Empfangen von Nachrichten. Die Benutzer werden immer einige andere Funktionen wünschen, wenn sie einen In-App-Chat verwenden. Eine digitale webbasierte Chat-Anwendung mit Echtzeit-Messaging-Funktionen ermöglicht den Benutzern ein authentisches und interaktives Erlebnis.

Funktionen wie Nachrichtenreaktionen, Sticker, Emojis, GIFs, Sprachanrufe und Video-Chat bieten eine Möglichkeit, Ihre Nutzer direkt in Ihrer App statt auf externen Plattformen zu engagieren und so eine stärkere Verbindung herzustellen.

Andere Funktionen wie die Identifizierung aktiver Nutzer, mobile Push-Benachrichtigungenund Nachrichtenverlauf-um nur einige zu nennen- tragen ebenfalls zu dieser Unmittelbarkeit bei, indem sie automatisch die Anwesenheit von Nutzern in einer Echtzeit-Chat-Anwendung erkennen oder Nutzer zurück zu Ihrer aktuellen Anwendung rufen. Zum Beispiel, Anwesenheit lässt die Benutzer wissen, wann ihre Freunde, Mitspieler oder Mitarbeiter online sind. Dies ist besonders wichtig und sollte bei einer webbasierten Anwendung in Betracht gezogen werden, da die Benutzer so auf Ihrer Website bleiben und nicht zu einer anderen Anwendung wechseln, die ein intensiveres Erlebnis beim Chatten mit Freunden oder Mitarbeitern bietet.

Robustes System zur Benutzerauthentifizierung und -autorisierung

Mit der heutigen Technologie neigen einfache Chat-Anwendungen aufgrund der Anzahl der Chats, die erstellt werden können, dazu, ein fortschrittlicheres Authentifizierungssystem zu haben. Unabhängig davon, ob es sich um einen öffentlichen Chat-Raum, einen Gruppen-Chat oder einen 1:1-Chat handelt, gibt es Beschränkungen dafür, wer Zugang zu bestimmten Unterhaltungen hat, damit Ihre Benutzer bestimmte Nachrichten sehen können.

Wenn Sie in Erwägung ziehen, einen Chat von Grund auf neu zu erstellen und dabei Technologien wie Socket.IO verwenden wollen, müssen Sie eine Kanalarchitektur über der Kommunikationsschicht einrichten. Kanäle würden für die Datenübertragung für jeden Chat jedes Typs isoliert werden. Nur authentifizierte Benutzer oder Benutzer, die den Kanal/Chat erstellt haben, können auf den aktuellen Kanal zugreifen und Personen dazu einladen.

Die zweite Schutzschicht ist die Identitätsauthentifizierung, die durch ein dynamisches Token-Authentifizierungssystem wie JSON Web Tokens (JWT). Ein Token ist ein kurzlebiger Zugangsschlüssel, der vom Backend-Server der App generiert wird und es den Benutzern ermöglicht, auf Kanäle zuzugreifen, zu denen sie eingeladen wurden oder zu denen sie Zugang haben. Im Backend-Server müsste eine Logik implementiert werden, um das Token in kanalidentifizierbare Objekte zu zerlegen, die angeben, welche Kanäle die Benutzer veröffentlichen (eine Nachricht senden) oder abonnieren (Nachrichten von ihnen lesen) können.

Die Verschlüsselung ist eine weitere Sicherheitsebene, die auf die Datenübertragungs- und Datenspeicherungsschicht aufgesetzt werden kann. Dies hängt vom Übertragungsprotokoll ab; Sie können Transport Layer Security (TLS) oder Web Socket Secure (WSS) implementieren, um die Funktionalität für einen privaten Chat in Ihrer Webanwendung zu erreichen.

Die Verwendung eines IaaS-Dienstes wie PubNub basiert auf einer Architektur mit Kanaltrennung und bietet einen Zugangsmanager der Konfigurationen für die Identitätsauthentifizierung enthält, so dass alle Nachrichten und Kanäle geschützt sind und es nach der Konfiguration im Ermessen des Benutzers liegt, welche Art von Chat er erstellen möchte.

Skalierbarkeit Ihrer Chat-Anwendung in Echtzeit

Bei der Entwicklung einer webbasierten Chat-Anwendung von Grund auf sollte die Skalierbarkeit eine wichtige Rolle spielen, um sicherzustellen, dass der Chat mit einem wachsenden Benutzerstamm und zunehmendem Datenverkehr zurechtkommt.

Die Backend-Architektur sollte so konzipiert sein, dass sie viele gleichzeitige Benutzer und Nachrichten verarbeiten kann. Eine skalierbare Architektur kann eine verteilte Datenbank, Lastverteilerund Caching-Mechanismen verwenden, um den hohen Datenverkehr zu bewältigen und die Leistung zu verbessern. Mit der wachsenden Zahl von Benutzern und Nachrichten steigen auch die Speicheranforderungen. Die Wahl eines Datenbanksystems, das große Datenmengen bewältigen kann und sich bei Bedarf leicht skalieren lässt, ist von entscheidender Bedeutung.

Wie man eine einfache webbasierte Chat-Anwendung erstellt

Um die Client-Seite Ihrer Webanwendung zu erstellen, laden Sie eine integrierte Entwicklungsumgebung (IDE) wie z. B. Visual Studio Code und wählen Sie ein bestimmtes Framework oder verwenden Sie HTML, CSS und Javascript. Zu den Frameworks für Webanwendungen gehören React oder Angulardie fortschrittlichere Zustandsverwaltungstechniken integrieren, um die Entwicklung zu vereinfachen.

Sobald Sie die neueste Version von Visual Studio Code heruntergeladen haben, erstellen Sie ein Projekt, indem Sie .html-, .css- und .js-Dateien im Projektverzeichnis erstellen. Normalerweise heißen die Kerndateien eines jeden Vanilla-Javascript-Projekts app.js, index.html und main.css. Wenn Sie den absoluten Pfad der index.html-Datei kopieren und in Ihren Browser einfügen, wird Ihr Code nun angezeigt und ausgeführt. Eine detailliertere Beschreibung der Einrichtung eines Vanilla-Javascript-Projekts finden Sie im Visual Studio Code Lehrgang um mit der Webentwicklung zu beginnen. Wenn Sie ein Framework verwenden, können Sie ein Tutorial für den Einstieg in React oder Angular.

Nun müssen wir die serverseitige Sprache und den Hosting-Dienst auswählen, den wir für die Kommunikation verwenden möchten. Erstellen wir zum Beispiel unseren ersten Webserver mit Node.js. Nachdem wir Node.js installiert haben, erstellen wir ein Node.js-Projekt mit dem Befehl "npm init" in unserem Terminal. Nachdem wir ein neues Projekt erstellt haben, können wir es mit Visual Studio Code öffnen und eine Datei namens index.js erstellen, die sich mit dem Hosting des Servers auf localhost beschäftigt. Nachdem wir ein neues Projekt erstellt haben, können wir es mit Visual Studio Code öffnen und dem Node.js Getting Started Anleitung für das lokale Hosting eines Servers folgen.

Wir wollen, dass unsere Front-End-Infrastruktur über ein WebSocket-Protokoll mit unserem Server kommuniziert, damit wir in Echtzeit zwischen zwei Client-Anwendungen kommunizieren können. In diesem Fall müssen wir uns mit der Implementierung und dem Verständnis der WebSocket-Terminologie in Node.js vertraut machen. Wir müssen eine WebSocket-Bibliothek installieren, ws für die WebSocket-Implementierung, express für die Erstellung eines einfachen HTTP-Servers und nodemon um Änderungen an unserem Code zu verfolgen und den Server neu zu starten. Mit all diesen Einstellungen können wir nun die Logik einer einfachen webbasierten Chat-Anwendung implementieren. Weitere Informationen über die Implementierung von WebSockets in node.js finden Sie in unserem Node.js WebSocket Programmierbeispiele.

Obwohl es sicherlich möglich ist, WebSocket-Funktionalität mit den oben genannten Bibliotheken zu implementieren, bietet PubNub eine Reihe von Vorteilen, die es zu einer nützlicheren Wahl für die Implementierung von Echtzeitkommunikation in Ihrer Anwendung machen können. Einer der Hauptvorteile von PubNub ist, dass es eine vollständig verwaltete Infrastruktur für die Echtzeitkommunikation bietet. Das bedeutet, dass Sie sich nicht um die Einrichtung und Verwaltung Ihrer eigenen WebSocket-Server kümmern müssen, da PubNub all dies für Sie übernimmt. Dies kann Ihnen viel Zeit und Mühe ersparen, besonders wenn Sie mit den Feinheiten der WebSocket-Implementierung nicht vertraut sind.

Beispiele für einfache webbasierte Chat-Anwendungen

Webbasierte Chat-Anwendungen wie Messenger, Microsoft Teams oder Slack implementieren benutzerdefinierte Chat-Anwendungen, um einzigartige Benutzererfahrungen zu schaffen. Mit PubNub müssen Unternehmen diese Infrastruktur jedoch nicht einrichten und skalieren.

  • JavaScript-Gruppenchat-Anwendung: Eine einfache webbasierte Gruppen-Chat-Anwendung, die das Javascript-SDK nutzt und es ermöglicht, Nachrichten in Echtzeit über PubNub zu versenden. Dieses Repository ist mit PubNub Messaging geschrieben und wurde in nur zehn Zeilen Code (ohne Styling) realisiert. Sie können das Repository auch von unserem GitHub.

  • Gruppenchat mit React Chat-Komponenten: Diese Gruppen-Chat-Anwendung, die die One-Size-Fits-All-Chat-Komponenten verwendet, ermöglicht es Benutzern, direkte 1-1-Chats und Gruppen-Chats zu starten. Sie wurde mit dem Framework React und unseren React Chat-Komponenten. Sehen Sie sich unser Github um das Repository herunterzuladen.

Erste Schritte mit PubNub für Ihre webbasierte Chat-Anwendung

PubNub ist ein IaaS-Dienst, mit dem Sie eine vollständig anpassbare Chat-Lösung mithilfe eines unserer SDKs die schnell und kostengünstig in Ihre Webanwendung integriert werden kann. Sie können PubNub nutzen, um Echtzeit-Messaging-Funktionen in ihre Anwendung zu integrieren. Letztlich kann diese Strategie Unternehmen helfen, Zeit und Geld zu sparen und gleichzeitig ihren Kunden eine qualitativ hochwertige Chat-Lösung zu bieten.

PubNub hat die folgenden Funktionen in seine API integriert und kann die spezifischen Anforderungen Ihrer Anwendungen erfüllen.

  1. Veröffentlichen: Senden Sie Nachrichten, wenn Benutzereingaben aktualisiert werden, z. B. Textaktualisierungen, Emoji-Reaktionen, gesendete Dateien und andere komplexe Metadaten.

  2. Abonnieren: Empfangen Sie neue Nachrichten, um die Bildschirme der Benutzer zu aktualisieren.

  3. Anwesenheit: Aktualisierung und Erkennung des Online-Status der Benutzer.

  4. Persistenz der Nachricht: Zeigen Sie alle empfangenen Nachrichten an, sobald sich die Benutzer bei der App anmelden, oder verfolgen Sie Projekt- und Dokumentänderungen.

  5. Mobile Push-Benachrichtigungen: Benachrichtigen Sie mobile Benutzer, die sich nicht in der App befinden, über Chat-Nachrichten, Projekt- oder Anwendungsaktualisierungen.

  6. App-Kontext: Speichern Sie Informationen über Ihre Benutzer an einem Ort, ohne Ihre Datenbank einrichten oder aufrufen zu müssen.

  7. Zugriffsmanager: Schränken Sie den Zugriff auf private Unterhaltungen, Channel-Räume, Dokumente und Projekte für bestimmte Benutzer ein.

  8. Funktionen: Übersetzen Sie Nachrichten, zensieren Sie unangemessene Nachrichten, kündigen Sie die Ankunft neuer Nutzer an und benachrichtigen Sie andere Nutzer über Erwähnungen.

  9. Ereignisse & Aktionen: Verwalten Sie Ereignisse im Ökosystem Ihrer Anwendung zentral und lösen Sie Geschäftslogik ohne Code aus.

Um PubNub für Ihre webbasierte Echtzeit-Chat-Anwendung zu nutzen, müssen Sie zunächst ein PubNub-Konto anlegen und das PubNub-SDK für JavaScript herunterladen. Das SDK lässt sich nahtlos in Ihre Anwendung integrieren und ermöglicht Ihnen die Anbindung an die Echtzeit-Kommunikationsplattform von PubNub.

  1. Melden Sie sich an oder erstellen Sie ein Konto, um eine Anwendung auf dem Admin Portal zu erstellen und die Schlüssel für Ihre Anwendung zu erhalten. Erfahren Sie, wie das geht, indem Sie diese Anleitung befolgen Schlüssel erstellen.

  2. Laden Sie herunter. das JavaScript-SDK herunter, indem Sie die Anweisungen in der Dokumentation befolgen, um alle notwendigen PubNub-Abhängigkeiten für Ihre Messaging-App zu installieren.

  3. Folgen Sie der Dokumentation des SDKs, um ein PubNub-Objekt zu konfigurieren und mit der Veröffentlichung und dem Abonnieren von Kanälen zu beginnen.

Wie kann PubNub Ihnen helfen?

Dieser Artikel wurde ursprünglich auf PubNub.com veröffentlicht.

Unsere Plattform unterstützt Entwickler bei der Erstellung, Bereitstellung und Verwaltung von Echtzeit-Interaktivität für Webanwendungen, mobile Anwendungen und IoT-Geräte.

Die Grundlage unserer Plattform ist das größte und am besten skalierbare Echtzeit-Edge-Messaging-Netzwerk der Branche. Mit über 15 Points-of-Presence weltweit, die 800 Millionen monatlich aktive Nutzer unterstützen, und einer Zuverlässigkeit von 99,999 % müssen Sie sich keine Sorgen über Ausfälle, Gleichzeitigkeitsgrenzen oder Latenzprobleme aufgrund von Verkehrsspitzen machen.

PubNub erleben

Sehen Sie sich die Live Tour an, um in weniger als 5 Minuten die grundlegenden Konzepte hinter jeder PubNub-gestützten App zu verstehen

Einrichten

Melden Sie sich für einen PubNub-Account an und erhalten Sie sofort kostenlosen Zugang zu den PubNub-Schlüsseln

Beginnen Sie

Mit den PubNub-Dokumenten können Sie sofort loslegen, unabhängig von Ihrem Anwendungsfall oder SDK

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .