Fatal编程技术网
  • javascript/
  • Javascript 检查离子应用程序的网络状态

Javascript 检查离子应用程序的网络状态

javascript angularjs ionic-framework

Javascript 检查离子应用程序的网络状态,javascript,angularjs,ionic-framework,Javascript,Angularjs,Ionic Framework,我编写了以下服务，试图检查应用程序的连接，就像在我的Ionic应用程序中一样，我需要根据用户是离线还是在线执行某些操作。目前我遇到3个问题 1） 在我的桌面上，当在浏览器中进行测试时，我总是会收到一条您未连接消息，即使我的wifi不工作。如何让它在我的桌面上显示正确的消息 2） 在我的手机上，我已经测试过这个功能，是的，它在最初加载时可以正常工作，并正确设置连接状态，但如果我打开/关闭wifi连接，它不会立即刷新，并且需要一些时间。如何让它在我的移动应用程序上“实时”更新 connection.

我编写了以下服务，试图检查应用程序的连接，就像在我的Ionic应用程序中一样，我需要根据用户是离线还是在线执行某些操作。目前我遇到3个问题

1） 在我的桌面上，当在浏览器中进行测试时，我总是会收到一条
您未连接
消息，即使我的wifi不工作。如何让它在我的桌面上显示正确的消息

2） 在我的手机上，我已经测试过这个功能，是的，它在最初加载时可以正常工作，并正确设置连接状态，但如果我打开/关闭wifi连接，它不会立即刷新，并且需要一些时间。如何让它在我的移动应用程序上“实时”更新

connection.service.js

(function() {
    'use strict';

    angular
    .module('dingocv.services')
    .service('ConnectionService', ConnectionService)


    function ConnectionService($rootScope, $cordovaNetwork) {

    this.isOnline = function() {
      if(ionic.Platform.isWebView()) {
        return $cordovaNetwork.isOnline();
      } else {
        return navigator.OnLine;
      }
    }

    this.isOffline = function() {
      if(ionic.Platform.isWebView()) {
        return !$cordovaNetwork.isOnline();
      } else {
        return !navigator.OnLine;
      }
    }

    this.startWatching = function() {
      if(ionic.Platform.isWebView()) {
        $rootScope.$on('$cordovaNetwork:online', function(event, networkState) {
          console.log('went online');
        });
        $rootScope.$on('$cordovaNetwork:offline', function(event, networkState) {
          console.log('went offline');
        });
      } else {
        window.addEventListener('online', function(e) {
          console.log('went online');
        }, false);
        window.addEventListener('offline', function(e) {
          console.log('went offline');
        }, false);
      }
    }
    }

})();

(function() {
    'use strict';

    angular
    .module('dingocv.controllers')
    .controller('SearchController', SearchController)


    function SearchController($scope, CategoryService, ConnectionService) {

        if(ConnectionService.isOnline()){
            $scope.connected = true;
        } else {
            $scope.connected = false;
        }

        CategoryService.getCategoryList().then(function(dataResponse) {
            $scope.categories = dataResponse.data;
        });
    }

})();

var app = angular.module('starter', ['ionic', 'ionic-material', 'starter.controllers', 'starter.service', 'ngCordova']);

app.run(function($ionicPlatform, $ionicPopup, $timeout) {
    $ionicPlatform.ready(function() {
        if(window.Connection) {
            if(navigator.connection.type == Connection.NONE) {
                $ionicPopup.confirm({
                    title: "Internet Disconnected on your device",
                    content: "App requires Network Connection..."
                })
                .then(function(result) {
                    if(!result) {
                        ionic.Platform.exitApp();
                    }
                });
            }
        }
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }   
    });
    var backButton =0;
    $ionicPlatform.registerBackButtonAction(function(){
        if(backButton == 0){
            backButton++;
            $timeout(function(){
                backButton = 0;
            },2000);
        }else{
            navigator.app.exitApp();
        }
    },100);
    window.addEventListener("online", function(e){  },false);
    window.addEventListener("offline", function(e){
        console.log(e);
        $ionicPopup.alert({
            title: "Message",
            template: "There is no internet connection"
        });
    },false);
});
search.controller.js

