使用SignalR實現WebSockets

Question

我想在我的ASP.NET MVC Web應用中使用websockets，但我無法實現，所以在這裏我試圖在最終用戶網頁上顯示每個數據庫更新任何需要刷新。

HTML：

<span id="nbAlertes"></span> 
<ul id="listeAlertes"></ul> 

使用Javascript/SignalR/jQuery的

<!--Reference the SignalR library. --> 
<script src="Scripts/jquery.signalR-2.0.2.min.js"></script> 
<!--Reference the autogenerated SignalR hub script. --> 
<script src="signalr/hubs"></script> 
<script> 
$(function() { 
     // Declare a proxy to reference the hub. 
     var alertes = $.connection.AlerteHub; 
     // Create a function that the hub can call to broadcast messages. 
     alertes.client.broadcastMessage = function (nbAlertes, listeAlertes) { 
      // Html encode display name and message. 
      var nbA = $('<div />').text(nbAlertes).html(); 
      var lstA = $('<div />').text(listeAlertes).html(); 
      // Add the message to the page. 
      $('#nbAlertes').text(nbA); 
      lstA.forEach(function(item) { 
       $('#listeAlerte').append(item.nomPoste); 
      }); 
     }; 
    }); 
</script> 

類AlerteHub：

public class AlerteHub : Hub 
    { 
     public void GetAll() 
     { 
      var nbAlertes = new CalculAlertesUtilitaire().compter(); 
      var listeAlertes = new CalculAlertesUtilitaire().lister(5); 

      // Call the broadcastMessage method to update clients. 
      Clients.All.broadcastMessage(nbAlertes, listeAlertes); 
     } 

MonitoringNDataContext _db = new MonitoringNDataContext(); 

public string compter() 
    { 
     var compte = _db.Alertes.ToList().Count(); 
     return (compte == 0) ? "" : compte.ToString(); 
    } 

    public ICollection<AlerteModel> lister(int nb) 
    { 
     return (ICollection<AlerteModel>)_db.Alertes.ToList().Take(nb).ToArray(); 
    } 
    } 

類啓動

public class Startup 
    { 
     public void Configuration(IAppBuilder app) 
     { 
      // Any connection or hub wire up and configuration should go here 
      app.MapSignalR(); 
     } 
    } 

我該如何使它工作？

Answer 1

如果你想使用SignalR，你需要在客戶端建立連接。在JavaScript中，你可以通過調用connection.start（）來完成。例如：

<!--Reference the SignalR library. --> 
<script src="/Scripts/jquery.signalR-2.0.2.min.js"></script> 
<!--Reference the autogenerated SignalR hub script. --> 
<script src="/signalr/hubs"></script> 
<script> 
$(function() { 
     // Declare a proxy to reference the hub. 
     var alertes = $.connection.alerteHub; 
     // Create a function that the hub can call to broadcast messages. 
     alertes.client.broadcastMessage = function (nbAlertes, listeAlertes) { 
      // Html encode display name and message. 
      var nbA = $('<div />').text(nbAlertes).html(); 
      var lstA = $('<div />').text(listeAlertes).html(); 
      // Add the message to the page. 
      $('#nbAlertes').text(nbA); 
      lstA.forEach(function(item) { 
       $('#listeAlerte').append(item.nomPoste); 
      }); 
     }; 

     $.connection.hub.start().done(function() { 
      // You should probably be calling GetAll from somewhere. 
      // I'm not sure if you should call it as soon as you connect, 
      // but you certainly can't call GetAll before connecting. 
      alertes.server.getAll(); 
     }).fail(function (error) { 
      alert("Failed to connect!"); 
     }); 
    }); 
</script> 

您可以瞭解更多有關如何使用Signalr JS客戶在這裏：http://www.asp.net/signalr/overview/signalr-20/hubs-api/hubs-api-guide-javascript-client