使用SignalR实现WebSockets

Question

I'm trying to use websockets into my ASP.NET MVC web-app but I can't implement, so here I'm trying to display each database update on the end-user web-page without any need to refresh.

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>

class 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();
    }
    }

class Startup

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

How do I to make it work, please ?

Answer 1

If you want to use SignalR, you need to establish the connection on the client. In JavaScript you do this by calling connection.start(). For example:

<!--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>

You can learn more about how to use the Signalr JS client here: http://www.asp.net/signalr/overview/signalr-20/hubs-api/hubs-api-guide-javascript-client