Asp.net SignalR はリアルタイム チャット アプリケーションを作成します

1. 概要

ASP.NET と SignalR 2 を使用してリアルタイム チャット アプリケーションを作成します。 SignalR を MVC 5 アプリケーションに追加し、メッセージを送信および表示するためのチャット ビューを作成します。

デモでは、次のような SignalR 開発タスクを学習します。

MVC 5 アプリケーションに SignalR ライブラリを追加する。
コンテンツをクライアントにプッシュするためのハブ クラスとスタートアップ クラスを作成します。
Web ページから SignalR jQuery ライブラリを使用して、電子メールを送信し、ハブからの更新を表示します。

以下のスクリーンショットは、ブラウザーで実行されている完成したチャット アプリケーションを示しています。

2. 実装

ASP.NET MVC 5 アプリケーションを作成し、SignalR ライブラリをインストールし、チャット アプリケーションを追加して作成します。

1) Visual Studio で、.NET Framework 4.5 を対象とする C# ASP.NET アプリケーションを作成し、SignalRChat という名前を付けて、[OK] をクリックします。2) [新しい ASP.NET プロジェクト] ダイアログ ボックスで、[MVC] を選択します。そして、「認証の変更」をクリックします

注: アプリケーションが別の認証プロバイダーを選択すると、Startup.cs クラスが作成されます。ここでは「認証なし」を選択して、Startup クラスを自分で作成します。

3).SignalR をインストールします ツール | ライブラリ パッケージ マネージャー | パッケージ マネージャー コンソールを開き、次のコマンドを実行します。この手順では、SignalR 機能を有効にする一連のスクリプト ファイルとアセンブリ参照をプロジェクトに追加します。

入力: install-package Microsoft.AspNet.SignalR

インストールが完了すると、次のようなファイルが Scripts フォルダーに表示されます:

4) スタートアップ クラスを作成します。 Startup:

using Owin;
using Microsoft.Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
 public class Startup
 {
  public void Configuration(IAppBuilder app)
  {
   // Any connection or hub wire up and configuration should go here
   app.MapSignalR();
  }
 }
}

5) という名前のルート ディレクトリに Hubs フォルダーを追加し、既存の項目を追加します。 [インストール済み] ウィンドウの中央のウィンドウで、SignalR Hub クラス (v2) を選択し、ChatHub.cs というファイルを作成します。

コードを変更します:

using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
 public class ChatHub : Hub
 {
  public void Send(string name, string message)
  {
   // Call the addNewMessageToPage method to update clients.
   Clients.All.addNewMessageToPage(name, message);
  }
 }
}

6) HomeController クラスを編集し、Controllers/HomeController.cs で次のメソッドを見つけます。このメソッドは、後の手順で作成するチャットのビューを返します。

public ActionResult Chat()
 
{
 
 return View();
 
}

7) Chat() メソッドを右クリックし、[ビュー ページの追加]

コードを次のように変更します。

@{
 ViewBag.Title = "Chat";
}
<h2 id="Chat">Chat</h2>
<div class="container">
 <input type="text" id="message" />
 <input type="button" id="sendmessage" value="Send" />
 <input type="hidden" id="displayname" />
 <ul id="discussion"></ul>
</div>
@section scripts {
 <!--Script references. -->
 <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
 <!--Reference the SignalR library. -->
 <script src="~/Scripts/jquery.signalR-2.0.3.min.js"></script>
 <!--Reference the autogenerated SignalR hub script. -->
 <script src="~/signalr/hubs"></script>
 <!--SignalR script to update the chat page and send messages.-->
 <script>
  $(function () {
   // 建立对应server端Hub class的对象，请注意ChatHub(Hubs文件夹下的类名)的第一个字母要改成小写
   var chat = $.connection.chatHub;
   // 定义client端的javascript function，供server端hub，通过dynamic的方式，调用所有Clients的javascript function
   chat.client.addNewMessageToPage = function (name, message) { //这里的fuction(name,message)=>ChatHub.cs 中的Send(string name, string message)
    //当server端调用sendMessage时，将server push的message数据，呈现在wholeMessage中
    $(&#39;#discussion&#39;).append(&#39;<li><strong>&#39; + htmlEncode(name)
     + &#39;</strong>: &#39; + htmlEncode(message) + &#39;</li>&#39;);
   };
   // Get the user name and store it to prepend to messages.
   $(&#39;#displayname&#39;).val(prompt(&#39;Enter your name:&#39;, &#39;&#39;));
   // Set initial focus to message input box.
   $(&#39;#message&#39;).focus();
   //把connection打开
   $.connection.hub.start().done(function () {
    $(&#39;#sendmessage&#39;).click(function () {
     //调用叫server端的Hub对象，将#message数据传给server
     chat.server.send($(&#39;#displayname&#39;).val(), $(&#39;#message&#39;).val());
     $(&#39;#message&#39;).val(&#39;&#39;).focus();
    });
   });
  });
  // This optional function html-encodes messages for display in the page.
  function htmlEncode(value) {
   var encodedValue = $(&#39;<div />&#39;).text(value).html();
   return encodedValue;
  }
 </script>
}

上記の効果を達成するには、F5 キーを押してプロジェクトを実行します。を使用すると、ユーザーをリアルタイムでライブ同期チャットに参加させることができます。

以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。

Asp.net SignalR を使用したリアルタイム チャット アプリケーションの作成に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。