react slack clone

react slack clone

Slack-Klon, unterstützt von Chatkit. Sehen Sie es hier in Aktion: https://pusher.github.io/react-slack-clone

Dies ist eine statische, einseitige Web-App, die zur einfachen Einrichtung, Verteilung und Entwicklung mit einer Create-React-App gebootet wird. Dabei handelt es sich um einen schlanken UI-Wrapper um die Pusher-Chatkit-Client-Bibliothek herum, um zu demonstrieren, wie verschiedene Funktionen zusammenarbeiten können, um einen überzeugenden Echtzeit-Chat-Client mit verschiedenen potenziellen Produktanwendungen zu bilden.

Merkmale

Mit dem Chatkit SDK können Sie Funktionen implementieren, die Sie von einem Chat-Client erwarten würden. Dazu gehören:

• Öffentliche und private Chatrooms
• ? Senden und Empfangen von Nachrichten in Echtzeit
• ? Rich Media-Anhänge (Drag & Drop)
• Tipp- und Anwesenheitsindikatoren
• Nachrichtencursor lesen

Möchten Sie mitmachen? Wir haben eine Reihe anfängerfreundlicher GitHub-Probleme.

Komponenten

Gemäß der Dokumentation hier soll die Demo möglichst funktionsfähig sein. Funktionsanfragen sollten über Issues oder Pull Requests an dieses Repository gestellt werden.

• CreateMessageForm – um eine Nachricht mit einem Textkörper zu senden und Tippindikatoren auszulösen.
• CreateRoomForm – um einen neuen Raum zu erstellen und ihm bei der Erstellung beizutreten.
• FileInput – zum Senden einer Nachricht mit einem Rich-Media-Anhang.
• Nachricht – zum Ausgeben einer Nachricht, die möglicherweise einen Anhang enthält.
• MessageList – zum Rendern einer Liste von Nachrichten aus einem Schlüsselwertspeicher.
• RoomHeader – um nützliche Informationen zu einem bestimmten Raum anzuzeigen.
• RoomList – zum Rendern einer Liste von Räumen, die vom aktuellen Benutzer abonniert werden können.
• TypingIndicator – um dem Benutzer anzuzeigen, dass ein anderer Benutzer in einem bestimmten Raum tippt.
• UserHeader – um nützliche Informationen über einen bestimmten Benutzer anzuzeigen.

Verwendung

Um die Anwendung lokal auszuführen; Klonen Sie das Repo, installieren Sie Abhängigkeiten und führen Sie die App aus.

 $ git clone https://github.com/pusher/react-slack-clone
$ cd react-slack-clone
$ yarn && yarn start

Die App startet im Entwicklungsmodus und öffnet ein Browserfenster unter http://localhost:3000 . Das Projekt wird neu erstellt und der Browser wird automatisch neu geladen, wenn Quelldateien geändert werden. Alle Build- oder Laufzeitfehler werden weitergegeben und im Browser angezeigt.

Die App ist auf die GitHub-Authentifizierung und einen Endpunkt zur Benutzererstellung angewiesen, der unter https://chatkit-demo-server.herokuapp.com gehostet wird. Die Endpunkte sind /auth und /token .