最近看到社群很活躍討論的新的前端話題，花了一些時間看了文件，有機會在 椒鹽分享小聚 中跟大家分享我的讀書心得。

Slides

Reference

• http://www.slideshare.net/AndrewHull/react-js-and-why-its-awesome?qid=cc3c82e2-7cee-4bed-9eb9-c341e06698c6&v=qf1&b=&from_search=1
• http://www.slideshare.net/floydophone/react-preso-v2
• http://ithelp.ithome.com.tw/question/10157402
• https://www.youtube.com/watch?v=fHLqSWdDrpA
• http://2014.jsdc.tw/talks/jeremy.pdf
• https://docs.angularjs.org/guide/scope
• http://andyyou.logdown.com/posts/234130-reactjs-reactjs-decrypt
• https://gist.github.com/coodoo/61e517afb1cd08b08574
• http://blog.andrewray.me/reactjs-for-stupid-people/
• http://fluxxor.com/what-is-flux.html
• http://facebook.github.io/flux/docs/overview.html#content
• http://blog.andrewray.me/reactjs-for-stupid-people/
• http://code.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660
• http://scotch.io/tutorials/javascript/getting-to-know-flux-the-react-js-architecture

Image Reference

• http://wiredcraft.com/posts/2014/08/20/why-we-may-ditch-angularjs-for-react.html
• http://blog.stevepond.io/
• http://www.slideshare.net/rmsguhan/react-meetup-mailonreact

這是一個在台大資管人對於網站開發的心得議程。從我們一年級計算機概論課程就第一次學習簡易的 HTML、CSS 網頁，到大三資料庫系統架設 PHP 以及資料庫環境，接著或許會有些更熱血的同學會在大四接觸到用 Rails 或 Express 開發，才開始有了 MVC 的概念，每個階段對於網站開發又有不同的心得。而這次我想分享今年暑假在實習時接觸的前端框架 Angular.js，以及過程是怎麼將網站做前後端分離的應用開發。不會談論過於細節的實作程式碼，希望給大家一個概觀的架構以及怎麼開始使用 Angular.js。http://www.im.ntu.edu.tw/~b100027/

Slides

[延伸閱讀] Gulp.js 簡介

Reference

• http://2014.jsconf.cn/slides/herman-taobaoweb/index.html
• http://ihower.tw/rails3/intro.html
• http://www.humasolutions.com/single-page-app-spa-with-angularjs/
• http://ithelp.ithome.com.tw/question/10132196
• http://blog.miniasp.com/post/2013/04/24/Front-end-Engineering-Fineart-An-Introduction-to-AngularJS.aspx
• ng-book
• 帥哥 iamblue

• CASE I: http://evenchange4.github.io -> http://michaelhsu.tw
• CASE II: http://about.michaelhsu.tw -> http://evenchange4.github.io/about

Basic 預備知識與情境說明

GitHub Pages 分為兩種：

1. User Pages: 例如 http://evenchange4.github.io，每個帳號都只有一個，必須命名為 evenchange4.github.io，且在 master branch。
2. Project Pages: 例如 http://evenchange4.github.io/about，也就是你的 GitHub 每一個 repository 都可以有一個 Page，必須在 gh-pages branch。

你可以注意到上面兩個例子可以分別導到我所擁有的 Domain name michaelhsu.tw，這是怎麼做到的呢？以下兩個情境依序帶你做設定。我這邊使用的 DNS provider 是 Godaddy。

CASE I: A record to User Pages

也就是例子中的將 http://evenchange4.github.io 導到 http://michaelhsu.tw。

1. 在 repository 中的 evenchange4.github.com master branch 新增 CNAME 檔案，內容為一行 michaelhsu.tw
2. 將 Godaddy 新增 A record to 以下兩個 IP (兩個都要)
   • 192.30.252.153
   • 192.30.252.154

需跳別注意 207.97.227.245 or 204.232.175.78 是舊的。

CASE II: ALIAS to Project Pages

大致上 CASE I 兩步驟設定完畢就可以直接由 http://about.michaelhsu.tw 導到 http://evenchange4.github.io/about，但是如果我想要自定義到 該怎麼做？

1. 在 repository 中的 about gh-pages branch 新增 CNAME 檔案，內容為一行 about.michaelhsu.tw
2. 將 Godaddy 新增 CNAME record to evenchange4.github.io。

最後可以用 dig 來檢查：

1
2
3
4
5
6
7
8

$ dig about.michaelhsu.tw +nostats +nocomments +nocmd +multiline
=>
; <<>> DiG 9.8.3-P1 <<>> about.michaelhsu.tw +nostats +nocomments +nocmd +multiline
;; global options: +cmd
;about.michaelhsu.tw.	IN A
about.michaelhsu.tw.	3600 IN	CNAME evenchange4.github.io.
evenchange4.github.io.	3600 IN	CNAME github.map.fastly.net.
github.map.fastly.net.	19 IN A	199.27.79.133

Reference

• Tips for configuring an A record with your DNS provider
• Adding a CNAME file to your repository
• My custom domain isn’t working
• User, Organization, and Project Pages
• About custom domains for GitHub Pages sites

• Source Code: https://github.com/evenchange4/gulp-livereload

Knowledge 前置小作業

對於使用的工具名稱至少要有一認識，所以查了一下資料。

• Gulp.js: 看影片念做 告Ｐ，是一個自動化構建的工具。
• Gulp.js vs Grunt: 最主要差在 Gulp 使用 node.js 的 Streams 來加速。
• LiveReload 2: Client 端的整合自動刷新利器。
• 靜態網頁可以嗎？：不行，所以這裡使用 node 簡易的 http server “http-server“，後面會一併教大家如何使用。
• gulp-connent: 把 webserver 跟 livereload 弄在一起的套件。

選擇使用 gulp-livereload with http-server

第一步：Install 安裝

Install Node Package， 這邊用 npm 來下載管理使用到的套件：

1
2

$ sudo npm install gulp -g
$ sudo npm install http-server -g

Install Chrome Extension，安裝 Chrome Extension: LiveReload，作為 client 端監控的插件。

第二步：Config 前置作業與設定

Managing module dependencies，讓後人執行可以一目了然：

1
2

$ npm init
$ sudo npm install gulp gulp-livereload --save-dev

Gulp Config，配置設定 Gulp，新增且編輯 gulpfile.js：

1
2
3
4
5
6
7
8
9
10
11

var gulp = require('gulp'),
	livereload = require('gulp-livereload');
gulp.task('watch', function () {  // 'watch' 是 task 的名稱，可以任意定義名稱  
	var server = livereload();
	
    gulp.watch('*.*', function (file) {	// 監控的檔案，在這裏 '*.*' 我監控所有檔案
        server.changed(file.path);
    });
});

第三步：Quick Start 執行

運行 Run http-server，因為前面提到的，直接用瀏覽器開啟的檔案靜態網頁不支援，因此一定要有一個 http server，所以這邊用非常簡單 node 的 http-server 來運作：

1
2
3
4

$ http-server
Starting up http-server, serving ./ on port: 8080
Hit CTRL-C to stop the server
...

運行 Run gulp-livereload 執行 Gulp 監聽的 Task:

1
2
3
4
5
6

$ gulp watch
[00:22:57] Using gulpfile ~/code/node/livereload/gulpfile.js
[00:22:57] Starting 'watch'...
[00:22:57] Finished 'watch' after 7.41 ms
[00:23:23] index.html was reloaded.
[00:23:23] Live reload server listening on: 35729

連接 Chrome-livereload，在 Chrome 瀏覽器連接起來，這邊第一次連可能會沒反應，多點幾次就好了，使得圈圈變為實心的：

選擇使用 gulp-connect

因為 gulp-connect 這個 node 的套件已經將 webserver 整合在一起，所以不需要特別執行 http-server。程序同前面，我快速帶過。

第一步：Install 安裝

1

$ sudo npm install gulp-connect --save-dev

第二步：Config 前置作業與設定

將 gulpfile.js 編輯：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var gulp = require('gulp'),
  connect = require('gulp-connect');
gulp.task('connect', function() {
  connect.server({
    root: '',
    livereload: true
  });
});
gulp.task('html', function () {
  gulp.src('*.html')
    .pipe(connect.reload());
});
gulp.task('watch', function () {
  gulp.watch(['*.*'], ['html']);
});
gulp.task('default', ['connect', 'watch']);

第三步：Quick Start 執行

再來執行 gulp 即可：

1
2
3
4
5
6
7
8
9
10

$ gulp                                                          
[03:08:42] Using gulpfile ~/code/node/livereload/gulpfile.js
[03:08:42] Starting 'connect'...
[03:08:42] Server started http://localhost:8080
[03:08:42] LiveReload started on port 35729
[03:08:42] Finished 'connect' after 18 ms
[03:08:42] Starting 'watch'...
[03:08:42] Finished 'watch' after 7.29 ms
[03:08:42] Starting 'default'...
[03:08:42] Finished 'default' after 7.06 μs

Reference

• Gulp.js—比Grunt更易用的前端构建工具
• 使用gulp及livereload实时更新页面
• Gulp.js-livereload 不用F5了，实时自动刷新页面来开发
• The streaming build system Gulp 比較
• gulp-connect config

Install R on Ubuntu

1
2
3
4

$ sudo apt-get update
$ sudo apt-get install r-base
# installing packages
$ sudo apt-get install r-base-dev

Run R script from command line

方法一：use Rscipt

