kevinhua (Kevin Hua)

ActionCable 学习笔记

kevinhua — Sat, 12 Nov 2016 22:09:55 +0800

[简单的笔记，待进一步编辑]

看着 Ruby-China 也用上了 ActionCable，然后看了一下 China RailsCasts 转载的 DHH 的教学视频，感觉讲得非常好。

其实看了一下，ActionCable 上手也非常简单，而且 Rails 还内置了 Generator，一句简单的命令就可以搞定 Scaffold 文件：

rails generate channel NAME [method method] [options]

避开技术流程简单来说，最常见的应用场景就是：

前端递交表单->Commit 并保存->通过 after-create-commit 触发任务并排队执行->服务器端将数据 (可以是渲染后的数据)broadcast->客户端接收到数据并执行

简单来分解一下：

1) Form (例如 Ruby China 的“发布新话题”表单)

2) Commit (例如 Ruby China 的 TopicsController#Create)

3) 在模型中设定 after-create-commit (例如 Ruby China 的 Topic Model)

after_create_commit { TopicBroadcastJob.perform_later self }

创建 Job 也很简单，一句简单的命令就可以搞定：

rails generate job NAME [options]

例如：

rails generate TopicBroadcastJob

5) 通过 TopicBroadcastJob，将服务器端数据 broadcast [这里就参考 DHH 视频中的例子]

class TopicBroadcastJob < ApplicationJob
  queue_as :default

  def perform(message)
    ActionCable.server.broadcast 'stream_channel', message: render_topic(topic)
  end

  private
    def render_topic(topic)
      ApplicationController.renderer.render(partial: 'topics/topic', locals: {topic: topic})
    end
end

6) 客户端接收到数据并执行，例如将接收到的数据 (可以是用新建记录渲染过的 partial)

received: (data) ->
  $('#topics').append data['topic']

当然，在使用 ActionCable 之前，还需要简单地设置：

1) 在 Routes 中添加一句：

mount ActionCable.server => '/cable'

2) 在 config 目录中，增加一个 cable.yml，大致内容如下：

development:
  adapter: async

test:
  adapter: async

production:
  adapter: redis
  url: redis://localhost:6379/1

3) 在 Layouts 头部增加一句：

<%= action_cable_meta_tag %>

4) 通过 Generator 生成前后端文件：

rails g channel stream

将在 app/assets/javascripts 中生成前端 (客户端)Coffee 文件，在 app/channels 生成后端 (服务器端文件)。

两个故事：Emo 和海星

kevinhua — Sat, 22 Mar 2014 14:55:21 +0800

Emo 的故事

在一个岛上，有一位长年驻守的动物学家，他专门从事对猴子的研究工作。一天，一只小猴子出生了。动物学家给它取名叫"依侔 (Emo)"。在一个清晨，出生后不久的依侔独自向海边走去，那一刻，岛上的猴子们全都安静了，整个小岛也宁静了，动物学家那一刻也停住了，大家好象都在等待着什么，所有猴子的眼睛和动物学家的眼睛都随着依侔在向海边移动。

为什么会这样？原来，在依侔出生前，岛上的猴子们生生世世没有一个曾到过海边，没有一个猴子碰过海水。至于什么原因，动物学家也百思不得其解，自他见到岛上第一只猴子起，他就从未见过有哪只猴子靠近过海水。他也曾试着用各种方法让猴子们去接近大海，但都未成功，或许是第一只猴子就不曾到过海边的原因，以后在这个岛上出生的猴子就没有一只敢靠近海的。

不一会，依侔走到了海边，它先用一只脚沾了沾清凉的海水，然后又用另一只脚也沾了沾，随后大家发现依侔竟跳进海水，用两只胳膊拍打起海水来，样子看上去很欢快的样子，它在海水中跑着、跳着，并且还招呼其他的猴子跟他一起来玩海水，可是，其他的猴子没有一个敢过来的，依侔仍旧在海边玩着。

这一天，就这样过去了，但这一天，对那位动物学家来说可是非同寻常的一天，第一次，一只猴子，自己下水了。

以后，一直都是依侔独自在海边玩耍，在海里洗澡。

不久，岛上又出生了一只小猴子。在一个温暖的早晨，整个小岛又一次宁静了，原来所有猴子和那位动物学家看到依侔竟然拉着那只小猴子的手，向海边走去。一会的工夫，他们到了海边，随后大家见到它们俩在海水中玩得是那样开心、欢畅，它们向岛上的其他猴子招手，让它们也到海水中一起玩耍，但，最终仍只是它们俩在快乐地玩着。动物学家在海边观察着它们，竟兴奋的一整夜没睡觉。

