AngularJS是一个开源的前端MVC框架,有Google进行维护,可以说是现在最火的前端框架,没有之一,而紧随其后的有EmberJs,Backbone,React等。而React也算是最近的一个大热门,有Facebook产出,之后有时间也会去了解一下。

为什么使用AngularJs

前端框架有前端框架的好处,从我自身使用的一个小项目出发,说一下AngularJs的优点吧,

  • html为其自带的模板,并不像其他可能会用ejs,jade等其他模板作为标配。Angualr本身就以html为模板。
  • Angular双向绑定功能,可以很简单的实现数据更新,获取
  • Angular可以大大节约开发时间,适合单兵作战

更多内容大家可以点击Angular.key 以及AngularJS理论与实战.ppt 前者是我之前做的一个用于技术分享的keynote,里面还有一个文件上传的例子。后者是InfoQ的大神写的。两者不可同日而语,之所以把我的keynote也放在上面仅仅是想证明存在感 :).

何为安全路由

写服务器端的同学可能会更多的了解,一些API是有权限设置的,普通用户不能访问管理员用户API,未登录用户不能访问登陆用户的API。这在后端是很常见的,但是对于Angular这种单页面APP来说这也是很重要的。因为先跳转到页面判断有没有权限,再跳回来说没有权限,用户体验是很差的,所以我们需要在前端就进行处理。

Angular实现准备知识点

在Angular实现的过程中我们会用到的知识点

Run方法


上面是官方文档的解释,当每次加载注入的module的时候都会先运行run里面的代码,这也是我们要实现的关键点之一

$cookieStore

$cookieStore我们用来保存cookie的一个全局变量,也是Angular自带方法之一,用来全局保存一些cookie token等信息

factory方法

这是Angular自带的方法之一,使用此方法可以构建全局的Service

controller方法

MVC中的C用于每个页面的数据控制

具体实现代码

1、首先我们要做的就是一个写一个单例的Service。用于保存用户资料,以及用户的一系列数据操作

1
angular.module('publicApp')
  .factory('Auth', function Auth($location, $rootScope, $http, User, $cookieStore, $q) {
    var currentUser = {};
    if($cookieStore.get('token')) {
      currentUser = User.get();
    }
    return {
      /**
       * Authenticate user and save token
       *
       * @param  {Object}   user     - login info
       * @param  {Function} callback - optional
       * @return {Promise}
       */
      login: function(user, callback) {
        var cb = callback || angular.noop;
        var deferred = $q.defer();
        $http.post('/users/login', {
          username: user.name,
          password: user.pswd
        }).
          success(function(data) {
            console.log(data);
            $cookieStore.put('token', data.token);
            currentUser = User.get();
            deferred.resolve(data);
            return cb(undefined, data);
          }).
          error(function(err) {
            this.logout();
            deferred.reject(err);
            return cb(err);
          }.bind(this));

        return deferred.promise;
      },

      /**
       * Delete access token and user info
       *
       * @param  {Function}
       */
      logout: function() {
        $cookieStore.remove('token');
        currentUser = {};
      },

      /**
       * Create a new user
       *
       * @param  {Object}   user     - user info
       * @param  {Function} callback - optional
       * @return {Promise}
       */
      createUser: function(user, callback) {
        var cb = callback || angular.noop;

        return User.save(user,
          function(data) {
            $cookieStore.put('token', data.token);
            currentUser = User.get();
            return cb(user);
          },
          function(err) {
            this.logout();
            return cb(err);
          }.bind(this)).$promise;
      },

      /**
       * Change password
       *
       * @param  {String}   oldPassword
       * @param  {String}   newPassword
       * @param  {Function} callback    - optional
       * @return {Promise}
       */
      changePassword: function(oldPassword, newPassword, callback) {
        var cb = callback || angular.noop;

        return User.changePassword({ id: currentUser._id }, {
          oldPassword: oldPassword,
          newPassword: newPassword
        }, function(user) {
          return cb(user);
        }, function(err) {
          return cb(err);
        }).$promise;
      },

      /**
       * Gets all available info on authenticated user
       *
       * @return {Object} user
       */
      getCurrentUser: function() {
        return currentUser;
      },

      /**
       * Check if a user is logged in
       *
       * @return {Boolean}
       */
      isLoggedIn: function() {
        return currentUser.hasOwnProperty('role');
      },

      /**
       * Waits for currentUser to resolve before checking if user is logged in
       */
      isLoggedInAsync: function(cb) {
        if(currentUser.hasOwnProperty('$promise')) {
          currentUser.$promise.then(function() {
            cb(true);
          }).catch(function() {
            cb(false);
          });
        } else if(currentUser.hasOwnProperty('role')) {
          cb(true);
        } else {
          cb(false);
        }
      },

      /**
       * Check if a user is an admin
       *
       * @return {Boolean}
       */
      isAdmin: function() {
        return currentUser.role === 'admin';
      },

      /**
       * Get auth token
       */
      getToken: function() {
        return $cookieStore.get('token');
      }
    };
  });

上面的代码中我们创建了一个全局的Service Auth 实现了获取信息,信息报错,获取token,判断是否
登录等一系列方法接下来我们主要用的是loginisLoggedInAsync方法

1
angular.module('publicApp')
  .factory('User', function ($resource) {
    return $resource('/:id/:controller', {
        id: '@_id'
      },
      {
        changePassword: {
          method: 'PUT',
          params: {
            controller:'password'
          }
        },
        get: {
          method: 'GET',
          params: {
            id:'me'
          }
        }
      });
  });

user Service

