PubNub Chatbietet ein robustes Echtzeit-Netzwerk und APIs zum Senden und Empfangen von Daten in jeder Anwendung. Nutzen Sie unsere Dienste, um schnell einen Chat mit Sicherheit, Skalierbarkeit und Zuverlässigkeit auf Unternehmensniveau aufzubauen. Mit PubNub entfällt der Zeitaufwand für die Einrichtung und Verwaltung Ihrer Infrastruktur, so dass Sie sich auf die Lösung von Geschäftsproblemen für Ihre Kunden konzentrieren können.

In diesem Tutorial erfahren Sie, wie Sie eine Live-Chat-Anwendung mit nur zehn Zeilen Code erstellen können, indem Sie dasPubNub JavaScript SDK.

Probieren Sie die Chat-Demo aus

Sie haben zwei Möglichkeiten, diese Demo auszuprobieren:

1. Unsereinteraktive 10-Chat-Demowird Sie Schritt für Schritt durch diese Mini-Chat-Anwendung führen. Diese Demo ist derselbe Code, den Sie unten mit einer interaktiven Anleitung kopieren können.

2. Klonen Sie das GitHub-Repository um zu sehen, wie die Anwendung hinter den Kulissen funktioniert, und um Ihre eigenen Funktionen zu entwickeln.

Öffnen Sie die Demo in zwei Tabs, um zwischen den Fenstern zu chatten!

Wie Sie Ihre eigene Echtzeit-Chat-Anwendung erstellen

Um Ihre Echtzeit-Chat-Anwendung zu starten, benötigen Sie die API-Schlüssel, die für die Verbindung mit der PubNub-Plattform erforderlich sind: die Veröffentlichungs- und Abonnementschlüssel. Sie können Ihren eigenen Satz kostenloser API-Schlüssel erhalten, indem Sie die folgenden Schritte ausführen:

1. Loggen Sie sich in dasVerwaltungsportal.

2. Klicken Sie auf den Reiter Apps auf der linken Seite.

3. Klicken Sie auf die Schaltfläche "Neue App erstellen", um eine neue Anwendung zu erstellen. Geben Sie der Anwendung einen Namen und klicken Sie auf die Schaltfläche "Erstellen".

4. Klicken Sie auf Ihre neu erstellte App. Sie werden zur Seite mit den Schlüsselsätzen für diese Anwendung weitergeleitet. Beachten Sie, dass jede erstellte Anwendung automatisch ein neues Keyset für Sie generiert, aber Sie werden ein neues Keyset erstellen, um bestimmte Funktionen zu aktivieren.

5. Klicken Sie auf die Schaltfläche "Create New Keyset" (Neues Keyset erstellen) auf der oberen rechten Seite des Portals.

6. Es erscheint ein Pop-up-Fenster. Geben Sie dem Keyset einen Namen und klicken Sie auf die Schaltfläche "Erstellen".

7. Klicken Sie auf das neu erstellte Keyset.

8. Kopieren Sie die Publish- und Subscribe-Schlüssel, indem Sie auf die Kopiersymbole neben den einzelnen Schlüsselfeldern klicken.

Sobald Sie die API-Schlüssel erhalten haben, erstellen Sie die Datei index.html und speichern Sie sie. Integrieren Sie in index.html das PubNub-SDK in Ihr Projekt, indem Sie ein Content Delivery Network verwenden.

https://cdn.pubnub.com/sdk/javascript/pubnub.7.5.0.js
https://cdn.pubnub.com/sdk/javascript/pubnub.7.5.0.min.js

Anschließend konfigurieren Sie PubNub, indem Sie den folgenden Code in die Datei für Ihre Anwendung einfügen.

// Open 2 tabs to chat between windows

// Get your PubNub keys from admin.pubnub.com
var pubnub = new PubNub(
  {publishKey: 'PUBNUB_PUBLISH_KEY', subscribeKey: 'PUBNUB_SUBSCRIBE_KEY', 
   userId: 'user1'});
var channel = '10chat';

// Add a listener to a channel and subscribe to it
pubnub.addListener({
  message: function (m) {
    box.innerHTML += newRow(m.message, 
     m.publisher);
  }
});
pubnub.subscribe({channels: [channel]}); 
// Publish new message when enter is pressed. 
input.addEventListener('keypress', function (e) {
  (e.keyCode || e.charCode) === 13 && 
   pubnub.publish({ 
    channel: channel, message: input.value, 
     x: (input.value = '')
  });
});

