react slack clone

react slack clone

Chatkit を利用した Slack クローン。ここで実際の動作をご覧ください https://pusher.github.io/react-slack-clone

これは、セットアップ、配布、開発を容易にするために、create-react-app でブートストラップされた静的な単一ページの Web アプリです。これは、pusher-chatkit-client ライブラリの薄い UI ラッパーであり、さまざまな機能がどのように連携して、さまざまな潜在的な製品アプリケーションを備えた魅力的なリアルタイム チャット クライアントを形成できるかを示します。

特徴

Chatkit SDK を使用すると、チャット クライアントに期待される機能を実装できます。これらには次のものが含まれます。

• パブリックおよびプライベートのチャット ルーム
• ?リアルタイムのメッセージ送受信
• ?リッチメディア添付ファイル (ドラッグ アンド ドロップ)
• タイピングとプレゼンスインジケーター
• メッセージカーソルの読み取り

参加したいですか？初心者向けの GitHub に関する問題が多数あります。

コンポーネント

デモは、こちらのドキュメントに従って機能を完成させようとしています。機能リクエストは、このリポジトリへの課題またはプル リクエストを通じて行う必要があります。

• CreateMessageForm - テキスト本文を含むメッセージを送信し、入力インジケーターをトリガーします。
• CreateRoomForm - 新しいルームを作成し、作成時に参加します。
• FileInput - リッチメディア添付ファイルを含むメッセージを送信します。
• メッセージ - 添付ファイルが含まれる可能性のあるメッセージを表示します。
• MessageList - キー値ストアからメッセージのリストをレンダリングします。
• RoomHeader - 特定の部屋に関する役立つ情報を表示します。
• RoomList - 現在のユーザーが購読できるルームのリストを表示します。
• TypingIndicator - 別のユーザーが特定の部屋で入力していることをユーザーに示します。
• UserHeader - 特定のユーザーに関する有用な情報を表示します。

使用法

アプリケーションをローカルで実行するには;リポジトリのクローンを作成し、依存関係をインストールして、アプリを実行します。

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

アプリは開発モードで起動し、 http://localhost:3000でブラウザ ウィンドウを開きます。ソース ファイルが変更されると、プロジェクトが再構築され、ブラウザが自動的にリロードされます。ビルドまたはランタイム エラーはすべて伝播され、ブラウザに表示されます。

このアプリは、GitHub 認証と、https://chatkit-demo-server.herokuapp.com でホストされるユーザー作成エンドポイントに依存します。エンドポイントは/authと/tokenです。