方法二：第一行加入 #!/usr/bin/Rscript 如下範例程式：

• Sample code test.r:

1
2

#!/usr/bin/Rscript
print("HelloR")

• Reminding: You can use $ which Rscript to search your path to Rscript.

1
2

$ which Rscript
/usr/bin/Rscript

• Run sample code test.r from command line:

1
2
3
4

# 方法一執行方式
$ Rscipt test.r
# 方法二執行方式
$ ./test.r

If you get ^M Problem

1
2

$ ./test.r   
zsh: ./test.r: bad interpreter: /usr/bin/Rscript^M: 沒有此一檔案或目錄

This is an encoding problem at the end of line, your can use Line endings setting of Sublime: View > Line Endings > Unix

Read Command line Argument

• Sample code test.r:

1
2
3

#!/usr/bin/Rscript
args<-commandArgs(TRUE)
print(args[1])

• Run sample code test.r from command line:

1
2

$ ./test.r 1 2 3 4 
[1] "1"

• Reminding: Arguments list start from index 1.

Reference

• UBUNTU PACKAGES FOR R
• Run R script from command line
• How can I read command line parameters from an R script?

If you want to compile a C++ program that includes self-defined header files on Mac or other Linux environment. We suggest you the following two ways to do that. One way is using g++ to compile and run programs in terminal (Recommended). Another way is using Xcode to new a project (i.e., a file with filename extension .xcodeproj).
Here, we provide two cpp files, and one header file to you for demonstrating how you can run it on Mac. Just the same as windows’ Dev-C++. Download example code that was mentioned in the class.

Using Commands in Terminal (Recommended)

In Figure 1, find terminal in the Spotlight results, and then click it to open a new Terminal windows (Figure 2).

Before starting, some basic knowledge you need to know is about unix-like system command-line commands. Here we list some useful commands.
First, we need to change directory cd path to the right one which your code is available under this folder. We assume that the codes are under the path

~/Downloads/project

And then we need to to switch our path to the destination path of project.

1

$ cd Downloads/project

Then we type the command below to list li what files are under the folder project.

1

$ ls

And, we can compile our C++ codes as below. The two cpp files will be linked together automatically (i.e., It links all the object files that are separated by a white space.). Here we will get one executable file (e.g., run). -o filename is an argument of output file name.

1

$ g++ main.cpp myMax.cpp -o run

Finally, execute ./program the program, and the results will be printed on the Terminal windows. The above steps are shown in Figure 3.

1

$ ./run

Using Xcode

We use the Xcode in Mac which is almost the same as windows’ Dev-C++. In Figure 4, we create a new Xcode project, and then select the OSX > Application > Command Line Tool option (Figure 5).

In Figure 6, you need to name the product first, and keep the product type as C++ (of course). Then, we put all of the downloaded source codes in the project, but we need some tips to do that. Now, create two empty files manually (File > new > File), and those will be your cpp file and header file (Figure 7 and Figure 8).

Finally, we can execute your project, and we will get the results in the console window in the bottom of Xcode (Figure 9).

後記

第一次用英文打這種 Tutorial，因為當了 全英文授課的 PD 助教所以需要全英文的文件，希望一學期過後破爛的英文可以稍微有些長進ＱＱ 特別感謝 Lynn 從旁協助。

Reference

• ADT List implement sample code
• 2012.09.11 程式編輯與編譯環境安裝 Summary
• Class 範例程式

最近的一個需求情境是這樣的，LAB 的電腦是 Windows 系統，但是我想要 Ruby 去做資料的 Preprocess，但是本身使用 Mac 的我，實在不習慣 Windows 的 CMD ，所以選擇使用 Vmware 架設一個 Ubuntu 12.04.4 LTS 環境，但是離開實驗室後，要怎麼使用 LAB 電腦撰寫程式呢？

使用 SSH 登入你遠端電腦的 Vmware Ubuntu

但是要怎麼透過 Windows 的固定 IP 連進你的 Virtual machine 呢？透過 Port Forwarding 的設定將 Vmware Ubuntu 的 Port 對應到 Windows 的 Port。

Configuration Environment

1. Windows 7 Enterprise, 64-bit 6.1.7601, Service Pack 1, With Memory 16GB
2. Licensed VMware® Workstation 10
3. Setup Virtual Machine with Ubuntu 12.04.4 LTS
4. Use a NTU fixed IP
5. Want to make the SSH/FTP (22/TCP) available to the network

Port forwarding

1. Vmware NAT Setting: 首先將 Vmware 新增設定，開啓 Edit > Virtual Network Editor ，選擇使用 NAT（基本上就是 Vmnet8） 的網路連線形態，點選 NAT Setting...，然後 Add 新增一筆。

   

   上束這個例子就是將 Windows 的實體 IP port 5555 對應到 VM 中的 Ubuntu port 22。

2. Setup custom Firewall for Port: Windows 防火牆 > 進階 > 輸入規則 > 新增規則 ，接者選擇 TCP 以及欲開啟的 Port number （上述例子 55555），就完成開啟 Windows Port 的設定了。

   

How to Start Connecting

當然你需要將你的 Ubuntu 安裝好 SSH (參考 Reference)， 然後直接在 terminal 輸入以下指令，或是使用 Putty 等軟體登入。

1
2
3

$ ssh <userid>@<IP> -p <port_number>
# example: 
# ssh michaelhsu@140.112.117.123 -p 55555

恭喜你可以在任意地方使用 SSH 登入你的 VM 工作了！，當然 FTP 也是可以。

Folder Sharing

當然你也可以直接操作 LAB 電腦來使用 Windows Putty SSH 登入你的 VM Ubuntu，但是問題來了，原本存在 Windows 實體硬碟中欲處理的 Dataset 該怎麼搬移進去 Virtual Machine 呢？你可以想說用拖曳的（VMware 小檔案的確可以！），或是使用 FTP 連線上傳，但是當資料量大到無法這樣做呢？例如我最近在處理 Twitter 7 month raw Dataset 將近 25GM 的檔案，該怎麼辦呢！？頭疼了。

直接與你的 Virtual Machine Share Folder 是一個很不錯的選擇。

a. Install Vmware Tools: 安裝 Vmware 共享資料夾所需要的工具：透過設定 VM > Install Vmware Toola 接者會跳出下載下來的目錄資料夾，將 VMwareTools-8.4.5-324285.tar.gz（版本號可能不同） 複製到 /tmp 底下接者解壓縮

1
2

$ cd /tmp
$ tar zxvf VMwareTools-8.4.5-324285.tar.gz

並且進行安裝：

1
2
3
4
5
6
7

$ cd vmware-tools-distrib
$ sudo ./vmware-install.pl
# 隨者指示安裝完畢後出現
#
# Enjoy,
# 　　--the VMware team

b. Setup Shared Folders: 透過 Vmware 設定 Virtual Machine Setting > Options ，在 VM Power Off 的情況下可以新增一筆欲共用的資料夾。

於是乎你的資料就來去自如，你可能會覺得這樣很像 Dropbox 的功能，他是真正的不透過網路共用資料，也是無時差的同步，不過必須額外小心處理！

上述應用為使用 Windows 的 Sublime3 寫完程式後並儲存在分享的資料夾中，直接使用 Putty 登入的 VM Ubuntu 的環境執行該程式

延伸應用與後記

突然想起來之前在 TMI (台灣創意工場) intern 的時候，曾經使用 Vmware Centos 架設 PHP Server ，原來我很早就接觸過這種連線的設定，只是一直沒有沒有機會使用到。這邊我另外做了一個嘗試多開一個 Port 給 VM Ubuntu run Rails project ，並透過上面教學的步驟設定，成功可以將外面的連線導到 Virtual Machine 架設的 Server 中，如此以來就可以打在一個最佳的架設環境了！感到熱血沸騰啊。

最後感謝坐我隔壁的 LAB 同學，一起討論學到蠻多東西的，我覺得未來一年半應該也會常常提到他，應此以後就稱他為 陽光宅男 Mr. Sunshine 好了。

Reference

• 在 Windows 防火牆中開啟連接埠
• How to Setup Port Forwarding in VMware Workstation 9
• Using SSH Locally to Work With Ubuntu VM + VMware Tools Installation via Shell
• [转载]VMware 虚拟机安装Ubuntu 11.10使用share folders共享目录

讓你下次回到工作模式時，立即進入狀況！

常用指令

• Out of screen

1
2

$ screen -r
$ screen -ls

• In screen ctrl+a 之後鍵入：
  • c: create a window
  • d: 離開 (detach)
  • A: rename the window
  • k: kill
  • ?: 熱鍵查詢
  • 數字: 換頁

配置設定 Screen 畫面 vim ~/.screenrc

1
2
3
4
5

hardstatus on
hardstatus alwayslastline
hardstatus string "%{.bW}%-w%{.rY}%n %t%{-}%+w %=%{..G} %H(%l) %{..Y} %Y/%m/%d %c:%s "
# 設定視窗回捲時可看到的行數
defscrollback 2048

Reference

• 沒事做，弄點小設定。把常用的screen 再弄得看起來厲害一點

都通稱是 server，但確有些許微妙的不同，小時候一直很不懂之間的差別，直到最近才搞得比較清楚一點。

Web server