2、route中在需要校验的route中加校验字段

1
angular.module('publicApp').config(['$routeProvider', function ($routerProvider) {
  $routerProvider.when('/',{
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  })
    .when('/setting',{templateUrl:'views/setting.html', controller: 'settingCtl',authenticate: true})
    .when('/register',{templateUrl:'views/register.html', controller: 'loginCtl'});
}]);

请注意setting的中authenticate字段,表示这个路由需要校验

3、配置Run方法

1
angular
.module('publicApp', [
  'ngAnimate',
  'ngSanitize',
  'ngTouch',
  'ngRoute',
  'ngResource',
  'ngCookies'
]).run(function ($rootScope, $location, Auth) {
  // Redirect to login if route requires auth and you're not logged in
  $rootScope.$on('$routeChangeStart', function (event, next) {
    Auth.isLoggedInAsync(function(loggedIn) {
      if (next.authenticate && !loggedIn) {
        $location.path('/');
      }
    });
  });
});

$rootScope.$on('$routeChangeStart', function (event, next) {})这个方法就是指当有路由切换的时候,会触发下面的方法,当next.authenticate并且 没有login的话就跳转到指定的页面。经过上面几步我们就实现了了简单的安全路由了.

PS

参考generator-angular-fullstack

注释和共享

最近做了个即时通讯的小项目也在这期间接触到了MQTT这个东西,如果你能搜到这篇博客,说明你对MQTT起码有大致了解的,就不在这进行介绍了。今天我们要讲的是MQTT的一个node.js实现—–Mosca,由于本身对MQTT规范了解也不深,在这里就主要以代码为主。

什么是Mosca

Mosca是MQTT在Node.js中的一个Broker的开源实现,通俗讲也就是MQTT中的Server实现。
同时作者也维护着MQTT.js这一模块,这一模块大家可理解为MQTT的Client实现。而纵观整个Node.js的module中比较有分量的也就以上两个module.

如何实现即时聊天功能

没有调研过其他的聊天软件是怎么实现一对一推送的,下面简单介绍下MQTT是怎么实现的。MQTT是简单的发布订阅模式,也就是说当一条消息发出去的时候,谁订阅了谁就会受到,而应用于即时通讯的话,我们就需要进行1对1的进行聊天,这时候我们就需要,每个客户端订阅自己的一个专属channel,然后由Broker来进行推送(Broker做的话,可以实现消息过滤,离线消息等)。

在这过程中也遇到了一些问题,比如对于即时通讯来说,客户端应该以什么作为自己的专属channel,在我接手这个项目之前他们订阅的是设备号,这样其实有很多问题,无法实现多设备同时在线。每次用户换设备登陆,服务器端都需要将相应的离线消息进行转移,耗时耗力而且一些需求无法满足,所以我觉得客户端订阅应该以用户的唯一ID为channel,这样就实现了客户端多设备在线,以及离线消息等功能。

如何实现离线消息功能

这里所说的离线消息是指,当设备离线Mqtt断开了之后,这时候向用户推送的数据,会在用户下次上线的时候推给用户。

这个地方客户端有两个关键点:

  • 客户端cleanSession需要设置为false.则该链接便会认为是持久连接,当链接断开的时候,发送的消息便会进行报错,直到下次链接再次建立,会将这些消息发送给客户端
  • Qos标志,在Mqtt标准钟,对Qos有3种设置,在这里我们需要将Qos设置为1。更多Qos介绍,请点击

上面所说的两个关键是是客户端需要设置的。在在这里我们用到的Mosca也有需要注意的地方便是发布订阅的模型选择。详情点击ascoltatori。这一模块是构建Mosca的核心模块之一。

我之前一同事进行过测试,当采用redis,mongodb作为发布订阅模型的话会出现离线消息数据错乱的情况,经过多次测试之后,我发现ZeroMQ,和RabbitMQ这种消息队列的离线数据是完全按照发送的顺序,离线发送。

示例代码

在这里我们将演示一下离线消息发送,在这里我们采用的是zeroMQ最为订阅发布模型

Client pub

1
var mqtt = require('mqtt');

var client = mqtt.createClient(5112, '182.92.149.22');

//client.subscribe('presence');
var num = 0;
setInterval(function (){
  client.publish('order', 'Hello mqtt ' + (num++),{qos:1, retain: true});
}, 1000);

Client Sub

1
var mqtt = require('mqtt');

var client = mqtt.createClient(5112, 'localhost',{clientId:'1',clean:false});

client.subscribe('test',{qos:1});

client.on('message', function (topic, message) {
  console.log(message);
});

Mosca Server

1
var mosca = require('mosca')
var settings = {
  port: 5112,
  backend:{
  	 type: 'zmq',
      json: false,
      zmq: require("zmq"),  
      port: "tcp://127.0.0.1:33333",
      controlPort: "tcp://127.0.0.1:33334",
      delay: 5
  },
  persistence:{
  	factory: mosca.persistence.Mongo,
    url: "mongodb://localhost:27017/mosca"
  }
};
var server = new mosca.Server(settings);
server.on('ready', function(){
	console.log('Mosca server is up and running');	
});
server.on('published', function(packet, client) {
  console.log('Published', packet.payload);
});

在上面我们看到我们使用zeromq作为发布订阅模型, mongodb作为持久化Db,你可以先将Mosca server以及 Client pub启动,过一段时间你再启动Client sub。这时候你会发现,收到的消息会是从1开始的,,

注释和共享

  • 第 1 页 共 1 页

yuansc

生命不息,奋斗不止


改变世界