楼主:
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推