Apache、Nginx 都是 web server ，主要可以拿來 serve static files、serve dynamic web apps （ex: PHP 寫的）。注意！但是他們都不能夠直接拿來 serve Ruby web apps，必須要透過額外的 add-on 才行。
其中 Apache 應該是比較常聽到的架設選項，但是近年大家都偏好使用 Nginx 是因為他比較沒那麼肥大，而且速度比 Apache 快，所以變成了架設 server 的首選。
另外他們除了做 proxy server 外，也可以拿來做 Reverse Proxy Server ，因為彼此的特性不同，也常常混合者使用，例如拿 Nginx 來做 Reverse Proxy Server ，拿 Apache 來當做後面的 Web Server。

什麼是 Proxy Server 、 Reverse Proxy Server？

Proxy Server（代理伺服器）

他的工作是去各個 Web Server 抓取資料回來放在伺服器上來供用戶讀取下載，如此一來可以大幅減少到各個 Web server 抓取資料的時間。

Reverse Proxy Server（反向代理伺服器）

他做的事情恰好相反，負責將用戶端的資料傳送（HTTP）給藏在 Reverse Proxy Server 後面的 Web Server，這些躲在後面的 Web Server 不會、也不能直接被用戶直接連結，只能經由 Reverse Proxy Server 代理傳送和接收資料，如此不僅可以保護後方 Web Server 被攻擊，同時還可提供負載平衡、快取以及資料加密的功能。

When that server responds with an HTTP response, Apache/Nginx will forward the response back to the client. You will learn later why this is relevant.

Application server

可以是很多語言寫的 app server，這邊拿 ROR 的 app server 來比較，通常你在 rails new project 的時候所預設 server 是 WEBrick，這就是一個 app server，所以你在 run $ rails s 的時候就會看到 => Booting WEBrick，這是因為 rails 內建的 app server 是 WEBrick，但是我們通常在部署的時候就不會使用 WEBrick 這樣的 app server，因為 慢！。

所以我們通常會把 Rails 的 App server 給換掉，但是你可能會懷疑會什麼可以這樣直接換 app server 勒？答案是強大的 Rack 設計。

什麼是 Rack？

Rack: a Ruby Webserver Interface.
provides a minimal interface between webservers supporting Ruby and Ruby frameworks.

Rack 是各種 web framework 與各種 app server 的橋梁（middleware），其中必須制定好規則也就是 Rack SPEC，簡單用圖來表示就是像這樣：

比較 Rails 各種 App server

很抱歉因為志志實在太熱愛寫 ROR 了，這邊就只能做 Rail 的 app server 比較了。

1. Mongrel:
   • 過時的 雜種。
   • written in part Ruby part C
   • no process monitoring，當調需要手動重啓。
2. WEBrick:
   • not fit for production
   • written entirely in Ruby (慢)
   • 但是因為他是純 ruby 寫的，所以被設為預設（heroku 也是），不需額外安裝。
3. Unicorn:
   • fork of Mongrel，加上 process monitoring
   • 因為 make all processes listen on a single shared socket, instead of a separate socket for each process. 所以簡化了 reverse proxy 的設定。
4. Thin:
   • no process monitoring
   • evented I/O
5. Puma:
   • forked from Mongrel
   • purely multi-threaded
6. Phusion Passenger:
   • Dynamically adjusting the number of processes based on traffic
   • written in C++, making it very fast.
7. Rainbows:

現實世界的 App server 怎麼運作

在這多的 app servers 中，像是 Phusion Passenger, Rainbows 就可以直接透過 port 開在 80 來達到 directly exposed to the Internet。但是有些 app server 卻不建議這麼做，例如 Mongrel, Unicorn, Thin, Puma。他們需要放在 reverse proxy server 後面比較恰當。

為什麼需要 Apache/Nginx reverse proxy server？

1. 因為這些 app server 一次只能 handle 1 request concurrently，如果有兩個以上的 request，就必須要 run multiple app server instances（app server cluster），而這正是 Apache/Nginx 可以透過 reverse proxy，幫助你適當 distributing requests between the instances in the cluster，而且可以 buffer requests and responses 避免發生 slow clients 的情況發生。

   Apache and Nginx are very good at doing many things at the same time because they’re either multithreaded or evented.

2. Web server 比起 App server 更適合來 serve static files。
3. 安全，避免 corrupted requests。

那為什麼 Phusion Passenger 可以不需要 Apache/Nginx reverse proxy server？ 因為它在設計上具有獨特的特性：integrates directly into Apache or Nginx （Web server）所以你在架設的時候也相當簡易，可以參考 Nginx + Passenger + Rails4 Setup on Ubuntu12.04。

現實中的 Requests

如果你只是需要做 Prototype demo 用，一般的開個 App server 當然沒問題，但是真的搬到台面上運作呢？當然不行，面對龐大的使用者你的 Server 必須要能夠應付得了。來看看實際上的 Web Request 是怎麼處理的。

OS 課程回顧：

• Program：程式碼（ OOP Class）。
• Process：Program 所產生的執行個體（ OOP Object ）。因此一個 Program 可以同時執行多次產生多個 Process。每個proecess 包含：
  • 一個 Memory Space（ OOP variable ），因此不同 Process 的 Memory Space 也不同,彼此看不到對方的 Memory Space。
  • 一個以上的Thread。Thread：CPU執行的最小單位。

Process 去取得 CPU 資源，很多 Process 去運用資源的方式有兩種

1. multiprogramming 一次執行一個 Process，等到 I/O 再換下一個，剩餘的放在 memory。
2. time sharing 來快速切換 process。

釐清：multi-tasking 利用 CPU 多核來同使處理 tasks

取得 process 的方法就得使用 Process scheduler：

1. short-term scheduler（CPU scheduler ），來決定哪下一個被處理的 Process。
2. long-term scheduler （Job scheduler ）來決定哪些 process 來放到 ready queue

至於 multi-thread 的使用 CPU 資源又是另一個 Thread Scheduling 的事情了

我們可以將處理大量的 Requests （I/O concurrency models）方式分為四種：

1. Single-threaded multi-process
   • 最傳統的做法，因為早期 Ruby 的生態系對於 multithreading 支援度不高。
   • 因此需要 web server load balances between processes
   • 適合 for fast, short-running workloads
   • 不適合 for slow, long-running blocking I/O workload
   • 而且如果每個 Request 都沒有 I/O blocking，利用的 CPU 效率就是最好的。
   • 同時連線線就等於能用的Process數量（例如最基本512 mb的主機上，通常可以開 3 個 Rails process，但是因為每個連線都控制在 20ms 以下，所以每秒鐘能處理的 requests 數量還是十分驚人，足以應用絕大部分的應用場景。
   • Mongrel、Unicorn
2. Purely multi-threaded
   • 因為現今 Ruby 生態系的發展，multithreading 支援度高，所以有些 App server 採取這個方式，
   • Multithreading allows high I/O concurrency
   • 第一點提到的兩種情況都適合。
   • 因為採用 Global Interpreter Lock (GIL) 所以不能夠 leverage multiple CPU cores
   • no builtin cluster support. 所以 You need to take special care to ensure that you can utilize multiple cores
   • Puma
3. Hybrid multi-threaded multi-process
   • implemented by Phusion Passenger Enterprise 4
   • 因為 hybrid 的設計，就算 Global Interpreter Lock (GIL) 也可以 fully utilize all CPU cores。
   • 任意切換組合： single-threaded multi-process, purely multithreaded, or perhaps even multiple processes each with multiple threads
   • Puma, the hybrid mode is called “clustered”
4. Evented-driven
   • 完全不同的設計概念，無論有多少連線，只有在有事件發生時，才會讓CPU做事。
   • allows very high I/O concurrency
   • excellent for long-running blocking I/O workloads
   • 但是 Framework 的設計概念必須一致，例如 Rails、Sinatra 這樣的 Framework 就不行。ex: 雖然 Thin 在設計上是這樣，但是搭配 rails 就仍舊只能 single-threaded multi-process
   • thin

總結：

我們可以把網路真實的情況分為三個層級來做適當的處理：

• Situation 1：天真的想法，但是其實堪用。

面對大量的 Client Request，multi-proecess （這邊講的是 single-thread）是最原始的做法，讓每一個 Request 都產生一個完整的 Rails app Process，而每個 Process 去取得 CPU core 得到運算資源來作處理，當然 Process 取得 CPU 資源應該在 OS 課程上學到，也許會透過一些排程來作 CPU 資源分配，但是切換 Process 需要 Context switch 是一種負擔。multi-proecess 這樣的做法好處是，除了撰寫容易外，面對只需要運算而不需要做 I/O blocking 的程式就能達到最好的 CPU 資源利用。

• Situation 2：中等的想法，但也是堪用。

但是一旦碰到很多 I/O blocking ，能夠同時處理的 Request 就會受到限制，不過其實 multi-proecess 對於一般的服務，負載量是沒問題的。
但是當面對非常大量的或連續的 HTTP request，例如聊天室，每個使用者連線持續佔用 Process，或是 Process 需要的 Context switch 總成本量太高，就會出現等待問題了。這時候想到的解決方案是 Multi-threaded，因為利用 Thread 來取代 process 得以降低 context switching 負擔，因為 Thread 共用 Memory Space 的特性。這樣的解法是沒問題的，雖然程式設計撰寫上比較沒這麼容易，但是因為 Ruby 對於 Multi-threaded 的支援度越來越高，所以也算是一個很好地解決方案。

• Situation 3：天人的想法，好還要更好。

