TogetherJS 介紹 (下)

接著要大家解決《TogetherJS 介紹 (上)》所遇到的問題。還沒看過上篇的人先去複習一下吧!

添增 TogetherJS

TogetherJS 亦具備「交換中心 (Hub)」,可在作業期間處理所有人之間的訊息。此交換中心不會解讀這些訊息,而是來回傳遞所有人的訊息,甚至可交換不同頁面上的訊息。TogetherJS 亦可讓 App 傳送自訂訊息,例如:

可傳送訊息 (所有訊息均必備type) 並可監聽:

訊息的資料型態必須位於命名空間 (Namespace) 之內,如此 App 的訊息才不致於意外覆蓋 TogetherJS 的訊息。

為了同步所有人的繪圖作品,我們必須觀看所有描繪出來的線條,再將這些線條傳送給其他人:

傳送這些線條之前,先確認 TogetherJS 是否正實際運作 (TogetherJS.running)。而我們傳送的訊息應該具備完整資訊。

接著就監聽這些訊息:

由於 TogetherJS 只有在執行狀態才能呼叫 Listener,因此在註冊此 Listener 時,不需顧慮 TogetherJS 是否執行中。

這樣就能顯示大家的繪圖作品並共同合作了。不過目前還有個問題必須解決:如果在我開始畫圖之後,你才加入我的繪圖區,就會變成你只能看到我剛畫出來的線條,而看不到加入之前我已經畫過的線條。

要解決這個問題就必須監聽 togetherjs.hello 訊息。只要用戶端首次抵達新的頁面,就會送出此 togetherjs.hello 訊息。在我們看到該訊息之後,就接著將繪圖區的畫面傳送給其他人:

現在只要監聽此新的 init 訊息即可:

只要有 TogetherJS 的幾行程式碼,就能設計出即時繪畫的 App。我們還是必須自行撰寫其中某些程式碼,但 TogetherJS 可幫我們處理下列事情:

  • 提供 URL 以利使用者開始工作階段並相互分享
    screenshot-invite
  • 建立 WebSocket 連線並連至我們的「交換中心伺服器」,以能在用戶端之間來回傳遞訊息
  • 讓使用者設定自己的名稱與頭像,並能看到參與此工作階段的其他人
    screenshot-name-avatar
  • 時時追蹤是誰在線上、是誰已離線、是誰閒置離開
  • 同樣提供簡易又必備的功能,如打字交談
    screenshot-chat
  • TogetherJS 亦將處理工作階段的初始化與追蹤作業

此範例尚未達到的功能:

  • 我們使用了固定尺寸的繪圖區,所以不需要考慮 2 個用戶端使用不同解析度的情況。一般情況下,TogetherJS 可處理不同的用戶端,且排版方式可適用不同的解析度,甚至可搭配適應性設計 (Responsive design)。要修正此問題的方法之一,就是使用固定的長寬比例,而所有繪圖定位均使用高度/寬度的百分比顯示方式。
  • 現在的繪圖工具還不夠好玩!如果我正在畫 1 隻灰色兔子,你應該也要能畫 1 隻棕色獅子!繪圖的色彩功能尚待加強。
  • 例如「清除繪圖區」的功能尚未同步。
  • 我們並未儲存或載入任何現成圖片。一旦儲存並載入繪圖應用程式,你可能就必須深入思考所應該同步的功能。如果我完成了一幅圖畫、儲存完畢,再將圖畫轉入網站並加入你的工作階段,你的圖畫會不會覆蓋我的圖畫呢?若能將各幅圖畫置於專屬網址,就能清楚知道大家目前要一起編輯的圖畫。

想了解更多?

 

你想到任何適用 TogetherJS 的網站嗎?快提供意見給我們!

 

原文連結:https://hacks.mozilla.org/2013/10/introducing-togetherjs/

 

 

您可能也會喜歡

目前找不到相關文章

共 2 則讀者回應

  1. 參照: TogetherJS 介紹 (上) | 訊息中心 | Mozilla Taiwan

  2. 參照: HTML5 遊戲開發資源 (下) | 部落格 | Mozilla Taiwan

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *