iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 24
0

嗨!各位朋友大家好,中秋節快樂,烤肉記得吃飽飽,我是阿圓,一樣有請今天的one piece:

(海賊王中最神奇的生物!海賊王中的action cable!)

學 rails 到至今,action cable 一直都是一個蠻吸引我的東西,現在就讓我們來揭開他的神秘面紗!
首先,先來看看官方文件中 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 回來,那娜美就一直沒收到香吉士的訊息(幫香吉士QQ),這就是一般的 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 pollingstreaming

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
Ruby on Rails 實戰聖經
跟著 DHH 練習 ActionCable


上一篇
Day_23 active job ?
下一篇
Day_25 action cable? (2) Web Socket ?
系列文
Ruby on Rails 新手的30個問題!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言