現階段正在發展，最好的做法還是應該採用 Evented-driven 的 Actor model。就算是 Thread 很廉價，但是數量一多還是會成為 Server 負擔。Actor model 是個無窮的迴圈，無論有多少連線，只有在有事件發生時，才會讓CPU做事。
所以要如何達到 Evented-driven 呢？在 Rails 架構下，除了把 App server 改成有 evented 特性的 thin server 外，要把 rails 本身的 I/O 操作都改成 evented 版本，不然只要有一個部分被 blocking ，等於做了白功。事實上， Rails 這個 web framework 本來就並非 Evented-driven 的設計概念，所以最的方法是會選令其他 web frameworks ，例如 ruby 的 Cramp、Goliath（base on EventMachine ruby library)，或是其他語言的 Evented 框架如 node.js。

實作自己 Host HTTP server

參考 Nginx + Passenger + Rails4 Setup on Ubuntu12.04，有簡易的步驟教學。

Reference

• Ruby on Rails Server options [closed]
• Puma vs Phusion Passenger
• Proxy server 簡介
• Reverse Proxy Server ( 反向代理伺服器 ) 是什麼 ?
• 第一話 WEB SERVER COMPARE
• Rack 與 Rack middleware
• Rack: a Ruby Webserver Interface
• Ruby on Rails 實戰聖經 佈署
• Chapter 4 Homework- Threads 參考答案
• Program,Process,Thread
• Context Switching(內文切換)
• What is the difference between time-sharing and multitasking?

寫網頁吧，比較有成就感！
Ruby on Rails

開發準備工作

• 最佳環境： Mac >> linxu Ubuntu 12.04 >>>> windows
• 什麼是 HTML CSS Javascript？
  • HTML5, CSS/Sass, jQuery, Bootstrap
    新一代網頁設計
  • 第一次寫網頁就上手
  • HTML 標記語言
  • CSS 長什麼樣子
  • javascript 動畫或功能
• 其他
  • 孫媽 網路應用課
  • Tony 資料庫管理
  • 小盧 SA
  • 資料結構

靜態網頁，需不需要架設伺服器呢？

答案不需要。因為不需要資料庫，也不需要運算能力。

那靜態網頁可以放在哪裡？自己電腦桌面上、學校空間、dropbox、github page!
ex: 計概作業放到學校空間上。

建立自己的GitHub Project Pages

Ruby on Rails 可以做到什麼事情？

http://im102timeline.herokuapp.com/

你可以把設計網頁分為兩個部分

1. 存取資料（新增資料那些）
2. 網頁美觀度

而為什麼1.的部分可縮短成10分鐘呢？因為 ROR 就是要推薦你們的好東西。

1. 開發快速
2. 好維護

Ruby 關於 Ruby

跟 C、C++、java、PHP、Ruby、Python 一樣就是程式語言，但是是比較特別的高階的程式語言。

試著讓 Ruby 更為自然，而不是簡單。

• scripting language。
• 純物件導向的語言。
• 區塊(Blocks)：{}、do ... end
• 動態語言
  • 動態語言(Ruby、Python、PHP、Perl等)比起靜態語言(Java、C++等)
  • 靜態語言和動態語言的差別在於，前者的變數型別需要事前宣告，後者則是執行期才動態決定。實務上，就看程式需不需要事前編譯這個動作了。
  • 1. 執行效能是絕對比不上靜態語言的
  • 1. 沒有編譯期可以檢查型別錯誤
  • 不需要編譯

安裝 Ruby 2.0.0-p195

1. 請先更新電腦再開始
2. text editor: sublime 2
3. chrome
4. rvm

1
2
3
4
5
6

$ sudo apt-get update
$ sudo apt-get install curl
$ \curl -L https://get.rvm.io | bash -s stable
$ source /home/michaelhsu/.rvm/scripts/rvm #!!注意不同！
$ rvm list
$ rvm install 2.0.0-p195

• $ irb 玩玩看
  • http://tryruby.org/
  • http://www.ruby-doc.org/core-2.0/String.html
  • http://www.ruby-doc.org/core-2.0/Array.html
  • http://www.ruby-doc.org/core-2.0/Hash.html
• ruby gem: http://rubygems.org/

1

$ gem list

ruby 可以寫什麼？

什麼都可以寫，像程式作業，舉例：捷運站經緯度坐標 Open data

為什麼需要網站開發框架？ Web framework

程式語言與 HTML 標記語言太過於混雜，用 <?php ... ?> 括起來的部份參雜在 html file 裡面，雖然是可以進行開發，但是維護性非常低，也許自己可能也看不懂，至於所謂框架看起來就是長這樣：

MVC 架構

• MVC 是一個設計概念，包括
  • Model: 操作資料庫
  • View: 表示使用者介面
  • Controller: HTTP Request，與其他部分溝通
• 很多地方都有提倡 MVC 架構，Rails 是其中之一
• 分離邏輯和使用者介面。
• 
• 其它語言開發框架？
• 

Rails 哲學說

• MVC
  • VIEW: html.erb、<%= %>
  • Controller: 主軸核心運算
  • Model: 操作資料庫
• DRY: Don’t Repeat Yourself
• RESTful (最佳實踐規則) -> controller 提到
• ORM (Object-relational mapping) -> model

安裝 rails 4.0.0

1

$ gem install rails

實作

• rails new 建立一個 Rails Project，

1
2
3
4

$ rails new "myfirstror"
$ cd myfirstror
$ sudo apt-get install nodejs # for ubuntu error
$ rails server

• 利用 Scaffold 來快速打造一個 CRUD 的功能。

1
2
3

$ rails generate scaffold food name:string count:integer descript:text due:datetime eatable:boolean
$ rake db:migrate

• 
• CRUD
• Restful
• rails gem 可以自己寫，但是記得 DRY，有人寫好就拿來用。

版本控制 git

你的程式碼應該放在哪裡呢？

1. 你的電腦裡
2. 你的隨身碟裡
3. dropbox
4. github!

安裝

1

$ sudo apt-get install git

create github account
git 教學 try git

Deploy 部署

• RAILS_ENV: development/test/production
• PaaS: Herku

安裝 heroku

• toolbelt

1
2

$ wget -qO- https://toolbelt.heroku.com/install-ubuntu.sh | sh
$ heroku login

heroku push 設定 gemfile

1
2
3
4
5
6
7
8

group :development do
  gem 'sqlite3'
end
group :production do
  gem 'pg'
end
gem 'rails_12factor', group: :production

安裝 PostgreSQL

1

$ sudo apt-get install libpq-dev

延伸

• IaaS / VPS / Self hosting: Nginx + Passenger + Rails4 Setup on Ubuntu12.04，有簡易的步驟教學。
  • Web server / Application server 傻傻分不清楚 ？HTTP Server 大小事

雲端運算概念：

