Implementing WebSockets using SignalR

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 ?

When I update database, there is no update to the loaded web page. — Lucie kulza
– Lucie kulza, Commented Feb 11, 2014 at 19:18
@SLaks, I've updated my post taking into account the parameters. — Lucie kulza
– Lucie kulza, Commented Feb 11, 2014 at 19:31

halter73 · Accepted Answer · 2014-02-11 19:44:24Z

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

answered Feb 11, 2014 at 19:44

halter73

15.3k3 gold badges52 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

halter73 Over a year ago

Can you please provide more details about the way this "wouldn't work"?

Lucie kulza Over a year ago

refering to the debugger it says The script debugger failed to connect to the target process. A debugger is already attached.

halter73 Over a year ago

This is because Visual Studio will attach itself as the JavaScript debugger by default when you debug a web project. This will make you unable to use IE's F12 dev tools until VS detaches. Alternatively you can debug the JS in another browser like Chrome or FireFox.

Lucie kulza Over a year ago

Thanks for letting me know, I've tried to debug this using Chrome and I've got these errors : event.returnValue is deprecated. Please use the standard event.preventDefault() instead.,

Uncaught TypeError: Object [object Object],[object Object],[object Object],[object Object],[object Object] has no method 'forEach'

. I've inserted an additionnal line into the related database but there is no update in the web page's display.

Lucie kulza Over a year ago

I've edited your post and written into it the solution. Thanks for your help dude !!

|

Collectives™ on Stack Overflow

Implementing WebSockets using SignalR

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related