不久，岛上又出生了一只小猴子，同样是依侔带着它到海边，接触海水，最后它们在海中高兴地跳着。就这样，每出生一只猴子，依侔都会带它去海边玩耍。

现在依侔已有了 98 个小玩伴，直到有一天，岛上又出生了一只猴子，它是依侔在这个岛上出生后的第一百只猴子，但动物学家和其他岛上的猴子们却发觉这次依侔并没有来牵它的手去海边。

后来，动物学家和岛上所有的猴子看到，那只小猴子竟然象当初依侔那样独自走向海边，小岛又一次宁静了，当大家的目光跟着小猴子移到海边时，整个小岛欢呼了！

原来依侔早已在海边等它了。

海星的故事

在大海边，每当退潮的时候，海边总会有一些搁浅的海星，这些海星如果离开了大海就活不了多久了。

一天黄昏，在澳洲的海滩上，有一位老先生拄着拐杖散步，遇到了一个小女孩。他看到这个小女孩不断地捡起沙滩上的东西往海里扔，不禁好奇地问道：“小姑娘，你在打水漂吗？”

小女孩说：“不是啊，老爷爷，我看到沙滩上有好多海星，明天一早太阳出来，它们都会被晒死，我觉得那样太可怜了，所以我要把海星们投回大海。”

这位老人早已看尽人生百态，不禁莞尔。他说：“小姑娘你别傻了，这条海岸有多长、海星有多少，凭你一个人，怎么可能救活所有的海星呢？”

小女孩又默默地捡起一只海星，丢向海中，然后说：“老爷爷，我知道凭我一个人的力量，救不了全部的海星，但是，我能救多少就救多少啊。”

老人又说道：“小姑娘，你别徒劳了，谁会在乎这些啊？”

小女孩微笑，仍是弯下腰再拾起另一只海星：“这只海星在乎，这只也在乎啊！我知道当我捡起这一只海星并把‘它’丢进海里的时候，我已经改变了‘它’的命运。”

小女孩仍是弯下腰再拾起了另一只海星。丢进海中说：“我又改变了一只海星的命运了。”

Discourse 的代码真够冗余的

kevinhua — Fri, 07 Mar 2014 00:40:10 +0800

毫无疑问，Discourse 的交互功能超赞。但代码量真多。

就简单的模型层面来说，Models 代码一堆，Libs 里代码又是一堆，重复来，重复去。

Peat.io 准备用 Discourse 重构?

kevinhua — Mon, 10 Feb 2014 15:27:08 +0800

Peat.io 准备基于 Discourse 重构？

学习兴趣调查

kevinhua — Fri, 27 Dec 2013 16:37:10 +0800

亲爱的朋友，您好！

我们正在策划建立一个在线培训网站，在筹备阶段，我们很希望集思广益，了解您对在线培训的需求和建议。

我们准备了一个非常短暂仅包含 9 个问题的问卷，您可能需要 5 分钟完成这份问卷，感谢您的宝贵时间。

https://www.surveymonkey.com/s/QR2YWXP

Simple Word document templating using Ruby and XML

kevinhua — Wed, 18 Sep 2013 11:42:05 +0800

Cited from: http://tomasvarsavsky.com/2009/04/04/simple-word-document-templating-using-ruby-and-xml/

In my current project we have a requirement to merge simple data into Microsoft Word document templates. Ruby comes with the WIN32OLE library which can manipulate Office documents. WIN32OLE has a few major downsides — it only runs on Windows, it requires Microsoft Office to be installed and it works by sending commands to Word itself to perform operations. Using Word as a back end system for a web application used by 50 people made us nervous so a different approach was needed. We came up with a combination of Ruby, Office Open XML file format, XML processing with Nokogiri and native Zip libraries that works. Office Open XML file formats The new Office file formats (.docx, .xlsx, .pptx files) are basically a zipped collection of XML files. We focused on Word files (.docx) but this approach would work with any of the other types of files as well. The specification for the format weighs in at several thousand pages. Producing a file from scratch without a purpose built library that handles all the intricacies of the format would be quite a task. Instead, we drafted the templates in Word and placed markers to tell our templating engine where to insert values. We created document properties which reference data values and added these as fields into the document in the place where the values should be inserted. For example, we could have fields like:

