Rails Rails + AngulaJs + Pusher 实现浏览器实时刷新

luolinae86 · 2016年03月29日 · 2409 次阅读

需求背景描述

技术栈

鄙人所在公司,主要业务做眼底图象医学量化识别,技术栈包括:

  • Rails
  • sidekiq
  • redis
  • Mysql
  • AngularJs + jQuery
  • Matlab
业务系统
  • 业务系统,用Rails+AngularJs实现
  • 算法系统,用Matlab实现
业务流程
  1. 医院通过业务系统上传眼底图片,组件包括:
  2. 算法系统对图片进行预处理,生成医学所需要的量化处理结果(异步处理)
  3. 在业务系统中人工对量化不准确的进行手工修正
  4. 算法系统接收修改请求,并返回修改后结果(异步处理)
  5. 业务系统后台,通知前端浏览器主动刷新,并显示修正后的量化结果
浏览器数据刷新技术选型
  • Polling angularJs通过固定的时间片轮流向server发起http请求,加载最新的数据,缺点

    • 存在延时
    • 不断的http请求,消耗服务器系统资源
  • Pusher,浏览器在特定的通道上注册特定的事件,服务器在特定的通道上面触发特定事件, 从而完成server端到client端的实时通知,优点

    • 实时通知
    • 服务器端性能消耗少
代码展示
  • sever端

添加pusher gem

https://github.com/pusher/pusher-http-ruby

添加配置文件 config/initailizer/pusher.rb

require 'pusher'

Pusher.app_id = '***************'
Pusher.key = '*******************'
Pusher.secret = '*******************'
Pusher.logger = Rails.logger
Pusher.encrypted = true

触发事件通知

Pusher.trigger('channel_name', 'event_name', {
    message: 'hello world'
   })
  • client端

下载angular-pusher.min.js库

https://github.com/doowb/angular-pusher/blob/master/angular-pusher.min.js

注册事件

//注册pusher事件
var pusher = new Pusher('YOUR_APP_KEY');
var channel = pusher.subscribe('channel_name');
channel.bind("event_name", function(data) {
    //更新picUrl,从而主angularJs重新刷新图片
    $scope.picUrl += ('?decache=' + new Date().getTime());
});

问题及求助

目前业务系统和算法系统,是两个独立部署的系统,其中Matlab是编译成可执行文件的形式运行 业务系统通知算法系统,都是通过异步写文件的形式,Matlab从文件中读取指定,并执行相应的 算法,然后业务系统得自己检测结果文件,处理业务逻辑,并上传。

业务系统和算法系统,只能算得上单工通信,算法部分之前研究过用C++语言提供api接口给业务系统实现双工, 但该方式没有能够调试成功,论坛里面是否有人之前做过用Matlab提供REST API接口这方面的研究, 如果有的,请给出您宝贵的建议或者demo,谢谢

####参考文献

https://blog.pusher.com/making-angular-js-realtime-with-pusher/ https://pusher.com/tutorials/realtime-notifications

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册