第三章 研究方法
3.2 以參與者模式包裝後端服務
國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
關於同步／非同步程式設計，「同步」意即在程式執行時依照撰寫的順序——由 上至下依序，上方的執行完畢才會執行下方的功能，大部分的程式都以這種方 式執行。但對於單執行緒而言，在遇到需要較長時間的動作時這種執行方式會 造成堵塞，進一步影響執行的效率；此時藉由非同步程式設計可迴避這種狀況，
也就是將造成堵塞的動作先置入佇列，經過一段時間後再回調執行。
然而 CPS 也為開發者帶來了其他問題：隨著專案規模及複雜度的上升，在進行 異步回調的規劃與組織也愈發困難、程式的維護性及可除錯性亦會降低許多，
加上匿名函式的存在，可能導致更複雜的狀況，甚至出現回調地獄（Callback hell）現象。
圖 3.1 難以閱讀的多層函式架構被匿稱為回調地獄
因此如何迴避同步控制問題、簡化延續傳遞風格以兼顧方便開發者的維護性與 閱讀性為研究中關注的重點。
3.2 以參與者模式包裝後端服務
在前兩章所提到，參與者模式的結合為本研究提出的解決方案，藉由將後端函
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
DOI:10.6814/THE.NCCU.DCT.004.2018.B02
22
首先，將 Actor 分為兩種類，分別是位階最高用來控制 Whiteboard 頁面的 aWB∈AWB，以及隸屬其下的協作者 auser∈Auser。
前者負責最終圖像的展示與合成，在一組共同編輯群組中只會存在一個 aEWB， 若存在多組共同編輯群組，彼此欲進行交流或資料的溝通，也應該經由此 aEWB
進行處理，此研究暫只討論單一共同編輯群組的，即僅存在一個 E 的狀況。
建立 aEWB 之後，可由 aEWB 建立可同時存在複數的 AEuser，其中 AEuser={u1, u2...un}，負責處理所屬使用者前端送達的資料，並依需求將其交給其他 Actor，
圖3-2 為架構示意圖。
圖 3.2 後端資料處理架構圖
‧
象工廠模式（Abstract Factory Pattern）包裝參與者模式，以一個 Actor（即行為及 邏輯內容）配備一個信箱的方式輸出：AE𝑢𝑠𝑒𝑟𝑘= (mk, bk)，因此我們可將其表示‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
DOI:10.6814/THE.NCCU.DCT.004.2018.B02
24
圖 3.3 Actor Model 實作架構示意圖
就包裝函式而言，若採用一般的物件導向程式設計方法也能達到類似的呈現，
然而傳統物件導向的設計方式在解決同步控制問題上，需依賴鎖定機制處理可 能出現的衝突及問題。簡單的鎖定機制並不難實現，然而隨著專案的規模增加 其實現邏輯也會變得愈加複雜，而參與者模式透過狀態各自持有的方式克服了 此困難，因此不需要鎖定機制協助處理同步問題。
在此研究中我們以此概念實作了簡易的共同圖片編輯工具，前後端的資料溝通 以 Socket.io 進行，在進行程式撰寫時，aEWB 部分的編輯目為安排各 AEuser 的宣 告，在使用者頁面開啟時為該頁面綁定 AEuser，並決定允許接收並處理哪些訊息；
而 AEuser 內部則包涵了訊息的內容，也就是邏輯本身。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 3.4 以參與者模式包裝過後的編輯函式
圖3.4 為一 AWB 類型的 Actor 實作（以下簡稱𝑎!"），其行為 bWB 產生一封訊息 𝑀!aWB，內容是生產一個 u，以下簡稱為 𝑎𝑢1。首先使用 init() 宣告 𝑎𝑢1，此動作 將藉由 Factory 建構起一個本身包涵邏輯函式的 Actor 及專屬於它的信箱，確定 成功後 𝑎𝑢1即可向 WB 與 𝑢! 寄送訊息，也就是 sendToWB() 及 sendToUser2()，
詳細功能邏輯比照於𝑎!" 撰寫於 𝑎𝑢1中，以此類推可撰寫其他訊息𝑀!。
此撰寫方法看似一般物件導向程式中呼叫物件的方式，但不同之處在於這封訊 息並非直接寄送給 Actor 本身處理，而是經由信箱排序後才交予 Actor 執行；但 開發者在使用此函式庫時不需理解背後的訊息交換細節，函式庫提供基本的功 能，開發者只需要呼叫，或者依照模式概念根據需求撰寫功能邏輯部分的訊息 內容，並設定發送時機即可。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
DOI:10.6814/THE.NCCU.DCT.004.2018.B02
26
圖 3.5 使用者頁面範例
在前端的部分，可分為展示頁面及使用者頁面。展示頁面對應後端的 𝑎!"，僅 負責接收使用者繪製完成的圖形資訊；而在使用者頁面中提供了基礎的圖形繪 製功能，以及將畫布傳送的至其他頁面（包含展示頁或者其他使用者畫布）的 選項。
圖 3.6 系統運行循序圖
‧
if WB is opened then def 𝑎!" , 𝑎!" ∈ 𝐴!"
‧
if unis opened then
def 𝑎! (status of un), ∀𝑎!"#$ ∈ 𝐴!"#$ 其他頁面時，才會以 Base64/PNG 的編碼方式送至後端進行處理，方便使用者之 間互相交換作圖，而頁面之間的判定以各自的所屬 ID 辨識。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 3.7 系統運行流程