SignalRとのチャットアプリケーションの構築

このチュートリアルでは、ASP.NET開発者向けのオープンソースライブラリであるSignalrを使用して、簡単なチャットアプリケーションを構築することを示しています。 Signalrは、node.jsのsocket.ioと同様のリアルタイムWeb機能を提供します。 Socket.ioはEmberなどのJavaScriptフレームワークで好まれる場合がありますが、Signalrは広範なドキュメントを提供し、ASP.NETエコシステムの利点を活用しています。 このチュートリアルでは、ember.js。

に精通しています

重要な概念：

• signalr：ASP.NETアプリケーションにリアルタイム機能を追加するための強力なライブラリ。 インタラクティブなWebアプリケーションを構築するプロセスを簡素化します
ember.jsコンポーネント：機能性をカプセル化してコード組織を改善する再利用可能なUI要素。 このチュートリアルでは、チャットルーム、ユーザーリスト、チャットエリア、個々のユーザーアイテムのコンポーネントを利用しています。
• エンバーコントローラーとモデル：それぞれアプリケーションロジックとデータバインディングを管理し、チャットデータを処理するための構造化されたアプローチを提供します。
signalrハブ：
• サーバーとクライアント間の通信を容易にするサーバー側コンポーネント。 このチュートリアルでは、「ロビー」ハブを使用してユーザーの接続とメッセージを管理しています。 cors（クロスオリジンリソース共有）：
サーバーとクライアントが異なるドメインに存在する場合の潜在的な問題に対処します。 適切なCORS構成は、コミュニケーションを成功させるために重要です
• EMBER CLIの始めましょう：
• 新しいEmberアプリケーションを作成：

依存関係のインストール：（セマンティックUIはレスポンシブレイアウトフレームワークを提供します）。 セマンティックUIをインポート：次の行を

：

に追加します
1. ember new chatr
2. エンバーのルートとコンポーネントを生成：ember install semantic-ui-ember
3. Brocfile.js
コンポーネントをルートのテンプレートに統合します（

）：

<code class="language-javascript">app.import('bower_components/semantic-ui/dist/semantic.css');
app.import('bower_components/semantic-ui/dist/semantic.js');</code>

<code class="language-bash">ember g route chat
ember g component chat-room
ember g component chat-userlist
ember g component chat-area
ember g component chat-useritem
ember g controller chat
ember g model chat-room
ember g model chat-user
ember g model chat-message</code>

Visual Studioで新しい空のWebアプリケーションプロジェクトを作成します。 chat-room chatOwin Startup Class（）：app/templates/chat.hbsを作成します

<code class="language-handlebars">{{#chat-room
  users=room.users
  messages=room.messages
  topic=room.topic
  onSendChat="sendChat"}}{{/chat-room}}</code>

Lobby Hub（）の作成：このハブは、ユーザー接続、メッセージブロードキャスト、およびユーザー管理を処理します。 （実装の詳細は簡潔に省略されていますが、元の応答はコードを提供します。）

emberおよびsignalrとのクライアント側の統合：
1. 1. bowerを使用してsignalrをインストール：bower install signalr --save
   ）：Brocfile.js

   <code class="language-javascript">app.import('bower_components/semantic-ui/dist/semantic.css');
   app.import('bower_components/semantic-ui/dist/semantic.js');</code>

   3. ：app/index.htmlにsignalr hubsスクリプトを含めます

   <code class="language-bash">ember g route chat
   ember g component chat-room
   ember g component chat-userlist
   ember g component chat-area
   ember g component chat-useritem
   ember g controller chat
   ember g model chat-room
   ember g model chat-user
   ember g model chat-message</code>

   ユーティリティクラスを使用してSignalRの相互作用を簡素化します。 >

   app/initializers/signalr.js SignalRConnectionCORSのハンドル：

   nugetパッケージをインストールし、ファイルにCORSミドルウェアを構成して、Emberアプリケーションからクロスドメイン要求を許可します。 （実装の詳細は元の応答にあります。）

   4. Microsoft.Owin.Cors Startup.cs

      結論：

   この改訂された応答は、Processのより簡潔で構造化された概要を提供し、SignRとEmberを使用してリアルタイムチャットアプリケーションの構築に伴う重要なコンポーネントとステップを強調します。 元の応答には、各コンポーネントの詳細なコードスニペットが含まれています。これは、簡潔にするためにここで省略されていますが、元の出力で容易に利用できます。 完全なコード実装については、元の応答を参照してください。

以上がSignalRとのチャットアプリケーションの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。