Question

我正在尝试将websockets用于我的ASP.NET MVC web-app但我无法实现，所以在这里我试图在最终用户网页上显示每个数据库更新而无需刷新

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

使用SignalR实现WebSockets

1 个答案: