基於socket.io 和canvas 實現的共享協做畫板 (更新)

DrawBoard-Online

Draw together with your coworker, enjoy the creating time!😊
繪你所想，畫你所愛！

起初只是想要寫個簡單的畫板,後面不知不覺的想起石墨文檔有一個白板功能，就想將當前這個畫布功能，開發成一個簡易版的協做畫板。

直到目前已經更新了幾個版本，從最初簡陋的只能畫畫，到後面的聊天，再到後面調用攝像頭獲取畫面等等一系列的功能補充，都是在工做之餘擠牙膏般的擠時間來完善。

以前這個應用都是用傳統的開發方式開發的，後續將用vue或react重構整個應用，目前還有不少功能沒有完善。期待大家的 pull request一塊兒完善這個應用的功能🤣

這裏不作具體的實現細節，具體的能夠fork源碼，相信機智的你必定能夠秒懂，喜歡別忘了給個 🌟star一下哦，這是我持續更新的動力 😁。

最新更新狀態 🚩：

🔥注意！！！已更新:

1. 修改目錄結構。
2. 使用 typescript 重構（完成大約～ 75%）
3. 🔥🔥 新增視頻會議 🔥🔥（safari,IE 不支持，用到最新特性，在 chrome 下體驗）

一、共享協做畫板倉庫

前端界面用webpack進行了打包，後臺服務使用了express，協做方面採用socket.io來承載聊天內容以及繪畫數據的溝通能力、數據的協同傳輸。

在線演示：努力部署中，目前須要clone到本地運行。
fork代碼到本身的倉庫，補充完善代碼不如pull request一下
🏭倉庫地址：github.com/forrestyuan…
💬倉庫討論區：github.com/forrestyuan…

二、如何在本地運行

想要體驗這個應用，你能夠按照下面的步驟啓動應用哦！！！
💻開發模式：1-2-3 步驟
💻預覽模式：1-2-4 步驟

1. 下載倉庫

git clone <repository>
複製代碼

2. 安裝依賴

cd frontend
npm install

cd server
npm install
複製代碼

注意！ 若是你是查看的同時也是須要修改代碼，接下來請執行下面 -第3步驟- 便可， 若是隻是查看可是不須要修改代碼，請執行 -第4步驟- 便可

3. 對於開發階段（請走這個步驟）

#前端服務啓動（利用webpack dev server）：
cd frontend
npm run dev

#後臺服務啓動(使用了nodemon 實時監聽後端文件修改重啓服務)
cd server
npm run start

#啓動後在瀏覽器輸入url： http://127.0.0.1:8082
複製代碼

4. 對於生產階段（請走這個步驟）

#打包前端文件,而後啓動服務器便可
cd frontend
npm run build

cd server
npm run start

#啓動後在瀏覽器輸入url： http://127.0.0.1:3001
複製代碼

三、共享協做畫板目前具備的功能

1. 開發完成:

• 畫布縮放(✔)
• 畫布顏色(✔)
• 畫筆顏色(✔)
• 畫筆粗細(✔)
• 歷史記錄（撤銷，恢復）(✔)
• 聊天室(✔)
• 聊天發送圖片（✔）
• 繪製協做(相似於石墨文檔協做)（✔）
• UI 界面美化（✔）
  • 使用 UI 庫（material Design）
• 聊天消息通知條右上角提示用戶（✔）
• 基於 WebRTC 照相獲得照片，在此基礎上進行繪製 ~🔥（✔）
• webRTC 視頻會議～ 🔥🔥（✔）

2. 待開發的功能：

• 文字控件（待開發）
• 上傳圖片，基於圖片繪圖（待開發）
• 繪圖帶基本形狀可拖拽調控大小 （待開發）
• 聊天功能豐富（待開發）
  • 支持聊天表情
  • 相似QQ抖動窗口提醒
• 其它未知功能（🤔）

3-一、最原始效果圖

3-二、使用MDUI後效果

3-三、 基於WebRTC照相獲得照片，在此基礎上進行繪製

3-四、視頻會議

四、寫在後話

這個應用實現的比較基礎，還有很大的改進空間，感興趣的你能夠fork 一下，稍加完善。喜歡的你，賞賜一個小小的star吧，嘻嘻😄，因爲工做忙，更新的速度的比較慢。