棱角分明的WebSocket工厂 [英] angular websocket factory

问题描述

我有WebSocket的业务加载页面时的伟大工程。但是，如果连接丢失，并且该服务尝试重新连接，我得到一个错误：未捕获的Ref​​erenceError：服务没有定义。有一次，我手动刷新页面，服务将再次合作。我怎么能不重新清爽页面？应用程序必须重新建立无需任何用户参与该连接。这是我的第一个角的应用程序，所以我仍然在学习框架的过程。谢谢。

  angular.module（'proApp'）。工厂（'webSocketService'，
    ['$ Q'，'$ rootScope'，函数（$ Q $ rootScope）{            VAR超时= 2000;
            变种clearTimer = -1;
            VAR端口='8081';
            VAR服务器=127.0.0.1;
            VAR插座;
            VAR主机;
            变种服务= {};            功能getSocketState（）{
                返回（插座！= NULL）？ socket.readyState：0;
            }            函数的onMessage（五）{
                //console.log(e.data）;
                Service.message = JSON.parse（e.data）;                $ rootScope。$应用（函数（）{
                    Service.send（）;
                }）;
            }
            //允许数据在控制器中使用
            Service.send =功能（）{
                $ rootScope $广播（'广播'）。
            };
            功能的onError（）{
                clearInterval（clearTimer）;
                socket.onclose =功能（）{
                };
                clearTimer =的setInterval（Service.getData（），超时）;
            }            功能的OnClose（）{
                clearInterval（clearTimer）;
                clearTimer =的setInterval（Service.getData（），超时）;            }            起作用的OnOpen（）{
                clearInterval（clearTimer）;
                的console.log（开放+ getSocketState（））;
            }            Service.getData =功能（）{                如果（的WebSocket在窗口）{
                    如果（getSocketState（）=== 1）{
                        socket.onopen =的OnOpen;
                        clearInterval（clearTimer）;
                        的console.log（getSocketState（））;
                    }其他{
                        尝试{
                            主机=WS：//+服务器+：+端口+'';
                            插座=新的WebSocket（主机）;
                            socket.onopen =的OnOpen;
                            socket.onmessage =功能（E）{
                                的onMessage（E）;
                            };
                            socket.onerror = onError的;
                            socket.onclose =的OnClose;
                        }赶上（exeption）{
                            的console.log（exeption）;
                        }
                    }
                }
            };
            //此处的公共API
            退换货服务;        }]）;
 

解决方案

您必须更改使用的setInterval 是这样的：

  clearTimer =的setInterval（函数（）{
  Service.getData（）;
}， 时间到）;
 

或只是这样的：

  clearTimer =的setInterval（Service.getData，超时）;
 

I have websocket service that works great when page is loaded. However, if connection is lost, and the service is trying to reconnect I am getting an error: "Uncaught ReferenceError: Service is not defined". Once I manually refresh page, service is working again. How can I reconnect without page refreshing? The app must reestablish that connection without any user involvement. This is my first angular app, so I am still in the process of learning the framework. Thank you.

angular.module('proApp').factory('webSocketService',
    ['$q', '$rootScope', function($q, $rootScope) {

            var timeout = 2000;
            var clearTimer = -1;
            var port = '8081';
            var server = '127.0.0.1';
            var socket;
            var host;
            var Service = {};

            function getSocketState() {
                return (socket != null) ? socket.readyState : 0;
            }

            function onMessage(e) {
                //console.log(e.data);
                Service.message = JSON.parse(e.data);

                $rootScope.$apply(function() {
                    Service.send();
                });
            }
            //allows data to be used in controller
            Service.send = function() {
                $rootScope.$broadcast('broadcast');
            };
            function onError() {
                clearInterval(clearTimer);
                socket.onclose = function() {
                };
                clearTimer = setInterval("Service.getData()", timeout);
            }

            function onClose() {
                clearInterval(clearTimer);
                clearTimer = setInterval("Service.getData()", timeout);

            }

            function onOpen() {
                clearInterval(clearTimer);
                console.log("open" + getSocketState());
            }

            Service.getData = function() {

                if ("WebSocket" in window) {
                    if (getSocketState() === 1) {
                        socket.onopen = onOpen;
                        clearInterval(clearTimer);
                        console.log(getSocketState());
                    } else {
                        try {
                            host = "ws://" + server + ":" + port + '';
                            socket = new WebSocket(host);
                            socket.onopen = onOpen;
                            socket.onmessage = function(e) {
                                onMessage(e);
                            };
                            socket.onerror = onError;
                            socket.onclose = onClose;
                        } catch (exeption) {
                            console.log(exeption);
                        }
                    }
                }
            };
            // Public API here
            return Service;

        }]);

解决方案

You have to change the use of setInterval to be like this:

clearTimer = setInterval(function () {
  Service.getData();
}, timeout);

or just this:

clearTimer = setInterval(Service.getData, timeout);

这篇关于棱角分明的WebSocket工厂的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！