TogetherJS 介紹 (上)

何謂 TogetherJS

本篇文章將介紹 Mozilla Labs 所提供的即時協作 (Real-time collaboration) 工具 ─ TogetherJS

將 TogetherJS 添增至現有網站之後,即可加入即時合作功能。若有 2 名以上的使用者正在瀏覽網站或 Web App,則可看到彼此的滑鼠游標位置與點擊動作,另可互相追蹤瀏覽行為、一同編輯表單或觀看影片,並透過音訊或 WebRTC 的方式交談。

TogetherJS 的功能包含:

  • 觀看他人的滑鼠游標與點擊動作
  • 觀看捲動位置
  • 觀看他人瀏覽的網頁
  • 打字交談
  • 以 WebRTC 進行語音對話
  • 同步填寫表單 (寫入文字、勾選方塊等)
  • 同步播放/暫停/追蹤影片
  • 於單一網站上,可跨多個頁面保存工作階段 (Session)

整合方式

不需另外修改網站,即可發揮 TogetherJS 的多項功能。TogetherJS 將檢查文件物件模型 (Document Object Model,DOM) 而決定所應進行的作業 ─ 偵測表單欄位、偵測如 CodeMirrorAce 的編輯器,並將其工具列置入你的網頁中。

如果你想玩玩看 TogetherJS,只要將下列指令碼加入你的網頁即可:

接著為使用者建立 1 組按鈕,即可開啟 TogetherJS:

如果你想直接體驗 TogetherJS 的功能,則 jsFiddle 也已納入 TogetherJS 供你參考:

screenshot-jsfiddle-highlight

只要點選「Collaboration」就會啟動 TogetherJS。接著將說明應如何在自己的 Fiddle 中使用 TogetherJS。

擴充自己的 App

TogetherJS 在檢查過 DOM 之後,即可決定所該進行的作業,但無法同步你的 JavaScript App。舉例來說,如果你的 App 有 1 份項目清單必須透過 JavaScript 更新,則該清單不會在使用者之間自動同步。大家有時會以為清單能自動更新,但就算我們跨 2 個網頁同步了 DOM,也還是無法同步底層的 JavaScript 物件。相較於 FirebaseGoogle Drive Realtime API 等產品,TogetherJS 並不具備即時的永久儲存功能。你的儲存與網站功能都由你自己決定,我們只會同步瀏覽器本身的工作狀態。

因為如此,如果你的 App 必須執行很多 JavaScript,就必須再加進額外程式碼以保持工作狀態的同步。而我們現正努力簡化此過程!

我們以簡單的繪圖 App 為例,並將之發佈作為 Fiddle 的完整範例隨你盡情把玩。

screenshot-fiddle-example

簡易的繪圖 App

我們先從簡單的繪圖 App 開始吧。先來個簡單的繪圖區 (canvas):

接著完成某些設定:

我們在繪圖區上使用 mousedownmouseup 事件,針對 mousemove 事件註冊我們的 move() 處理器:

接著 move() 函式將判斷所要描繪的線條:

最後就是描繪線條的函式:

上述這些程式碼就足以形成簡易的繪圖 App 了。此時只要在這個 App 上啟動 TogetherJS,就能看到其他人的滑鼠游標與點選動作,但還看不到別人的繪圖作品。

想知道怎麼修正這個問題嗎?可別錯過《TogetherJS 介紹 (下)》。

 

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

 

 

您可能也會喜歡

目前找不到相關文章

共 2 則讀者回應

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

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

對此文章發表回應

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