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

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

需求背景描述

技术栈

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

  • 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

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