---
title: 12th 鐵人賽 Day_24 action cable(1) 早期推播技術 ?
tags: 12th 鐵人賽
---
# 12th 鐵人賽 Day_24 action cable(1) 早期推播技術 ?

嗨！各位朋友大家好，打給後，歹嘎吼，胎尬喉，我是阿圓，一樣有請今天的one piece：
(海賊王中最神奇的生物！海賊王中的action cable!)

學 rails 到至今，action cable 一直都是一個蠻吸引我的東西，現在就讓我們來揭開他的神秘面紗！
首先，先來看看[官方文件](https://guides.rubyonrails.org/action_cable_overview.html)中 action cable 的介紹：

>Action Cable seamlessly integrates WebSockets with the rest of your Rails application. It allows for real-time features to be written in Ruby in the same style and form as the rest of your Rails application, while still being performant and scalable. It's a full-stack offering that provides both a client-side JavaScript framework and a server-side Ruby framework. You have access to your full domain model written with Active Record or your ORM of choice.

簡單來說就是：整合了後端 Rails 和前端 JavaScript 呼叫介面，用以無縫接合 Web Socket ，以達到即時通訊的目的。至於為何即時通訊要特別提出來說呢？

# 即時通訊？推播技術？

先幫大家複習一下 routes 跟 session 篇裡面提到，每當瀏覽器發送一次request，server就會傳回一次response。

假設今天香吉士跟娜美用網路在聊天：
"親親娜美，點心要吃什麼？"

此時，香吉士這邊發了一個 request 到 server ，server也收到了，將香吉士的訊息寫入了資料庫。

但是，此時卻一直停留在同一頁的網站，並沒有重新打一個要求新資料的 request 到 server ，也就一直都沒有 response 回來，那娜美就一直沒收到香吉士的訊息(幫香吉士ＱＱ)，這就是一般的 HTTP 的狀況。

而因為HTTP協定的限制，在早期在還沒有Web Socket時，要實現推播技術大概有幾個方式：

## Polling 輪詢
簡單來說就是利用 javascript 中的 `setInterval()`方式來實現

setInterval(function(){
    $.ajax({ url: "server", success: function(data){
        //Do something to update your view
    }, dataType: "json"});
}, 30000);

或用 `setTimeout()`的方式：

(function poll(){
   setTimeout(function(){
      $.ajax({ url: "server", success: function(data){
        // Do something to update your view

        //Setup the next poll recursively
        poll();
      }, dataType: "json"});
  }, 30000);
})();

上面的情況是，每隔30秒便向server 發送一個request，要求新的資料。
優點是**方便實作**、**沒有跨瀏覽器的問題**、也**不需要其他的特殊伺服器**。
而致命的缺點就是，就算沒有新資料也是會打 request 跟 response，造成**頻寬的浪費**

## Comet
Comet 的中文是彗星，簡單來說就是延長打 request 或 response，的時間，像彗星的尾巴一樣。一般實作方式有兩種：`long polling`、`streaming`

### streaming
簡單來說就是延長response的時間，再打 response 的時候，持續性的傳送新資料到client端。實作方法的話就是把迴圈丟到 server 端上做。而實作的方式通常是利用html的`<ifram>` tag。

優點是這樣就不會有頻寬浪費的問題，但缺點是你的網站可能會一直處於加載狀態。(不過後來google團隊使用一個稱為「htmlfile」的 ActiveX 解決了在 IE 中的加載顯示問題)

### Long Polling 長輪詢
至於`Long Polling`呢，是利用 ajax 的方式，將 request 的時間延長，直到 server 有回傳新資料才結束這個request，收回response。
一樣解決了頻寬的問題，也比較沒有瀏覽器相容性的問題(聽說IE不支援啦，不過兩方都是過去式了XD)，可以說是很好的實作方法。

明天我們繼續來介紹web socket協定！

感謝各位看到這邊，若有任何建議，請各位不吝指教！我們明天見！

---

#### 參考文章
[Polling, Comet, Long Polling, WebSocket](http://ryanlu-blog.logdown.com/posts/207766-polling-comet-long-polling-websocket)
[Ruby on Rails 實戰聖經](https://ihower.tw/rails/actioncable.html)
[跟著 DHH 練習 ActionCable](https://mgleon08.github.io/blog/2018/06/21/rails-action-cable/)