2016 白沙屯媽祖南下進香 GPS 系統 白沙屯媽祖南下北港遶境 GPS 定位實作,是我目前 Google Analytics(GA) 即時流量 最高也是 Server Loading 最大的任務之一,實作過成功嘗試多樣的系統架構,以達成最低成本、最高效率的方式服務信徒。 此項任務難點會在活動期間會有大量的 Request 打進 Server,所以勢必會對伺服器造成…

2016 白沙屯媽祖南下進香 GPS 系統

白沙屯媽祖南下北港遶境 GPS 定位實作,是我目前 Google Analytics(GA) 即時流量 最高也是 Server Loading 最大的任務之一,實作過成功嘗試多樣的系統架構,以達成最低成本、最高效率的方式服務信徒。

此項任務難點會在活動期間會有大量的 Request 打進 Server,所以勢必會對伺服器造成極大的負擔,所以每個細節的效能都必須兼顧!因為考慮到 Request 數量龐大,於是就採用前後分離的方式,先進行第一階段的「節能」。

前後分離顧名思義,就是將前端的 HTML、JavaScript、css 與後端的 php、MySQL 拆開來,將前端的部分放置在 GitHub 的 GitHub.io 上,因為 GitHub.io 是一個可以提供大量靜態當案的服務又是免費的,所以當然當作首選!若是要採用其他平台也可以,不過當然要能撐得住大流量!

接著串接後端資料的方式則是採用 AJAX 技術,利用 AJAX 的方式,每分鐘回去撈一次最新的位置資訊,此架構就能達到系統只需要產出 Json 格式的輸出即可,必要時更可以針對 API 的輸出做 File Cache 亦或者 Memory Cache 來提升後端效能。

不過當活動開始時,GA 即時人數達到 1,000 人左右時,漸漸地出現後端系統 Loading 過大的狀況,經由檢查後端伺服器在記憶體的部分發現高達 80%(1GB),所以猜測可能是 AJAX 的 Request 量過大, 1,000 人同在線上,每分鐘各發送一次 Request,所以難免對系統負擔過大,不過後端硬體設備我採用 AWS t2.micro 免費版本,能撐到這樣的流量已經算不錯了,但為了讓網頁能夠更加暢通,於是就做了部分架構更動。

GA 紀錄即時線上人數高達 1,900 人

在 AWS 上有一項不錯的服務,可以提供巨大的空間以及龐大的流量輸出的服務叫做 Simple Storage Service(S3),在這個系統上新用戶一樣可以一年免費,所以使用上依然免費!

那要如何將 GitHub.io 與 S3 結合,更又要可以有 API 即時的串接呢?其實我採用的做法是在伺服器上寫了一個排程,在 每分鐘 亦或者 半分鐘 將 API 的結果(路徑)以 Json 檔案格式上傳到 S3 上面去,再設定一下 S3 的 Cross-Origin Resource Sharing,加入設定要分享的 Domain,如此一來在 GitHub.io 的前端 JavaScript 即可以透過 AJAX 的方式取得 S3 上面的 Json 資料囉!若要做到更有效的節能更可以搭配 CDN 設定 TTL(Time To Live)。

Google Maps 的 Heatmaps 應用

雖然這個做法比起 WebSocket 來的不及時,但是時間誤差值充其量也才差 2分鐘內,就活動的需求已經足夠了!有了這個架構之後,AJAX 都去 S3 上面取得資料了,後端自然輕鬆許多,而專案更能夠依照此架構延伸更多功能,例如:聊天室、使用者分佈.. 等,在這樣的架構下 GA 紀錄曾經高達 2,000 人同時在線上也不會有任何的操作不順或者 Lag 的問題!。

此專案目前沒開啟 Live Demo,主要原因是目前活動已經結束,另外則是 GPS 數據來源網站目前未授權,所以這部分大家若有興趣,可以直接到我 GitHub 上去了解程式碼部分。

相關參考

2016 大庄媽 GPS 系統 - OA Wu's Blog
2016 大庄媽 GPS 系統
2016 大庄媽 GPS 系統2016 大庄媽 GPS 系統 大庄媽組南下北港進香的活動今年也特別的加入了 GPS 定位的功能,而這次協同開發的夥伴是大庄媽交流協會的楊協達先生,但其實架構與白沙屯南下進香的 GPS系統略有所不同! 這個專案我主要協助製作 HTML、JavaScript、CSS 的撰寫,其中包含了版型、Google Maps JavaScript API 的串接,專案這次使用 G…
2016 北港迎媽祖 - OA Wu's Blog
2016 北港迎媽祖
2016 北港迎媽祖2016 北港迎媽祖 北港迎媽祖,這是個為我的家鄉的活動製作網站,幾本上是屬於義務性幫忙、沒盈利的非官方服務。每年我都會在 北港農曆三月十九迎媽祖 前數個月開始製作,目前為止這網站我算是不斷自我突破吧!整體從 設計、後端、系統、切版、攝影、上稿,基本上都是我嘗試一個人完成!以下主要分享一下設計、前端、後端以…
2016 六房媽祖過爐 GPS 系統 - OA Wu's Blog
2016 六房媽祖過爐 GPS 系統
2016 六房媽祖過爐 GPS 系統2016 六房媽祖過爐 GPS 系統 雲林六房媽一年一度過爐活動今年也與我的 GPS 系統結合,六房媽在幾年前早已經有在做繞境定位,剛好有朋友介紹讓我與神之路關的開發團隊認識,所以這次的六房媽過爐活動就與林啟元先生合作開發,首次與 ASP.NET 後端結合。 此次的合作開發是採用前後端分離的做法,這次協助的部分主要是針對前…
Pokémon Go 補給站地圖 - OA Wu's Blog
Pokémon Go 補給站地圖
Pokémon Go 補給站地圖Pokémon Go 補給站地圖 這是一個 Pokémon Go 進化後 CP 推測工具,可以快速查詢寶可夢進化後的 CP 範圍值,同時藉由網友互助回報而建立的全台寶可夢巢穴位置,讓大家可以查詢各精靈在台灣的分佈,若大家想要共同編輯巢穴文件可與網站作者聯絡,同時也可以查詢全台灣的補給站、道館的分佈。 若要進一步的查詢各精靈的精準數…
吳政賢 個人簡歷 OA Wu LiveCoding.tw