圖像支持Fabric.js和Socket.io協作白板

我很努力獲得圖像支持添加到我的協作數字白板項目，主要基於this existing project（write up）使用socket.io和fabric.js。圖像支持Fabric.js和Socket.io協作白板

的源代碼： https://bitbucket.org/dhildreth/ts-motd

繪製路徑和插入文本工作完全正常，但是當我嘗試插入圖像，事情不同的表現，我很害怕這是在我的頭上。這可能與同步/異步行爲有關，如this fabricjs google group post中所述。

重現步驟：

啓動服務器（S），然後打開兩個瀏覽器窗口（C1，C2）。
在C1中，插入圖像。注意圖像出現在C2中。
關閉並重新打開C2
將任何對象添加到C2。

預期結果：使用C2中創建的對象更新C1。

實際結果：C1不再接收C2中創建的對象的更新。

這裏是正常的行爲VS形象的行爲的一些屏幕錄製：

良好的行爲：http://recordit.co/I2Dcpva50C
不良行爲：http://recordit.co/F8KPTaCqkD

經進一步檢查，現在C1的兩個副本在S上出現圖像（拖動圖像以顯示圖像的方式）和以下錯誤：

Error: Duplicate key for property uuid: 84a9395514b844988dba11bae5cfff3e 
    at UniqueIndex.set (/Users/derek/websites/ts-motd/node_modules/lokijs/src/lokijs.js:4767:17) 
    at LokiEventEmitter.Collection.add (/Users/derek/websites/ts-motd/node_modules/lokijs/src/lokijs.js:4037:31) 
    at LokiEventEmitter.Collection.insertOne (/Users/derek/websites/ts-motd/node_modules/lokijs/src/lokijs.js:3911:17) 
    at LokiEventEmitter.Collection.insert (/Users/derek/websites/ts-motd/node_modules/lokijs/src/lokijs.js:3865:21) 
    at /Users/derek/websites/ts-motd/lib/events.js:29:33 
    at Array.forEach (native) 
    at /Users/derek/websites/ts-motd/lib/events.js:23:22 
    at onLoaded (/Users/derek/websites/ts-motd/node_modules/fabric/dist/fabric.js:670:23) 
    at /Users/derek/websites/ts-motd/node_modules/fabric/dist/fabric.js:696:13 
    at klass.fabric.Image.fabric.util.createClass.setElement (/Users/derek/websites/ts-motd/node_modules/fabric/dist/fabric.js:18149:9)

因此，它試圖將圖像添加到數據庫兩次，這意味着它會發射「object：added」事件，這與簡單的對象路徑不同。

我用一堆輸出檢測了代碼，以更好地瞭解發生了什麼。我比較了插入物體路徑的正常操作和插入圖像的操作。見pastebin notes。

我希望有人可以幫助我通過這一個，使圖像工作正如路徑或文本對象一樣。

來源

2016-10-10 dhildreth