(function() {
    'use strict';

    angular
    .module('dingocv.services')
    .service('ConnectionService', ConnectionService)


    function ConnectionService($rootScope, $cordovaNetwork) {

    this.isOnline = function() {
      if(ionic.Platform.isWebView()) {
        return $cordovaNetwork.isOnline();
      } else {
        return navigator.OnLine;
      }
    }

    this.isOffline = function() {
      if(ionic.Platform.isWebView()) {
        return !$cordovaNetwork.isOnline();
      } else {
        return !navigator.OnLine;
      }
    }

    this.startWatching = function() {
      if(ionic.Platform.isWebView()) {
        $rootScope.$on('$cordovaNetwork:online', function(event, networkState) {
          console.log('went online');
        });
        $rootScope.$on('$cordovaNetwork:offline', function(event, networkState) {
          console.log('went offline');
        });
      } else {
        window.addEventListener('online', function(e) {
          console.log('went online');
        }, false);
        window.addEventListener('offline', function(e) {
          console.log('went offline');
        }, false);
      }
    }
    }

})();

(function() {
    'use strict';

    angular
    .module('dingocv.controllers')
    .controller('SearchController', SearchController)


    function SearchController($scope, CategoryService, ConnectionService) {

        if(ConnectionService.isOnline()){
            $scope.connected = true;
        } else {
            $scope.connected = false;
        }

        CategoryService.getCategoryList().then(function(dataResponse) {
            $scope.categories = dataResponse.data;
        });
    }

})();

var app = angular.module('starter', ['ionic', 'ionic-material', 'starter.controllers', 'starter.service', 'ngCordova']);

app.run(function($ionicPlatform, $ionicPopup, $timeout) {
    $ionicPlatform.ready(function() {
        if(window.Connection) {
            if(navigator.connection.type == Connection.NONE) {
                $ionicPopup.confirm({
                    title: "Internet Disconnected on your device",
                    content: "App requires Network Connection..."
                })
                .then(function(result) {
                    if(!result) {
                        ionic.Platform.exitApp();
                    }
                });
            }
        }
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }   
    });
    var backButton =0;
    $ionicPlatform.registerBackButtonAction(function(){
        if(backButton == 0){
            backButton++;
            $timeout(function(){
                backButton = 0;
            },2000);
        }else{
            navigator.app.exitApp();
        }
    },100);
    window.addEventListener("online", function(e){  },false);
    window.addEventListener("offline", function(e){
        console.log(e);
        $ionicPopup.alert({
            title: "Message",
            template: "There is no internet connection"
        });
    },false);
});
search.view.html

<ion-view view-title="Search">
    <ion-content>
    <div ng-show="!connected">
        You are not connected
    </div>
    <div ng-show="connected">
        You are connected
    </div>
    </ion-content>
</ion-view>


您没有连接
你已经接通了
您可以实现以下代码：

在你的app.js中

(function() {
    'use strict';

    angular
    .module('dingocv.services')
    .service('ConnectionService', ConnectionService)


    function ConnectionService($rootScope, $cordovaNetwork) {

    this.isOnline = function() {
      if(ionic.Platform.isWebView()) {
        return $cordovaNetwork.isOnline();
      } else {
        return navigator.OnLine;
      }
    }

    this.isOffline = function() {
      if(ionic.Platform.isWebView()) {
        return !$cordovaNetwork.isOnline();
      } else {
        return !navigator.OnLine;
      }
    }

    this.startWatching = function() {
      if(ionic.Platform.isWebView()) {
        $rootScope.$on('$cordovaNetwork:online', function(event, networkState) {
          console.log('went online');
        });
        $rootScope.$on('$cordovaNetwork:offline', function(event, networkState) {
          console.log('went offline');
        });
      } else {
        window.addEventListener('online', function(e) {
          console.log('went online');
        }, false);
        window.addEventListener('offline', function(e) {
          console.log('went offline');
        }, false);
      }
    }
    }

})();