label_tag #{data[:user].name}
label_tag #{data[:user].address}
label_tag #{data[:booking].number}
label_tag #{data[:booking].items.collect{|i| i.name}.join(‘,’)}

If it looks a bit like Ruby code, it’s because it is! The expressions get evaluated by our templating engine and the results are inserted into the document. Ruby in Word documents, a world first? Opening the documents To read and create documents we need to unzip and re-zip the document. We had trouble using Ruby’s standard RubyZip library. For some reason Word gave a nasty warning when opening files created with RubyZip. Our application has to run on Windows, Linux and Mac so we created an adapter that delegated to standard operating system zip executables based on the host platform. To keep it fast, we extract and re-added only the files that we need to work on. This is important because some documents can become very large when they contain embedded objects such as images. Processing the template The document content can be found in the file word/document.xml inside the zip archive. The fields in the template come out as fldSimple tags that look like this:

Template Field: User Name

To process the document.xml we simply need to find all the fields that have the text label_tag in the w:instr attribute: xml.xpath(“//w:fldSimple[contains(@w:instr, 'label_tag')]“).each do |element|

process each element here

end The rest is simple. We extract the expression in the element text using a regular expression, evaluate it and insert it back into the XML which ends up looking like this:

Tomas Varsasvky

We add the attribute fldLock with value true to make the field read-only so the user cannot change it when they open the document. We also have tags to create lists, insert rows into tables and duplicate sections in the document. These are a bit more complicated in their XML manipulation. Beware, we had a few issues dealing with Word’s nasty XML which can vary a bit between versions and sometimes do unexpected things with formatting. Conclusion This approach worked really well for us and I would recommend it for simple field merging.

重写 Json Presenter，是用 rabl, jbuilder 这一类好，还是 AMS 这一类好

kevinhua — Thu, 25 Apr 2013 22:46:17 +0800

Active Model Serializer 更符合 DRY 原则一些；

Rabl, jBuilder 更容易理解和编写，直接和 views 写在同一文件夹下。

TeaLeaf 的课有优惠吗?

kevinhua — Sun, 21 Apr 2013 11:40:51 +0800

@knwang TeaLeaf 的课有优惠吗？

我有个侄女准备介绍她学习 Rails。

Handlebars 截断字符的 helpers

kevinhua — Sat, 20 Apr 2013 13:57:47 +0800

Handlebars 截断字符的 helpers，使用时如下：

{{trimString name 10}}

就可以将 name 截成长度为 10 的字符，支持中英文字符。

Handlebars.registerHelper('trimString', function(passedString,len) {
  if(!passedString) { return ''; }
  if(!len) {return new Handlebars.SafeString(passedString); }
  var theString = passedString + "";
  var a = 0;
  var i = 0;
  var temp = '';
  for (i=0;i<theString.length;i++) {
    if (theString.charCodeAt(i)>255) {
      a+=2;
    }
    else {
      a++;
    }
    if(a > len) { return new Handlebars.SafeString(temp+"..."); }
    temp += theString.charAt(i);     
  }
  return new Handlebars.SafeString(theString); 
});

网注册了一个域名，siqi.tv

kevinhua — Fri, 19 Apr 2013 23:29:54 +0800

网注册了一个域名，siqi.tv

留着以后用。

闲得无聊，将三四年前停掉的一个网站上线了

kevinhua — Fri, 22 Mar 2013 01:58:26 +0800

闲得无聊，将三四年前停掉的一个网站上线了

VP 时尚网： www.voguepod.com

准备稍微改版一下，当年的美工实在差呀。

三文鱼协议 (Salmon Protocol)

kevinhua — Sun, 10 Mar 2013 11:40:56 +0800

三文鱼协议 (Salmon Protocol)

http://www.salmon-protocol.org/salmon-protocol-summary

建议是不是要增加一个新节点：协议或标准 (Protocols or Standards)

有哪些在线教育网站? 找人开发类似网站的成本为多少?

kevinhua — Thu, 17 Jan 2013 21:33:02 +0800

Udemy: http://www.36kr.com/p/160565.html Lynda: http://www.36kr.com/p/200787.html?vt=0 Khan Academy: http://www.36kr.com/p/168454.html Coursera: http://www.36kr.com/p/200201.html Knewton: http://www.36kr.com/p/52915.html Treehouse: http://www.36kr.com/p/173397.html Udacity: http://www.36kr.com/p/163443.html Lumosity: http://www.36kr.com/p/147467.html

国内的传课、爱海豚一般，多贝尚可。

找人开发类似网站的成本为多少？预算 10 万左右，社区里有没有人愿意接单？

oEmbed China Media Provider

kevinhua — Wed, 05 Dec 2012 10:13:09 +0800

OEmbed-it，没试过，不知道好不好用。

https://github.com/oneplace/OEmbed-it

大家来一起坚持自由开放的互联网

kevinhua — Tue, 04 Dec 2012 21:26:41 +0800

大家来一起坚持自由开放的互联网

http://www.freeandopenweb.com/?utm_source=freeandopen&utm_medium=hp&utm_campaign=fo-p2-hp#loc=3/8.0000/22.0000

数据可视化即报告自动生成

kevinhua — Fri, 30 Nov 2012 10:19:12 +0800

不知道社区里有没有数据可视化即报告自动生成领域的高手。

Quake 的一篇文章：介绍好用的 Faraday

kevinhua — Sat, 17 Nov 2012 10:51:33 +0800

Quake 的一篇文章：

60 行代码实现分享到微博，QQ 空间，豆瓣 - 介绍好用的 Faraday

博文地址：

http://quake.iteye.com/blog/1610238

买了票，但大会两天因故不能出席，赠送给第一个回复者

kevinhua — Tue, 06 Nov 2012 21:45:52 +0800

买了票，但大会两天因故不能出席，赠送给第一个回复者

常见的 JavaScript MVC 框架

kevinhua — Sat, 15 Sep 2012 18:33:20 +0800

翻译比较粗糙，原汁原味的英文请参考：The Top 12 Javascript MVC Frameworks Reviewed

在过去的几个月里，我一直在搜寻完美的 JavaScript MVC 框架。我希望这个框架抽象和各项特性都比较合理。最终我筛选出了一些框架，下面是对每个框架的简明扼要的概括。在最后，我会告诉你我自己的最终决策。

特别地，下面四个特性对于我来说非常重要：

界面绑定 (UI Bindings) - 不仅是模板层的绑定，我希望构成基础的模型发生改变时，可以自动更新视图层 (即模型层和视图层的绑定)。
视图排版 (Composed Views) - 与所有软件开发者一样，我享受创建模块化、可复用的代码。基于这个原因，在编写界面时，我希望可以对视图进行排版 (最好在模板层面)。应该提供丰富的视图层次结构。一个很好的例子就是可以复用的分页 Widget。
页面展现层 (Web Presentation Layer) - 我们是在编写网页应用，我希望框架提供原生 - 样式的 Widgets。没有理由每个框架都创建自己的布局管理器。HTML 和 CSS 已经足够，框架必须围绕这一概念。
兼容其它 (Plays Nicely With Others) - 我们需要面对这一点，jQuery 令人震惊。我不希望某个框架集成 jQuery 的一个子集，我希望框架推荐使用 jQuery 本身。

竞争者 (The Contenders)

下表是支持上述 4 个特性的 JavaScript MVC 框架：

贴两个 Ember.js 和 Rails 结合的教程

kevinhua — Sun, 02 Sep 2012 12:35:26 +0800

Beginning Ember.js on Rails http://www.cerebris.com/blog/2012/01/24/beginning-ember-js-on-rails-part-1/

Ember.js and Rails http://www.zhubert.com/blog/2012/04/26/ember-dot-js-and-rails-part-1/

kevinhua (Kevin Hua)

ActionCable 学习笔记

两个故事：Emo 和海星

Discourse 的代码真够冗余的

Peat.io 准备用 Discourse 重构?

学习兴趣调查

Simple Word document templating using Ruby and XML

process each element here

重写 Json Presenter，是用 rabl, jbuilder 这一类好，还是 AMS 这一类好

TeaLeaf 的课有优惠吗?

Handlebars 截断字符的 helpers

网注册了一个域名，siqi.tv

闲得无聊，将三四年前停掉的一个网站上线了

三文鱼协议 (Salmon Protocol)

有哪些在线教育网站? 找人开发类似网站的成本为多少?

oEmbed China Media Provider

大家来一起坚持 ** 自由开放的互联网 **

数据可视化即报告自动生成

Quake 的一篇文章：介绍好用的 Faraday

买了票，但大会两天因故不能出席，赠送给第一个回复者

常见的 JavaScript MVC 框架

竞争者 (The Contenders)

贴两个 Ember.js 和 Rails 结合的教程

大家来一起坚持自由开放的互联网