Stellen Sie sicher, dass Sie PUBNUB_PUBLISH_KEY und PUBNUB_SUBSCRIBE_KEY durch die entsprechenden Veröffentlichungs- und Abonnementschlüssel ersetzen, die Sie vom PubNub Admin Portal erhalten haben.

Sie können Ihre Chat-Anwendung vervollständigen, indem Sie die Eingabefelder für die Nachrichten, die Chat-Schaltflächen für das Senden und das benutzerdefinierte CSS für die Gestaltung dieser Elemente hinzufügen. Schauen Sie sich die Simple Chat GitHub für weitere Informationen und den kompletten Quellcode.

Welche Tools können mir bei der Erstellung von Chats helfen?

PubNub bietet viele SDKs, darunter ein spezielles Chat-SDK das speziell auf den Anwendungsfall Chat zugeschnitten ist und benutzerfreundliche Methoden bietet, mit denen Sie genau das tun können, was Sie wollen.

Diese SDKs machen es einfach, Chat zu Ihren Anwendungen hinzuzufügen. Sie können sich darauf konzentrieren, die beste clientseitige Benutzererfahrung zu schaffen, während PubNub sich um die Serverseite der Anwendung kümmert.

Erstellen Sie private 1:1-Chaträume, Gruppenchats oder sogar Mega-Chats für Großveranstaltungen. Hier sind ein paar Beispiele:

• Virtuelle Veranstaltungen: Streaming-Chat bei Live-Veranstaltungen

• Telemedizin: Privater Chat zwischen Ärzten und Patienten

• Spiele: Live-Chat für Online-Spieler

• Unterstützung: Chat zwischen Agenten und Kunden

• Marktplätze: Chat zwischen Käufern und Verkäufern

• Zusammenarbeit: Chat für die Teamkommunikation am Arbeitsplatz

Erweiterte Chat-Funktionen

Sobald Sie Nachrichten senden und empfangen, können Sie PubNub Chat nutzen, um Funktionen wie diese in Ihren Chat einzubauen:

• Tippen von Indikatoren: Zeigen Sie an, ob die Benutzer in einem Kanal Nachrichten tippen.

• Lesebestätigungen: Ermöglicht es Benutzern, die Zustellung von Nachrichten in einem Channel zu verfolgen.

• Senden und Empfangen von Dateien: Hochladen und Freigeben von Dateien für andere Benutzer in der Anwendung

• Persistenz von Nachrichten: Speichern und Abrufen von Nachrichten, wenn sie über das Netz gesendet werden.

• Online/Offline-Präsenz-Indikatoren: Verfolgen Sie den Online- und Offline-Status von Benutzern und Geräten in Echtzeit und speichern Sie benutzerdefinierte Statusinformationen

• Anzahl ungelesener Nachrichten: Ermitteln Sie die Anzahl der Nachrichten in Kanälen, die nach einem bestimmten Zeitstempel veröffentlicht wurden.

Was kann ich sonst noch mit PubNub machen?

PubNub unterhält 15+ synchronisierte globale Präsenzpunkte, die Nachrichten in weniger als 100 Millisekunden an jedes Gerät liefern können. PubNub hat Funktionen wieFunktionenund Mobile Push-Benachrichtigungendie Sie in Ihrem Produkt nutzen können.

Mit den PubNub-SDKs können Entwickler schnell Chat- und andere Echtzeitfunktionen erstellen, ohne viel Zeit für das Erlernen, Erstellen und Verwalten der Mechanismen für das Senden von Chat-Nachrichten oder anderen Daten in Echtzeit aufwenden zu müssen. Die gesamte Skalierung und Infrastruktur wird für Sie übernommen. Mit PubNub können Sie sich auf das Frontend Ihres Spiels konzentrieren, ohne sich um die Infrastruktur dahinter kümmern zu müssen.

Sehen Sie sich weitere Chat-Ressourcen an, damit Sie noch heute loslegen können:

• Anleitungen zur Implementierung spezifischer Anwendungsfälle für Ihre Chat-Anwendung.

• Entwickeln Sie eine In-App-Chat-Anwendung mit dem PubNub JavaScript SDK.

• Erfahren Sie wie Sie das Chat-SDK von PubNub einrichten und verwenden, um eine flexible Chat-Anwendung zu entwickeln.

Haben Sie Fragen oder Bedenken? Wenden Sie sich bitte an unser Team unter devrel@pubnub.com.

Wie kann PubNub Ihnen helfen?

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

Unsere Plattform hilft Entwicklern 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