(function() {
    'use strict';

    angular
    .module('dingocv.controllers')
    .controller('SearchController', SearchController)


    function SearchController($scope, CategoryService, ConnectionService) {

        if(ConnectionService.isOnline()){
            $scope.connected = true;
        } else {
            $scope.connected = false;
        }

        CategoryService.getCategoryList().then(function(dataResponse) {
            $scope.categories = dataResponse.data;
        });
    }

})();

var app = angular.module('starter', ['ionic', 'ionic-material', 'starter.controllers', 'starter.service', 'ngCordova']);

app.run(function($ionicPlatform, $ionicPopup, $timeout) {
    $ionicPlatform.ready(function() {
        if(window.Connection) {
            if(navigator.connection.type == Connection.NONE) {
                $ionicPopup.confirm({
                    title: "Internet Disconnected on your device",
                    content: "App requires Network Connection..."
                })
                .then(function(result) {
                    if(!result) {
                        ionic.Platform.exitApp();
                    }
                });
            }
        }
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }   
    });
    var backButton =0;
    $ionicPlatform.registerBackButtonAction(function(){
        if(backButton == 0){
            backButton++;
            $timeout(function(){
                backButton = 0;
            },2000);
        }else{
            navigator.app.exitApp();
        }
    },100);
    window.addEventListener("online", function(e){  },false);
    window.addEventListener("offline", function(e){
        console.log(e);
        $ionicPopup.alert({
            title: "Message",
            template: "There is no internet connection"
        });
    },false);
});
您可以实现以下代码：

在你的app.js中

(function() {
    'use strict';

    angular
    .module('dingocv.services')
    .service('ConnectionService', ConnectionService)


    function ConnectionService($rootScope, $cordovaNetwork) {

    this.isOnline = function() {
      if(ionic.Platform.isWebView()) {
        return $cordovaNetwork.isOnline();
      } else {
        return navigator.OnLine;
      }
    }

    this.isOffline = function() {
      if(ionic.Platform.isWebView()) {
        return !$cordovaNetwork.isOnline();
      } else {
        return !navigator.OnLine;
      }
    }

    this.startWatching = function() {
      if(ionic.Platform.isWebView()) {
        $rootScope.$on('$cordovaNetwork:online', function(event, networkState) {
          console.log('went online');
        });
        $rootScope.$on('$cordovaNetwork:offline', function(event, networkState) {
          console.log('went offline');
        });
      } else {
        window.addEventListener('online', function(e) {
          console.log('went online');
        }, false);
        window.addEventListener('offline', function(e) {
          console.log('went offline');
        }, false);
      }
    }
    }

})();

(function() {
    'use strict';

    angular
    .module('dingocv.controllers')
    .controller('SearchController', SearchController)


    function SearchController($scope, CategoryService, ConnectionService) {

        if(ConnectionService.isOnline()){
            $scope.connected = true;
        } else {
            $scope.connected = false;
        }

        CategoryService.getCategoryList().then(function(dataResponse) {
            $scope.categories = dataResponse.data;
        });
    }

})();

var app = angular.module('starter', ['ionic', 'ionic-material', 'starter.controllers', 'starter.service', 'ngCordova']);

app.run(function($ionicPlatform, $ionicPopup, $timeout) {
    $ionicPlatform.ready(function() {
        if(window.Connection) {
            if(navigator.connection.type == Connection.NONE) {
                $ionicPopup.confirm({
                    title: "Internet Disconnected on your device",
                    content: "App requires Network Connection..."
                })
                .then(function(result) {
                    if(!result) {
                        ionic.Platform.exitApp();
                    }
                });
            }
        }
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }   
    });
    var backButton =0;
    $ionicPlatform.registerBackButtonAction(function(){
        if(backButton == 0){
            backButton++;
            $timeout(function(){
                backButton = 0;
            },2000);
        }else{
            navigator.app.exitApp();
        }
    },100);
    window.addEventListener("online", function(e){  },false);
    window.addEventListener("offline", function(e){
        console.log(e);
        $ionicPopup.alert({
            title: "Message",
            template: "There is no internet connection"
        });
    },false);
});