作者:
Linux (Windows)
2016-10-17 10:12:16Hi 各位大大們早安!
今天來分享一個使用 WebSocket 的應用作品,這主要是架構在 Firebase 的應用!
DEMO:https://livemaps.ioa.tw/
LiveMaps 是一個即時地圖聊天室,讓你在世界上任何位置都可以發出自己的感想動態
這也是一個純前端技術的網站
仰賴 Firebase 的 Realtime 的特性,並且用於 Google Maps 上
讓使用者的定位可以即時分享,同時間也可以發佈動態!
現階段只是初樣的 Prototype
之後會加入 個人聊天室、上傳照片、Mobile App 等功能!
GitHub:https://github.com/comdan66/livemaps/
基本的 Google Maps JavaScript API 的應用這邊就不多介紹了,
這次的練習主要著重在 Firebase 的應用,藉由 Hosting 來取得 Https 的協定
然後在建立起專案,並且利用 Realtime Database 來實作即時性的功能。
Firebase 的 Hosting 可以將自己的 Domain 用 CNAME、A 記錄指向過來
使得專案擁有自己客製化的 Domain/Sub Domain 並且是 Https 的協定
而 Hosting 功能在 Firebase 的操作上並不會太困難
只要依照其所顯示的步驟驗證完網域所有權後即可完成。
Realtime Database 是項 Firebase 儲存資料的服務,他是以 JSON 的方式
用 key-value 方式儲存,用過 NoSQL 的朋友或許會比較適應這樣的 Database
因為儲存格式是 JSON 的關係
所以在一開始的設計就不能以關聯式資料庫的思維角度下去設計囉。
CRUD 的基本功能撰寫這邊也不做介紹,基本上官網都有範例以及說明囉
其中包含了 iOS、Android、JavaScript 的支援,所以更可以製作成 Mobile App
而下一階段我也將考量使用 iOS 來實作一次 LiveMaps。
官方資源也不僅於 Sample,在官方 GitHub 也可以看到多樣的 Library
其中常見的 firebaseui-web、GEO.. 等
服務都是由官方維護的,所以在家接功能上會更加方便。
以網頁版來說,登入系統可以由 firebaseui-web 來串接
在地圖上更可以用 geofire-js 來實作,geofire 就有豐富的經緯度範圍運算
可以快速的撈出範圍內的點,不過對於 Database 的 JSON 格式架構就要符合其規範
第一版的 LiveMaps 就是使用 geofire 實作,但是因為功能需求,所以暫時先捨棄
而 firebaseui 提供了各種不同的 OAuth 登入,
可以配合 Authentication 製作登入系統
不過在第二版製作時也暫時拿掉,主要是因為想加快登入時間問題
所以暫時只使用 Facebook 的 SDK 實作 OAuth 登入。
網頁的定位方式,是採用 navigator.geolocation 的 watchPosition
取得使用者瀏覽器裝置位置,因為 Firebase 提供了 Https 的服務
故在 Chrome 瀏覽器上就可以取得使用者位置
而且使用了 watchPosition 並且搭配使用 enableHighAccuracy
所以取的的位置會較為精準
但也可能會有誤差值,故使用上可能會有使用者發生位置不正確的狀況
待下一版本解決。
更多實作心得:https://livemaps.ioa.tw/about.html
更多作品:http://www.ioa.tw/
以上心得歡迎分享~~
作者:
ckvir (ckvir)
2016-10-17 10:14:00手機一直出現初始化不能用
我記得當初不用 firebase 因為收費太貴了, google收購後不知道有沒較便宜
作者: SmallDruid (小d) 2016-10-17 11:48:00
推一個
作者:
qq1217 (...)
2016-10-17 12:19:00推
Firebase has reached its Peak Connections limit
作者:
carbeso (←這念作卡比獸)
2016-10-17 16:02:00好多人線上幫忙壓測了 XD
作者:
pooznn (我~~~是來被打臉滴!!!)
2016-10-17 16:16:00免費的只有100個連線數 想靠這服務做APP賺錢的勢必要付費
作者:
kanx (joke 版 讚!!!!!!!!!!!!!)
2016-10-17 17:42:00so cool.
作者:
h5904098 (LBJ IS GOD)
2016-10-17 18:39:00好有趣喔!
作者: sameil (charles) 2016-10-17 20:06:00
這id有點猛
作者:
alog (A肉哥)
2016-10-17 20:29:00Fire base 付費還好吧 東西如果上線了爆量 光scale跟調校、latency的成本跟時間 你有把握壓的比他低嗎
作者:
rexhuang (BlueCancer)
2016-10-17 21:52:00讚~~
作者:
now99 (陳在天)
2016-10-17 21:54:00可以在上面把妹了
作者:
angusyu (〒△〒)
2016-10-17 22:21:00徵到要去當兵的老婆
作者:
rollr (衛生紙的心情)
2016-10-17 23:45:00這 ID !
作者: matthewka 2016-10-18 00:32:00
推
作者:
penolove (醜獸的女朋友)
2016-10-18 01:22:00推ID
作者:
ousapas (komica123)
2016-10-18 01:52:00cool
作者: k7741118 (k7741118) 2016-10-18 08:18:00
Cool
作者:
femlro (母豬教謀神異端審問官1.5)
2016-10-18 12:18:00剛剛連線超過一分鐘以上還沒連上@@
作者: ken0110xx 2016-10-18 12:26:00
推XD
作者:
chter ((分身別查了XD))
2016-10-18 15:34:00幫測bug
作者:
makemyday (make my day)
2016-10-19 20:34:00推 感覺可以用在附近地區互相支援
作者:
sasoman (乾 盜帳號勒)
2016-10-20 11:02:00推 好有趣
作者: dali17dali17 2016-10-22 10:45:00
推ID推firebase
作者:
ID3238 (默默)
2016-11-03 12:05:00推