当前位置: 首页 > 面试题库 >

改进此AngularJS工厂以与socket.io一起使用

闻人英韶
2023-03-14
问题内容

我想在AngularJS中使用socket.io。我找到了以下工厂:

app.factory('socket', function ($rootScope) {
    var socket = io.connect();
    return {
        on: function (eventName, callback) {
            socket.on(eventName, function () {
                var args = arguments;
                $rootScope.$apply(function () {
                    callback.apply(socket, args);
                });
            });
        },
        emit: function (eventName, data, callback) {
            socket.emit(eventName, data, function () {
                var args = arguments;
                $rootScope.$apply(function () {
                    if (callback) {
                        callback.apply(socket, args);
                    }
                });
            })
        }
    };

它在控制器中的使用方式如下:

function MyCtrl($scope, socket) {
    socket.on('message', function(data) {
        ...
    });
};

问题是每次访问控制器时都会添加另一个侦听器,因此当收到一条消息时,将对其进行多次处理。

将socket.io与AngularJS集成的更好的策略是什么?

编辑:我知道我无法在工厂返回任何东西并在那里进行监听,然后在控制器中使用$ rootScope。$ broadcast和$ scope。$
on,但这看起来不是一个好的解决方案。

EDIT2:添加到工厂

init: function() {
            socket.removeAllListeners();
}

并在每个使用socket.io的控制器的开头调用它。

仍然感觉不是最好的解决方案。


问题答案:

销毁控制器时,请删除套接字侦听器。您将需要$destroy像这样绑定事件:

function MyCtrl($scope, socket) {
    socket.on('message', function(data) {
        ...
    });

    $scope.$on('$destroy', function (event) {
        socket.removeAllListeners();
        // or something like
        // socket.removeListener(this);
    });
};

有关更多信息,请查看angularjs文档。



 类似资料:
  • 是否可以在AWS Lambda中构建一个函数来创建websocket并将数据发送到订阅的应用程序? 类似这样: John在他的手机中打开了应用程序SuperPhotoApp,但决定使用桌面浏览器将照片上传到SuperPhotoApp服务(S3 Bucket),此事件执行创建套接字的Lambda函数。io服务器并将更新推送到所有订户,他的手机打开了应用程序,因此应用程序会自动更新新照片。 这可以通过

  • 问题内容: 我有一个Flask网站,并且想使用AngularJS JavaScript框架。不幸的是,似乎分隔符重叠。 如果两个都依赖于双花括号(),如何将Angular与Jinja2配合使用?可能吗 问题答案: 您有一些选择。 1)更改Angular的定界符表示法: 无论选择什么作为开始和结束符号,都将充当新的分隔符。在这种情况下,您可以使用将变量表示为Angular 。 这种方法的优点是只需要

  • 问题内容: 我正在努力使用Karma + Jasmine测试AngularJS工厂。 我无法将工厂注入变量。 我究竟做错了什么? 注意:文件已正确加载 厂: 码: 输出: 问题答案: 您需要致电:

  • 问题内容: (我对RESTFul不熟悉,如果我的概念有误,请纠正我) 在RESTFul体系结构中,我们将每个操作映射到URL。如果我单击“发布文章”,可能实际上是URL 和一些数据。 如果我要发布而不是刷新整个网页,则可以使用javascript的XMLHTTPRequest。我发布它,然后获取它的内容,并将其插入到页面的div中。这些动作都是异步的。 然后我知道有一个名为的东西,它是包装器。它使

  • 问题内容: 因此,在普通的旧Angular中,您将像这样注入一个Factory: 现在使用Typescript,我试图这样使用: 使用Typescript在Angular中注入工厂的正确方法是什么? 问题答案: app.factory(’MyFactory’,Services.MyFactory)这不起作用,从不实例化。 真正。这是因为从未使用运算符调用作为第二个参数()传递的函数。如果要使用Ty

  • 我的网站流量通过Cloudflare激活了完整的通用SSL。 在apache虚拟主机中,我有以下配置: 我的Node.js服务器通过HTTPS: