SignalR，Anglar JSおよびASP.NET MVCはリアルタイムで通信します。

SignalR，Anglar JSおよびASP.NET MVCはリアルタイムで通信します。
著者：Yasser Mmtaz
日付：2015/3/19
原文の住所:http://www.codeproject.com/Tips/888366/SignalR-Angular-JS-and-ASP-NET-MVC-Real-Time-Commu 
概説：ASP.NET MVCとC〓に基づいて、SignalRとAnglar JSを使ってリアルタイム通信アプリケーションを開発します。
プロフィール:
本論文では、ASP.NET MVCとC〓に基づいて、SignalRとAnglar JSを使ってリアルタイム通信アプリケーションを開発する方法を説明します。異なるCRS（Custoomer Service Representation）が同じ顧客の情報を更新して提出することができます。もし彼らが同じ時間に情報を提出すれば、CRSが提出した情報は他のCRSが提出した情報を上書きする可能性があります。CRSは、任意のCRSが情報を更新すると、編集画面にあるすべてのCRSに対して即時に関連通知を発行することを提案する。
SignalR、Anglar JS、toaster.jsを使って、クライアントに通知情報を表示する機能を完成しました。SignalRについてもっと知りたいなら、リンクを読んでください。http://signalr.net   。以下は全体の開発を完了するためのステップと、対応する部分コードです。
準備が始まる
1-まず、SignalRがコンピュータにインストールされていることを保証する必要があります。もしないなら、NuGet Package（Visual Studioに一般的にあります）に以下のコマンドを入力してインストールします。
Install-Paackage Microsoft.AspNet.SignalR.Sample
2-そして、あなたのウェブサイトのソリューションに以下のJSファイルが含まれていることを確認します。もしないなら、該当ウェブサイトからダウンロードできます。
angglar.js
jquery.singalR-x.x.x.js
Toaster.js
3-SignalR hub類BroadcastMessageHb.csを作成し、以下のコードをコピーします。（SignalRとASP.NET MVCについてもっと知りたいなら、リンクを読んでください。http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr-and-mvc ）：

<span style="font-size:14px;">using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;

namespace JobTracker
{

  [HubName("chat")]
  public class MultiUserHub : Hub
   {

     public void SendMessage(string message)
      {
        Clients.All.newMessage(message);
      }
  }
}</span>

4-Startp.csクラスを作成し、以下のコードをコピーします。

<span style="font-size:14px;">using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(JobTracker.Startup))]
namespace JobTracker
 {
   public class Startup
    {
      public void Configuration(IAppBuilder app)
       {
        app.MapSignalR();
       }
    } 
 }</span>

5-サーバーのエンドコードと配置が完了しました。今はユーザー端末を構築し、二つのJSファイルを作成します。ap.jsとmanCtrl.js。自分の好みによって、この二つのjsファイルを自由に命名してもいいです。ap.jsはAnglarコンポーネント定義とサーバと通信する関数を持っています。
アプリ.js

<span style="font-size:14px;">//toaster is added as dependency that will show message in attractive warning message box, to read

//more about toaster.js please follow link: <a href="http://codeseven.github.io/toastr/demo.html">http://codeseven.github.io/toastr/demo.html</a>

(function () {
    angular.module('app', ['toaster']);

$(function () {
  $.connection.hub.logging = true;
  $.connection.hub.start();
 });

$.connection.hub.error(function (err) {
  console.log('An error occurred: ' + err);
 });

 angular.module('app').value('chat', $.connection.chat);
})();</span>

メールCtrl.js

<span style="font-size:14px;">//$http service is used to get logged on user information from controller action, you can use $resource //service to get info through ASP.NET Web API.
//chat and toaster are dependencies defined in angular module to send message to all user and show
//it in toaster "warning" dialog box

"use strict";

angular.module('app').controller('mainCtrl', function ($scope, $http, chat, toaster) {
 $scope.messages = [];
 $http.get("GetLoginUserID").then(function (response) {
 $scope.LogonUserID = response.data;
});

$scope.sendMessage = function () {
 chat.server.sendMessage($scope.LogonUserID.data +' Just modified records, please refresh page to get latest!');
 $scope.newMessage = "";
};

chat.client.newMessage = function onNewMessage(message) {
 toaster.pop('warning', "Please read message!", message);

 $scope.messages.push({ message: message });

 $scope.$apply();

 console.log(message);
 };

});</span>

6-以上の二つのjsファイルの作成が完了したら、「メッセージ放送機能」を使う必要があるなら、ASP.NETページまたはMVC viewで以下のjsファイルを引用することを確認してください。

 jquery.singalR-x.x.js

for dynamically generation scripts，you can check generant script through developer tool.

angglar.js

toaster.js

app.js

manCtrl.js

7-あなたはtoaster containerに以下のコードを追加する必要があります。メッセージボックスのtimeoutパラメータを設定します。パラメータの単位はミリ秒です。

<span style="font-size:14px;"><toaster-container toaster-options="{'time-out': 5000}"></toaster-container></span>

8-最後のステップは、メッセージイベントを必要なコントロールに結びつけることであり、それをサブボタンに結び付け、メッセージを送信する方法sendMessage()は、manCtrl.jsに定義されている。

<span style="font-size:14px;"><input id="btnSave" ng-click="sendMessage()" type="submit" value="Save" /></span>

9-最後の効果は以下の通りです。
「If there are two users UserA and UserB are on same edit screen、as son UserA will submit btnSave button、toaster warning dialog box」UserA just modified record、please fresh page to gelatest！"would be displayed on top right coner of screen on both UserA and UserB screens.The same functionly shound be working forn number of logged on on on users.
License
This artic、along with any assicated source code and files、is licensed under The Code Project Open License（CPOL）