1. IaaS (Infrastructure as a Service）: AWS EC2
2. PaaS（Platform as a Service）: Heroku、GAE
3. SaaS（Software as a Service）: Gmail、google doc

切換資料庫：Rails on PostgreSQL

學習資源

• Ruby on Rails 實戰聖經 必看！
• http://tryruby.org

Reference

• HTML5, CSS/Sass, jQuery, Bootstrap
  新一代網頁設計
• 第一次寫網頁就上手
• How to Install Ruby on Rails on Ubuntu 12.04 LTS (Precise Pangolin) with RVM
• How to Install Git on Ubuntu 12.04
• attributes SQL types
• Getting Started with Rails 4.x on Heroku
• How to install gem pg on Ubuntu

Install postgresql

• Mac: 請 100% 跟者 ”How to Install PostgreSQL on a Mac With Homebrew and Lunchy“ 動一動。

1
2
3
4
5
6
7

$ brew update
$ brew doctor
$ brew install postgresql
$ initdb /usr/local/var/postgres -E utf8
$ gem install lunchy
$ mkdir -p ~/Library/LaunchAgents
$ cp /usr/local/Cellar/postgresql/9.2.1/homebrew.mxcl.postgresql.plist ~/Library/LaunchAgents/

• Ubuntu

1

$ sudo apt-get install postgresql

• check & start

1
2
3
4
5
6
7

$ postgres -V
$ lunchy start postgres
# for ubuntu
$ sudo /etc/init.d/postgresql start
$ brew info postgres

Setup postgresql

1
2
3
4
5

$ lunchy start postgres
$ lunchy stop postgres
# for ubuntu
$ sudo /etc/init.d/postgresql start

• add user

1
2
3
4

$ sudo su - postgres # for ubuntu error
$ createuser --createdb --pwprompt username
$ dropuser root

Rails on PostgreSQL

• Gemfile

1

gem 'pg'

1
2
3

$ sudo aptitude install libpq-dev # error for ubuntu
$ bundel install

• config/database.yml

1
2
3
4
5
6
7
8
9
10

development:
  adapter: postgresql
  encoding: utf8
  database: ass_development
  pool: 5
  username: root
  password: 1234
  host: localhost
...

• Rake

1
2
3

$ rake db:create:all
$ rake db:migration
$ rake db:seed

• for production

1
2
3
4

$ rake db:drop RAILS_ENV=production
$ rake db:create RAILS_ENV=production
$ rake db:migrate RAILS_ENV=production
$ rake db:seed RAILS_ENV=production

Reference

• Creating Rails users in Postgres on Ubuntu
• How to Setup PostgreSQL for Rails and Heroku
• [宅] 在Ubuntu安裝PostgreSQL
• PostgreSQL error: Fatal: role “username” does not exist

目錄

• 一、環境設定 Linux + Rails
• 二、環境設定 Nginx (via passenger RubyGems)
• 三、環境設定 mysql（for Mac Hombrew）
• 四、部署設定 mina
• 五、資安處理

一、環境設定 Linux + Rails

• SSH 登入:

1

$ ssh evenchange4@hostip

• os: Ubuntu 12.04.2 LTS (GNU/Linux 3.2.0-23-generic x86_64)
• rvm install:

1

$ \curl -L https://get.rvm.io | bash -s stable --rails # Or, --ruby=1.9.3

• 檢查環境

1
2
3
4
5
6
7
8
9

$ rails -v
Rails 4.0.0
$ ruby -v
ruby 2.0.0p195 (2013-05-14 revision 40734) [x86_64-linux]
$ rvm list
rvm rubies
=* ruby-2.0.0-p195 [ x86_64 ]

• install git:

1

sudo apt-get install git

• rails server ExecJS::RuntimeUnavailable error:

1
2

$ gem install therubyracer
$ sudo apt-get install nodejs

二、環境設定 Nginx (via passenger RubyGems)

Nginx (pronounced engine-x) is a free, open-source, high-performance HTTP server and reverse proxy.

-

• 其中 Web 伺服器可以是 Apache、Nginx，但是它除了提供靜態檔案之外，其餘的任務就只是做 reverse proxy 將 request 分發到應用程式伺服器。

• 安裝 nginx proxy server 配置：2.2 (via passenger RubyGems)

1
2
3
4
5
6
7
8
9
10
11

$ gem install passenger
$ chmod o+x /home/evenchange4/.rvm/gems/ruby-2.0.0-p195/gems/passenger-4.0.5/
$ chmod o+x /home/evenchange4/.rvm/gems/ruby-2.0.0-p195/gems
$ chmod o+x /home/evenchange4/.rvm/gems/ruby-2.0.0-p195
$ chmod o+x /home/evenchange4/.rvm/gems
$ chmod o+x /home/evenchange4/.rvm
$ chmod o+x /home/evenchange4
$ sudo apt-get install libcurl4-openssl-dev
$ rvmsudo passenger-install-nginx-module

• 設定 Nginx: $ sudo vi /opt/nginx/conf/nginx.conf ，Add a server block inside http block

1
2
3
4
5
6
7
8
9
10

...
   server {
      listen 80;
      server_name 127.0.0.1;
      root /home/evenchange4/test123/public;
      passenger_enabled on;
      rails_env development; # 切換
      #rails_env production;
   }
...

• 上方 block 可以透過 rails_env 來轉換環境。

• Create an Init Script to Manage nginx: Init script for Ubuntu 12.04

1
2
3
4

$ wget -O init-deb.sh http://library.linode.com/assets/1139-init-deb.sh
$ sudo mv init-deb.sh /etc/init.d/nginx
$ chmod +x /etc/init.d/nginx
$ sudo /usr/sbin/update-rc.d -f nginx defaults

• start/stop/restart nginx

1

$ sudo /etc/init.d/nginx start/stop/restart

• nginx status

1

$ passenger-memory-stats

三、環境設定 mysql

• Install（Mac Hombrew）:

1

$ brew install mysql

• Install（Ubuntu）:

1

$ sudo apt-get install mysql-server mysql-common mysql-client libmysqlclient-dev

• run mysql server

1
2
3
4
5

# mac
$ mysql.server start/stop
# ubuntu
$ sudo service mysql start

• login

1

$mysql -u root -p

• create database

1
2

mysql> CREATE DATABASE ass_development;
mysql> show databases;

• 檢查 mysql 是否支援中文 utf8

  1. 更改 /etc/mysql/my.cnf 詳細教學
  2. 砍掉 db

• 匯入 (必須需要有database name)

1

$ mysql -uroot -pmcc2012 NTUMB_development < code/2013-04-24_10_45.NTUMB_development

• new RailsApps project，選擇 I want to build my own application 來作設定。

• production

1
2
3
4
5

$ rake db:drop RAILS_ENV=production
$ rake db:create RAILS_ENV=production
$ rake db:migrate RAILS_ENV=production
$ rake db:seed RAILS_ENV=production
$ sudo /etc/init.d/nginx restart

四、部署設定 mina

• 因為 capistrano 非常缺乏文檔資料，加上不太支援 Rails4 ，所以挑選 mina 來幫助部署。
• 透過 mina 的輔助，可以將 source code（須先 commit 到 github上） 透過 ssh 連線自動部署到 hosting server 上。並且可以直接寫 rake script 的指令來隨心所欲的執行指令。
• 

1

$ mina init

• 如果 ssh 無反應，vi config/depoy.rb 加入:

1
2

# Password prompt in mina doesn't work
set :term_mode, nil

1

$ mina setup

• 自行到 server 編輯 database.yml

1
2
3

$ git commit -a -m "deploy"
$ git push
$ mina deploy

五、資安處理

• 安裝 denyhosts 防止 ssh 帳號被連續 try，並且加入白名單
• paperclip generate access_token and interpolate it

Reference

1. rvmsudo passenger-install-nginx-module
2. YamlDb

• 2013 夏，取得的站數為 96 站。
• download rawdata on github: mrt.json
• source code: github.com/evenchange4/mrt_opendata

步驟做法

1. 爬取捷運站的官方網站來取得每一個捷運站的地址。
   • 各站的 ID 可以從 www.trtc.com.tw html option‘s attribute value 取得。
2. 再使用 ruby gem "geocoder" 將地址來取得經緯度。
   • example: “10576臺北市松山區敦化北路338號” -> “25.063718, 121.549643”
   • 

捷運站坐標: mrt.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

[
  {
    "id": 1,
    "name": "松山機場",
    "number": "7",
    "address": "10576臺北市松山區敦化北路338號",
    "latitude": 25.063718,
    "longitude": 121.549643
  },
  {
    "id": 2,
    "name": "中山國中",
    "number": "8",
    "address": "10476臺北市中山區復興北路376號",
    "latitude": 25.0607843,
    "longitude": 121.5439248
  },
  ...

Reference

• www.trtc.com.tw
• ruby gem geocoder

• 課程： 101-2 NTU cloud computing special project
• Proposal title: Large-scale big data mining in cloud system
• Progress Report
• source code: github.com/evenchange4/CCSP
• datasets: movielen_dataset.csv (123Mb, preprocessed)
• 使用整合 R 與 Hadoop 的 package RHadoop (rmr2) 來實作 item-base 的推薦系統。
• 

工具

• RHadoop rmr2
• 演算法: Collaborative Filtering 協同過濾 (item-based)
• 安裝 Haddop 參考: Hadoop 第一次安裝就上手 CDH3
• 使用 Rhadoop 參考: R and Hadoop 整合初體驗

演算法與實作

• 本演算法參考 粉丝日志 RHadoop实践系列 來實作，特別感謝有這種中文的教學文章。
• 推薦結果 = 伴隨矩陣 (co-occurrence matrix) * 評分矩陣（score matrix）
• 
• map-reduce 實作步驟：
  1. 建立 item’s co-occurrence matrix，然後算出 frequence

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

train.mr<-mapreduce(
	train.hdfs, 
	map = function(k, v) {
		keyval(k,v$item)
	},
	reduce = function(k,v){
		m<-merge(v,v)
		keyval(m$x,m$y)
	}
)
step2.mr<-mapreduce(
	train.mr,
	map = function(k, v) {
		d<-data.frame(k,v)
		d2<-ddply(d,.(k,v),count)
		key<-d2$k
		val<-d2
		keyval(key,val)
	}
)

2. 建立 user's 評分矩陣

1
2
3
4
5
6
7
8
9
10

train2.mr<-mapreduce(
	train.hdfs, 
	map = function(k, v) {
		#df<-v[which(v$user==3),]
		df<-v
		key<-df$item
		val<-data.frame(item=df$item,user=df$user,pref=df$pref)
		keyval(key,val)
	}
)

3. equijoin co-occurrence matrix and score matrix

1
2
3
4
5
6
7
8
9
10
11
12

eq.hdfs<-equijoin(
	left.input=step2.mr, 
	right.input=train2.mr,
	map.left=function(k,v){
		keyval(k,v)
	},
	map.right=function(k,v){
		keyval(k,v)
	},
	outer = c("left")
)

4. 計算推薦的結果

1
2
3
4
5
6
7
8
9
10
11
12
13

cal.mr<-mapreduce(
	input=eq.hdfs,
	map=function(k,v){
		val<-v
		na<-is.na(v$user.r)
		if(length(which(na))>0) val<-v[-which(is.na(v$user.r)),]
		keyval(val$k.l,val)
	},
	reduce=function(k,v){
		val<-ddply(v,.(k.l,v.l,user.r),summarize,v=freq.l*pref.r)
		keyval(val$k.l,val)
	}
)

5. output list and score

1
2
3
4
5
6
7
8
9
10
11
12

result.mr<-mapreduce(
	input=cal.mr,
	map=function(k,v){
		keyval(v$user.r,v)
	},
	reduce=function(k,v){
		val<-ddply(v,.(user.r,v.l),summarize,v=sum(v))
		val2<-val[order(val$v,decreasing=TRUE),]
		names(val2)<-c("user","item","pref")
		keyval(val2$user,val2)
	}
)

6. result

1

from.dfs(result.mr)

Data preprocess

• input: csv file (user,item,rating ex: 1,101,5.0)
• 實際資料：MovieLens Data Sets
  • GroupLens Research has collected and made available rating data sets from the MovieLens web site (http://movielens.umn.edu). The data sets were collected over various periods of time, depending on the size of the set.
  • origin data sets MovieLens 10M - Consists of 10 million ratings and 100,000 tag applications applied to 10,000 movies by 72,000 users.
  • MovieID index file

1
2
3
4
5

1::Toy Story (1995)::Adventure|Animation|Children|Comedy|Fantasy
2::Jumanji (1995)::Adventure|Children|Fantasy
3::Grumpier Old Men (1995)::Comedy|Romance
4::Waiting to Exhale (1995)::Comedy|Drama|Romance
...

• format convert:
  • 原始格式：UserID::MovieID::Rating::Timestamp

1
2
3
4
5

1::122::5::838985046
1::185::5::838983525
1::231::5::838983392
1::292::5::838983421
...

- 轉換格式：`UserID,MovieID,Rating` save as `movielen_dataset.csv`

1
2
3
4
5
6
7
8
9

f = File.open("movielen_dataset.csv", "w")
File.open("ratings.dat").each do |l|
	temp = l.split("::")
	userID  = temp[0]
	movieID = temp[1]
	rating  = temp[2]
	f << "#{userID},#{movieID},#{rating}\n"
end
f.close

1
2
3
4
5

1,122,5
1,185,5
1,231,5
1,292,5
...

Result

…待補，vm localhost hdfs 跑好久

failed Reduce Tasks exceeded allowed limit

Reference

• 粉丝日志 RHadoop实践系列
• Mahout In Action
• Hadoop 第一次安裝就上手 CDH3
• R and Hadoop 整合初體驗

CSS framework

• Kule CSS Lazy 2
• Foundation 4
• Gumby 2
• Bootstrap
• BootMetro
• jQuery mobile
• jQuery Masonry
• Flat UI
• Ratchet: Prototype iPhone apps with simple HTML, CSS, and JS components

CSS

• icon Font Awesome
• 配色 Kuler
• 背景 Subtle patterns

Javascript

• RequireJS
  • 管理Script tag
  • TonyQ 實用 JavaScript 工具庫：RequireJS
• Arctext.JS
  • 彎曲文字

Ruby gem

• rmmseg-cpp
  • an re-implementation of rmmseg (Chinese word segmentation library for Ruby) in C++
  • demo: sentiminer
• acts_as_follower
  • Follow functionality
  • demo: sentiminer
• helios
  • An extensible open-source mobile backend framework
  • http://helios.io/
• omniauth-facebook
  • Facebook OAuth2 Strategy for OmniAuth 1.0
  • demo: emo-song
• koala
  • A lightweight, flexible library for Facebook with support for OAuth authentication, the Graph and REST APIs, realtime updates, and test users.
  • demo: emo-song

ios

• 聊天廣播 - iOS 與 HTML 利用 Socket.io
  • Developer-s-Note

R

• try R
• R 學習筆記

node.js

• wordfreq

Blog

• http://cofounderinc.com/
• http://kytu800.github.io/
• http://lucienlee.github.io/
• http://rosaniline.github.io/
• http://cytms.github.io/
• http://lovemew67.github.io/
• http://eva0919.github.io/
• http://michaelhsu.tw/
• http://code.kpman.cc/
• http://andikan.github.io/
• http://kytu.cc/blog
• http://abc123634.github.io/
• http://mnicnc404.github.io

Stringer -

A [work-in-progress] self-hosted, anti-social RSS reader.

是一個私人的 RSS reader 然後可以 host 在 heroku 上！蠻好奇他是怎麼設計的。

下載安裝使用

• stringer 在 https://github.com/swanson/stringer 有完整的步驟。

• demo: http://mreader.herokuapp.com/

呃，都說是私人的了，就沒辦法 demo 給你看囉 XD，不過可以看看截圖或是自己實際玩玩看：

學習的地方

• RSS(xml) parser：Feedzirra。
  後來發現原來我有玩過，勉為其難看一下以前的 blog 吧。懶得轉了
• UI：Twitter Bootstrap and Flat UI.
• heroku addons:add scheduler：因為 RSS 需要不停地去更新，但是等到使用者要看才再去 refresh 就慢了，所以 heroku 上有一個可以定期的執行 cmd 指令的套件可以使用，每隔一段時間就去執行一次。

  Scheduler: clock Run Jobs with Ease

  Scheduler is an add-on for running jobs on your app at scheduled time intervals, much like cron in a traditional server environment.

然後到 heroku 上的 scheduler dashboard 作設定：

• Rake：Ruby make：如此可以直接使用 cmd 指令來執行。
  • Rakefile：發佈和打包的 rake tasks

1
2
3
4

desc "Fetch all feeds."
task :fetch_feeds do
   FetchFeeds.new(Feed.all).fetch_all
end

- 
![rack](http://farm3.staticflickr.com/2793/4373500414_017aabf744_o.png)

• use subDomain CNANE：如此一來真的可以變成自己的 RSS reader 阿！（教學一樣在作者的 github 步驟上）

• 幽默：他在 github 上面有句話，看來有人臉很腫啊。

  When BIG_FREE_READER shuts down, your instance of Stringer will still be kicking.

Reference

• github https://github.com/swanson/stringer
• [Ruby][教學] 如何打包一個 Gem Blog
• 通过分析Rack和Rails的源代码, 讲解Rails的启动流程。
• Rack 與 Rack middleware

你應該開始使用 “OH MY ZSHELL!”

Shell? bash v.s. zsh

至於兩個 Shell 差別在哪？來看看官方 FAQ 說法：

2.5: Similarities with bash

The Bourne-Again Shell, bash, is another enhanced Bourne-like shell; the most obvious difference from zsh is that it does not attempt to emulate the Korn shell. Since both shells are under active development it is probably not sensible to be too specific here. Broadly, bash has paid more attention to standards compliancy (i.e. POSIX) for longer, and has so far avoided the more abstruse interactive features (programmable completion, etc.) that zsh has.

但我覺得差別最大的應該是 tab 鍵的應用。

Configuration Environment

1. Unix-like system: OSX
2. Linux: Ubuntu

Install oh-my-zsh

Step 1: github 下載 oh-my-zsh

1

curl -L https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh | sh

Step 2: 設定 PATH，railscasts Oh My ZSH

1

cat ~/.bash_profile >> ~/.zshrc

Step 3: 設定 zsh vi ~/.zshrc，下面是我目前的設定檔範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

# Path to your oh-my-zsh configuration.
ZSH=$HOME/.oh-my-zsh
# Set name of the theme to load.
# Look in ~/.oh-my-zsh/themes/
# Optionally, if you set this to "random", it'll load a random theme each
# time that oh-my-zsh is loaded.
ZSH_THEME="kennethreitz"
#ZSH_THEME="eastwood"
# Example aliases
# alias zshconfig="mate ~/.zshrc"
# alias ohmyzsh="mate ~/.oh-my-zsh"
# Set to this to use case-sensitive completion
# CASE_SENSITIVE="true"
# Comment this out to disable bi-weekly auto-update checks
# DISABLE_AUTO_UPDATE="true"
DISABLE_UPDATE_PROMPT="true"
# Uncomment to change how often before auto-updates occur? (in days)
# export UPDATE_ZSH_DAYS=13
# Uncomment following line if you want to disable colors in ls
 DISABLE_LS_COLORS="true"
# Uncomment following line if you want to disable autosetting terminal title.
# DISABLE_AUTO_TITLE="true"
# Uncomment following line if you want to disable command autocorrection
 DISABLE_CORRECTION="true"
# Uncomment following line if you want red dots to be displayed while waiting for completion
# COMPLETION_WAITING_DOTS="true"
# Uncomment following line if you want to disable marking untracked files under
# VCS as dirty. This makes repository status check for large repositories much,
# much faster.
# DISABLE_UNTRACKED_FILES_DIRTY="true"
# Which plugins would you like to load? (plugins can be found in ~/.oh-my-zsh/plugins/*)
# Custom plugins may be added to ~/.oh-my-zsh/custom/plugins/
# Example format: plugins=(rails git textmate ruby lighthouse)
plugins=(sublime)
source $ZSH/oh-my-zsh.sh
# Customize to your needs...
[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"
# Load RVM into a shell session *as a function*

Step 4: mac iterm2 設定 default zsh

自定義主題

主題除了在 github wiki 上挑選外，還可以查看圖示列表 http://zshthem.es/all/。而我最後挑選了 kennethreitz 作為我的主題，並且做了一些更動，以下是我的主題設定檔:

1

vim ~/.oh-my-zsh/themes/kennethreitz.zsh-theme

1
2
3
4
5
6
7
8
9
10
11
12

local return_code="%(?..%{$fg[red]%}%? ↵%{$reset_color%})"
PROMPT='
[%{$fg[blue]%}%~%{$reset_color%} ${return_code}]
%{$fg[green]%}%(!.#.$)%{$reset_color%} '
PROMPT2='%{$fg[red]%}\ %{$reset_color%}'
RPS1='$(git_prompt_info)'
ZSH_THEME_GIT_PROMPT_PREFIX="%{$reset_color%}%{$fg[yellow]%}["
ZSH_THEME_GIT_PROMPT_SUFFIX="]%{$reset_color%} "
ZSH_THEME_GIT_PROMPT_CLEAN=""
ZSH_THEME_GIT_PROMPT_DIRTY="%{$fg[red]%}*%{$fg[yellow]%}"

Plugin

sublime.plugin.zsh

舉一個例子我有 plugins=(sublime) ，然後來看看他的 zsh code 是怎麼寫的，然後讓我們加入幾行 code 使得可以使用 st3 來開啟最新版本的 sublime 3:

1

vim ~/.oh-my-zsh/plugins/sublime/sublime.plugin.zsh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

# Sublime Text 2 Aliases
local _sublime_darwin_paths > /dev/null 2>&1
_sublime_darwin_paths=(
    "/usr/local/bin/subl"
    "$HOME/Applications/Sublime Text 3.app/Contents/SharedSupport/bin/subl"
    "$HOME/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl"
    "$HOME/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl"
    "/Applications/Sublime Text 3.app/Contents/SharedSupport/bin/subl"
    "/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl"
    "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl"
)
if [[ $('uname') == 'Linux' ]]; then
    if [ -f '/usr/bin/sublime_text' ]; then
        st_run() { nohup /usr/bin/sublime_text $@ > /dev/null & }
    else
        st_run() { nohup /usr/bin/sublime-text $@ > /dev/null & }
    fi
    alias st=st_run
elif  [[ $('uname') == 'Darwin' ]]; then
    for _sublime_path in $_sublime_darwin_paths; do
        if [[ -a $_sublime_path ]]; then
            alias subl="'$_sublime_path'"
            alias st=subl
            break
        fi
    done
fi
alias stt='st .'
local _sublime_darwin_subl3=/Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl
if  [[ $('uname') == 'Darwin' ]]; then
  # Check if Sublime is installed in user's home application directory
  if [[ -a $HOME/${_sublime_darwin_subl3} ]]; then
    alias st3='$HOME/${_sublime_darwin_subl3}'
  else
    alias st3='${_sublime_darwin_subl3}'
  fi
fi
alias stt3='st3 .'

如此一來就可以透過指令來啓動 sublime囉，超級方便。

1
2
3

$ st .
# or
$ st3 .

不會動的，編成 sitemap.xml，會動的，用 rss 提交。

一、首先瞭解 RSS 跟 Atom 差別在哪？

1. ATOM is an IETF standard while RSS is not
2. ATOM feeds explicitly indicates the content while the browser is left to figure out whether the RSS feed contains plain text or escaped HTML
3. ATOM code is modular and reusable while RSS code is not
4. RSS still holds dominance in the syndication format due to its head start and popularity

二、他們怎麼知道我網頁的 RSS/Atom link?

像是通常你要訂閱 blog ，可能在 RSS reader 輸入你的網址就會自動搜尋，他是怎麼做到的？

其實偷看一下 <head> ，其中的 type 是 "application/rss+xml" 或 "application/atom+xml"

• new blog demo: http://evenchange4.github.io/atom

1
2
3
4
5

<head>
...
  <link rel="alternate" href="/atom.xml" title="Michael Hsu.tw" type="application/atom+xml">
...
</head>

• old blog demo: http://evenchange4.tumblr.com/rss

1
2
3
4
5

<head>
...
  <link rel="alternate" type="application/rss+xml" href="http://evenchange4.tumblr.com/rss">
...
</head>

三、那 Sitemap 呢？

Sitemap 的提交主要的目的，是要避免搜索引擎的爬蟲沒有完整的收錄整個網頁的內容，所以提交 Sitemap 是能夠補足搜索引擎的不足，進而加速網頁的收錄速度，達到搜尋引擎友好的目的。

• demo: http://michaelhsu.tw/sitemap

四、我碰到的問題，<head> 內的 link type RSS/Atom 錯亂？

當 RSS reader 自動搜尋 http://michaelhsu.tw/ 會偵測到 /rss 而不是 /atom，我覺得原因是我這個 domain name 之前是 DNS A(host) 到舊的 blog 那時候是用 rss，而現在新的 blog 是用 atom。
所以我覺得並不是因為 head 內寫錯了，而是有 CDN 的原因？待解決…
已解決，改成 feedburner 一勞永逸

1

<link rel="alternate" href="http://feeds.feedburner.com/michael-hsu-tw" title="Michael Hsu.tw" type="application/atom+xml">

五、怎麼產生 RSS/Atom.XML

我的 blog 是 hexo node.js base 的，npm 有一個相當簡單的 package hexo-generator-feed，設定教學文可以參考 kpman | code 的在hexo自訂rss。

Reference

• What is the difference between RSS and ATOM feeds? stackoverflow
• Sitemap / RSS / Atom, SEO stackoverflow
• 瀏覽器自動偵測網站是否具有RSS訂閱
• 如何有效正確的提交Sitemap給搜索引擎

當 R 尬上 Hadoop，到底會激盪出什麼樣的火花呢？下面實際跑過書上的範例來為您介紹，三種不一樣的整合方式任君挑選。

目錄

1. Hadoop & R
2. R and Streaming
3. Rhipe
4. RHadoop

安裝 R

想知道它是 Fedora, Debian, 還是Ubuntu 等等的 Linux distribution version：

1
2
3

$ cat /proc/version
# =>
Linux version 2.6.32-358.0.1.el6.x86_64 (mockbuild@c6b10.bsys.dev.centos.org) (gcc version 4.4.7 20120313 (Red Hat 4.4.7-3) (GCC) ) #1 SMP Wed Feb 27 06:06:45 UTC 2013

所以選擇安裝 Red Hat el6 => 官網竟然沒有，只好自己谷歌
安裝 R-2.15.2-1.el6.x86_64.rpm。

安裝 Hadoop

參考 Hadoop 第一次安裝就上手 CDH3。

範例資料來源

下載 hadoop book example: https://github.com/alexholmes/hadoop-book：

1

$ git clone git@github.com:alexholmes/hadoop-book.git

整合一：R and Streaming

可以使用任何程式語言來實作 map/reduce，只要規定好標準的input/output。
好處：在本機端就可以很簡單的做測試，不需要真正去涉及 MapReduce 就能 test，並且透過 cmd 來執行 hadoop job。
這邊透過兩個例子（map-only、Full MapReduce）來演示。

一、map-only job， problem: 計算 stocks 每日的平均

• 不 care join or group data in reducer。
• 其中 input csv file 的 element 為 Symbol,Date,Open,High,Low,Close,Volume,Adj Close
• 日平均算法：開盤(open)跟收盤(close)的平均。

step1: 首先先在本機端（Mac）上跑看看：

1
2
3
4
5
6
7

# cat ｜ 表示 把前一次運行的結果往後面丟。
$ cat test-data/stocks.txt | src/main/R/ch8/stock_day_avg.R
# => 
AAPL	2009-01-02	88.315
AAPL	2008-01-02	197.055
AAPL	2007-01-03	85.045
...

step2: 接著丟上 hadoop 來看看：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 首先，先新增一個環境變數，設定hadoop 的路徑
$ export HADOOP_HOME=/usr/java/hadoop-1.0.4/
# 移除 output file 內的資料
$ ${HADOOP_HOME}/bin/hadoop fs -rmr output
# 複製到 hadoop file system
$ ${HADOOP_HOME}/bin/hadoop fs -put test-data/stocks.txt \stocks.txt
# check 
$ ${HADOOP_HOME}/bin/hadoop fs -ls
# run hadoop mamp/reduce， -file: copy 到 distributed cache
$ ${HADOOP_HOME}/bin/hadoop \
  jar ${HADOOP_HOME}/contrib/streaming/*.jar \
  -D mapreduce.job.reduces=0 \
  -inputformat org.apache.hadoop.mapred.TextInputFormat \
  -input stocks.txt \
  -output output \
  -mapper `路徑要設`/src/main/R/ch8/stock_day_avg.R \
  -file `路徑要設`/src/main/R/ch8/stock_day_avg.R
# 我的路徑範例
$ /usr/java/hadoop-1.0.4/bin/hadoop   jar /usr/java/hadoop-1.0.4/contrib/streaming/hadoop-streaming-1.0.4.jar   -D mapreduce.job.reduces=0   -inputformat org.apache.hadoop.mapred.TextInputFormat   -input stocks.txt   -output output   -mapper src/main/R/ch8/stock_day_avg.R   -file src/main/R/ch8/stock_day_avg.R
# check ouput 從網頁看，或是 fs
$ ${HADOOP_HOME}/bin/hadoop fs -cat output/part*
# =>
AAPL	2008-01-02	197.055	
AAPL	2009-01-02	88.315	
AAPL	2007-01-03	85.045	
AAPL	2006-01-03	73.565	
AAPL	2005-01-03	64.035	
...

結果與本機端相同。

step3: 來看看 R 的 code on github ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# R process name
#! /usr/bin/env Rscript 
# 關掉 warnings
options(warn=-1)
# 切換 output 到 path
sink("/dev/null")
# standard input.
input <- file("stdin", "r")
# read n line，false 結尾為 empty，不需要是EOF
while(length(currentLine <- readLines(input, n=1, warn=FALSE)) > 0) {
   # split 後，unlist 把 list 轉換成 vector
   fields <- unlist(strsplit(currentLine, ","))
   lowHigh <- c(as.double(fields[3]), as.double(fields[6]))
   stock_mean <- mean(lowHigh)
   # 切換回來 output 到 terminal
   sink()
   # concatenate 和 ouput
   cat(fields[1], fields[2], stock_mean, "\n", sep="\t")
   
   # 切換回去
   sink("/dev/null")
}
close(input)

二、Full MapReduce job， problem: 計算 stocks 累積移動平均（CMA）

• CMA 算法為：同樣的公司不同日期的平均。

step1: 同樣地先在本機端（Mac）上跑看看：

1
2
3
4
5
6
7
8
9

# cat ｜ 表示 把前一次運行的結果往後面丟。
# map | runtime sort（用 linux cmd 指令模仿的） | reduce
$ cat test-data/stocks.txt | src/main/R/ch8/stock_day_avg.R | sort --key 1,1 | src/main/R/ch8/stock_cma.R
# => 
AAPL  68.997
CSCO  30.8985
GOOG  419.943
MSFT  44.6725
YHOO  70.971

step2: 接著丟上 hadoop 來看看：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$ export HADOOP_HOME=/usr/java/hadoop-1.0.4/
$ ${HADOOP_HOME}/bin/hadoop fs -rmr output
$ ${HADOOP_HOME}/bin/hadoop fs -put test-data/stocks.txt \stocks.txt
$ ${HADOOP_HOME}/bin/hadoop \
  jar ${HADOOP_HOME}/contrib/streaming/*.jar \
  -inputformat org.apache.hadoop.mapred.TextInputFormat \
  -input stocks.txt \
  -output output \
  -mapper src/main/R/ch8/stock_day_avg.R \
  -reducer src/main/R/ch8/stock_cma.R \
  -file src/main/R/ch8/stock_day_avg.R \
  -file src/main/R/ch8/stock_cma.R
$ ${HADOOP_HOME}/bin/hadoop fs -cat output/part*
# =>
AAPL  68.997  
CSCO  49.94775  
GOOG  123.9468  
MSFT  101.297 
YHOO  94.55789

但其實，答案跟預期不同，似乎算錯了！

step3: mapper 的 code 同 problem 1 的 mapper，所以我們來看看 R reducer 的 code on github：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

#! /usr/bin/env Rscript
options(warn=-1)
sink("/dev/null")
# R 定義 function，input means：vector
outputMean <- function(stock, means) {
  stock_mean <- mean(means)
  sink()
  cat(stock, stock_mean, "\n", sep="\t")
  sink("/dev/null")
}
input <- file("stdin", "r")
prevKey <- ""
means <- numeric(0)
while(length(currentLine <- readLines(input, n=1, warn=FALSE)) > 0) {
  fields <- unlist(strsplit(currentLine, "\t"))
  key <- fields[1]
  mean <- as.double(fields[3])
  if( identical(prevKey, "") || identical(prevKey, key)) {
    prevKey <- key
    means <- c(means, mean)
  } else {
    outputMean(prevKey, means)
    prevKey <- key
    
    # 這邊 sample code 寫錯，發現新的 key 應該要用新的 
    means <- numeric(0) vector
    means <- c(means, mean)
  }
}
if(!identical(prevKey, "")) {
  outputMean(prevKey, means)
}
close(input)

注意 line 33，更改後才會得到正確的答案。

整合二：Rhipe

Client-side R and Hadoop working together。
「R and Hadoop Integrated Processing Envirnment」的縮寫，在 R 裡面運行 Hadoop job。

一、安裝 Rhipe

先安裝 Protocol Buffers，下載protobuf-2.4.1.tar.gz，一定要這個版本，記得看 readme 安裝方法。

Protocol Buffers are a way of encoding structured data in an efficient yet extensible format. Google uses Protocol Buffers for almost all of its internal RPC protocols and file formats.
think XML, but smaller, faster, and simpler.

1
2
3
4
5

$ cd protobuf-2.4.1
$ ./configure
$ make
$ make check
$ make install

挑一個最多人下載的版本 Rhipe_0.69.tar.gz。

1
2
3
4
5
6
7
8
9
10

$ export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig
$ export HADOOP=/usr/java/hadoop-1.0.4
$ export HADOOP_LIB=$HADOOP/lib
$ export HADOOP_CONF_DIR=$HADOOP/conf
$ /sbin/ldconfig
$ R CMD INSTALL /root/Downloads/Rhipe_0.69.tar.gz
# check install
$ R
> library(Rhipe)

二、同 problem 2 計算 stocks 累積移動平均（CMA）

1
2
3
4
5

$ export HADOOP_HOME=/usr/java/hadoop-1.0.4/
$ ${HADOOP_HOME}/bin/hadoop fs -rmr output
$ ${HADOOP_HOME}/bin/hadoop fs -put test-data/stocks.txt /tmp/stocks.txt
$ export HADOOP_BIN=/usr/java/hadoop-1.0.4/bin
$ hadoop-book-master/src/main/R/ch8/stock_cma_rhipe.R

接著看一下 整合 rhipe 的 R code on github

三、問題討論

1. 亂碼？
2. 結果數據與第一個整合不一樣：已解決，問題出在整合一的 sample code 算錯。

整合三：RHadoop

相較簡單的整合 Client-side R and Hadoop，同Rhipe可在 R 裡面運行 Hadoop job。

RHadoop其中包含了三個元件

1. rmr (整合 R、Hadoop) ，範例只專注在 rmr 上。
2. rdfs（R 的 HDFS 界面）
3. rhbase（R 的 Hbase 界面）

一、安裝

前置套件安裝

1
2
3
4
5
6
7
8
9
10
11
12
13

$ R
> install.packages("RJSONIO")
> install.packages("itertools") 
> install.packages("digest")
> q()
$ R CMD javareconf
$ R
> install.packages("rJava")
> install.packages("Rcpp")
> install.packages("functional")
> install.packages("stringr")
> install.packages("reshape2")

安裝 rmr2，下載 rmr2-2.2.0，中途可能會需要你安裝 R 套件。

1

$ R CMD INSTALL rmr2_2.2.0.tar.gz

二、同 problem 2 再來計算一次 stocks 累積移動平均（CMA）

1
2
3
4

$ export HADOOP_HOME=/usr/java/hadoop-1.0.4/
$ ${HADOOP_HOME}/bin/hadoop fs -rmr output
$ $HADOOP_HOME/bin/hadoop fs -put test-data/stocks.txt stocks.txt
$ hadoop-book-master/src/main/R/ch8/stock_cma_rmr.R

遇到 argument ERROR：

1
2
3

Error in mapreduce(input = "stocks.txt", output = "output", textinputformat = rawtextinputformat,  : 
  unused argument(s) (textinputformat = rawtextinputformat, textoutputformat = kvtextoutputformat)
Execution halted

因為新版 rmr2 format參數 改了，請改成 vi src/main/R/ch8/stock_cma_rmr.R on github:

1
2
3
4
5
6
7
8
9
10
11

#! /usr/bin/env Rscript
library(rmr2)
...
mapreduce(
  input = "stocks.txt",
  output = "output",
  input.format = "text",
  output.format = "text",
  map = map,
  reduce = reduce
)

最後，

1
2
3
4
5

# check output
$ ${HADOOP_HOME}/bin/hadoop fs -cat output/part*
# => 
AAPL	88.315
GOOG	428.875

發現是 map 的 input 格式出錯，更改 sample code：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

#! /usr/bin/env Rscript
library(rmr2)
map <- function(k,v) {
  fields <- unlist(strsplit(v, ","))
  keyval(fields[1], mean(as.double(c(fields[3], fields[6]))))
}
reduce <- function(k,vv) {
  keyval(k, mean(as.numeric(unlist(vv))))
}
mapreduce(
  input = "stocks.txt",
  output = "output",
  input.format = "text",
  output.format = "text",
  map = map,
  reduce = reduce
)

問題討論

1. 為什麼只有兩筆資料？ 是 input format 錯誤??

Reference

• Hadoop.in.Practice.Oct.2012.pdf ch8
• R unlist
• R Input/Output
• R cat
• Nick Hsu 101-2 Progress Report
• rhadoop3-rhadoop-mapreduce blog

是什麼：

1. build scalable network applications using JavaScript on the server-side.
2. 據 JavaScript Runtime 寫成，因為大部份都是 C code ，所以很快。

可以做什麼：

1. Websocket Server （像聊天室）
2. Fast File Upload Client
3. Any Real-Time Data Apps

不是什麼：

1. A Web Framework
2. Multi-threaded（可視為 single threaded server ）

Blocking Code vs Non-Blocking Code（callback）

• Blocking

一般為了做:

1. Calls out to web services
2. Reads/Writes on the Database
3. Calls to extensions

1
2
3

var contents = fs.readFileSync('/etc/hosts');
console.log(contents);
console.log('Doing something else');

• Non-Blocking（callback）

1
2
3
4

fs.readFile('/etc/hosts', function(err, contents) {
  console.log(contents);
});
console.log('Doing something else');

語法

1
2
3

fs.readFile('/etc/hosts', function(err, contents) {
  console.log(contents);
});

• Same as

1
2
3
4

var callback = function(err, contents) {
  console.log(contents);
}
fs.readFile('/etc/hosts', callback);

Event

將 Event 附加在 DOM 上。

Websocket 101

What

1. 因為 bidirectional communication 的需求。
2. 如果兩邊終端（endpoints）非瀏覽器則不一定需要使用 Websocket 這個 protocol。
3. work with existing HTTP infrastructure，所以受到很多限制。
4. 不同於單純的 raw TCP connection，因為命名的關係常常聯想成傳統的 socket。事實上他在於訊息的傳輸是根據 UDP，但卻有 TCP 的 reliable，

websocket adds on top of that:

1. upgrades from HTTP 1.1
2. Through the HTTP handshake

data structure

為了要存放 non-blocking message，使用 Redis。

Redis is an in-memory database that persists on disk. The data model is key-value, but many different kind of values are supported: Strings, Lists, Sets, Sorted Sets, Hashes