同步的畫布- 隨意輸入一個暱稱, 線上玩家名稱會列在左方.
- 觸碰右方的白色區, 會以左上方的顏色畫隨機大小的圓(半徑0~10). 每個連上這個網頁的使用者共用同一個畫布, 每個人看到的畫布結果是一樣的, 也就是每個人畫的圓都會顯示在其他人畫布上.
- 點擊左上方的顏色顯示, 會清除右方的畫布. 全使用者的畫布都會被清除.
- 畫布的結果會儲存於server上.
概念:
後端使用
firebase, 同步資料.
- 觸碰繪圖區時, 產生繪圖命令, 上傳firebase.
- 繪圖命令傳到firebase, 經由firebase廣播到同樣開啟此網頁的使用者.
- 每個使用者接到畫圓命令後, 才在畫布上畫圓. 由於每個人接到的命令順序是相同的, 因此看到的繪圖結果也是一樣的.
儲存於server上的並不是畫布結果本身, 而是一連串的繪圖命令, 這些繪圖命令執行完, 才還原出上次的畫布結果.
可以說是另一種"聊天室", 聊天室傳送的是文字訊息. 這個demo傳送的是繪圖指令.
更新:
LINE