【问题标题】:Track web application usage patterns using SignalR使用 SignalR 跟踪 Web 应用程序使用模式
【发布时间】:2013-10-27 04:29:38
【问题描述】:

我们在服务器上使用 ASP.Net 并在客户端使用 AngularJS 创建了一个 Web 应用程序。这里的要求之一是跟踪 Web 应用程序中各个部分的使用情况。

这些统计数据将要求我们在用户使用应用程序时记录用户活动。我正在考虑使用 SignalR 将此类活动数据发送到服务器。我们会频繁地向服务器发出请求以记录活动数据(即发即弃模型)。

我的问题是,它是使用 SignalR 的好用例吗?由于它既不涉及双向通信,也不为连接的客户端实时更新数据。

还有一些我们可以利用的东西来构建这样的解决方案。

【问题讨论】:

  • 由于客户端>仅服务器我看不到使用 SignalR over Web Api 的理由。如果传输是 Websockets,它的占用空间可能会更小,而且您已经打开了连接,因此您可以更快地将新事件流式传输到服务器,并且使用的资源更少

标签: c# asp.net asp.net-mvc logging signalr


【解决方案1】:

我认为您最好的选择可能是在 angularJS 中创建一个 httpInterceptor 并跟踪您想要的任何内容(或您手头的信息),您可以在客户端中创建一个服务来连接并将信息发送到您的日志服务以异步方式在您的服务器中。

$provide.factory('loggerHttpInterceptor', function($q, logService) {
  return {
    'request': function(config) {
      var deferred = $q.defer();
      deferred.resolve(function(){
          logService.send('someuser','some action',config.url,'other info');
      });

  return {config: $q.when(config), logger: deferred.promise};
 //Other code for errors / response...etc

});

$httpProvider.interceptors.push('loggerHttpInterceptor');

编辑:

如果您想使用 signalR,您应该使用集线器,它们更容易实现,例如,我的解决方案中只有一个名为 signalR 的单独文件夹,其中包含集线器和一个 hubActivator 文件(我更喜欢该解决方案signalR dependencyResolver) 来解决我的依赖关系。

在这种情况下,您可以创建类似:

public class TrackerService : Hub
 {
    private readonly ICacheClient _cacheClient;
    private readonly ILogger_logger;
    public TrackerService(ILogger logger,ICacheClient cacheClient){
        _logger logger;
        _cacheClient = cacheClient; 

    }
    public override Task OnConnected(){
        var session = _cacheClient.SessionAs<IAuthSession>();
        //Get the current user, insert into a conected users list (that´s not 100% mandatory)
    }
    public override Task OnDisconnected(){
       //Delete the user from the list
    }

    public void EventTracker(PageInfo pageInfo){
    }

 }

选择由服务堆栈提供的记录器 OOB 或创建您自己的跟踪器,这取决于您,通常您需要覆盖集线器中的两种方法:OnConnected 和 OnDisconnected 值得一提的是,一个用户可以拥有多个一个连接(浏览器或多个设备中的多个选项卡)通常您可以使用存储在静态变量或缓存中的用户列表(我更喜欢 SS 缓存,目前我正在使用 InMemoryCache),那么您将需要创建方法来跟踪用户信息并将您需要的信息放入该对象。

在客户端,您需要为您的视图中的 signalR 添加一个 jquery 文件 (jquery-signalR-version.js),该文件为集线器创建动态客户端方法,最后您需要在 angularJs 中为 signalR 客户端创建一个包装器。

factory('signalRHubProxy', ['$rootScope', 'signalRServer',
    function($rootScope, signalRServer) {

        function signalRHubProxyFactory(serverUrl, hubName) {
            var connection = $.hubConnection(signalRServer);
            var proxy = connection.createHubProxy(hubName);


            return {
                on: function(eventName, callback) {
                    proxy.on(eventName, function(result) {
                        $rootScope.$apply(function() {

                            if (callback) {
                                callback(result);
                            }
                        });
                    });
                },
                off: function(eventName, callback) {
                    proxy.off(eventName, function(result) {
                        $rootScope.$apply(function() {
                            if (callback) {
                                callback(result);
                            }
                        });
                    });
                },
                invoke: function(methodName, params, callback) {
                    proxy.invoke(methodName, params)
                        .done(function(result) {
                            $rootScope.$apply(function() {
                                if (callback) {
                                    callback(result);
                                }
                            });
                        });
                },
                start: function() {
                    connection.start().done(function() {
                        console.log("Connected, transport = " + connection.transport.name);
                    });
                },
                connection: connection
            };
        }


        return signalRHubProxyFactory;
    }])

然后您可以在控制器中使用代理:

function trackActivityCtrl($scope, $resource, signalRHubProxy) {
    var hubProxy, pageInfo;
    pageInfo.something = $scope.InfoToTrack
    hubProxy.on("EventTracker", function (pageInfo) {
        //logic to track the activity
    });
    hubProxy.start();
}

希望对你有帮助

【讨论】:

  • 我的问题不是关于如何从角度做到这一点。此外,它不仅与 http 请求有关,还与其他用法有关
  • 感谢@Pedro,这在我开始时很有用。
猜你喜欢
  • 2012-02-15
  • 2011-05-06
  • 2013-04-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-02-14
  • 1970-01-01
相关资源
最近更新 更多