基于socket.io 和canvas 实现的共享协做画板 (更新)

DrawBoard-Online

Draw together with your coworker, enjoy the creating time!😊
绘你所想，画你所爱！前端

起初只是想要写个简单的画板,后面不知不觉的想起石墨文档有一个白板功能，就想将当前这个画布功能，开发成一个简易版的协做画板。vue

直到目前已经更新了几个版本，从最初简陋的只能画画，到后面的聊天，再到后面调用摄像头获取画面等等一系列的功能补充，都是在工做之余挤牙膏般的挤时间来完善。node

以前这个应用都是用传统的开发方式开发的，后续将用vue或react重构整个应用，目前还有不少功能没有完善。期待大家的 pull request一块儿完善这个应用的功能🤣react

这里不作具体的实现细节，具体的能够fork源码，相信机智的你必定能够秒懂，喜欢别忘了给个 🌟star一下哦，这是我持续更新的动力 😁。webpack

最新更新状态 🚩：git

🔥注意！！！已更新:github

修改目录结构。

使用 typescript 重构（完成大约～ 75%）

🔥🔥 新增视频会议 🔥🔥（safari,IE 不支持，用到最新特性，在 chrome 下体验）

一、共享协做画板仓库

前端界面用webpack进行了打包，后台服务使用了express，协做方面采用socket.io来承载聊天内容以及绘画数据的沟通能力、数据的协同传输。web

在线演示：努力部署中，目前须要clone到本地运行。
fork代码到本身的仓库，补充完善代码不如pull request一下
🏭仓库地址：github.com/forrestyuan…
💬仓库讨论区：github.com/forrestyuan…chrome

二、如何在本地运行

想要体验这个应用，你能够按照下面的步骤启动应用哦！！！
💻开发模式：1-2-3 步骤
💻预览模式：1-2-4 步骤typescript

下载仓库

git clone <repository>
复制代码

安装依赖

cd frontend
npm install

cd server
npm install
复制代码

注意！若是你是查看的同时也是须要修改代码，接下来请执行下面 -第3步骤- 便可，若是只是查看可是不须要修改代码，请执行 -第4步骤- 便可

对于开发阶段（请走这个步骤）

#前端服务启动（利用webpack dev server）：
cd frontend
npm run dev

#后台服务启动(使用了nodemon 实时监听后端文件修改重启服务)
cd server
npm run start

#启动后在浏览器输入url： http://127.0.0.1:8082
复制代码

对于生产阶段（请走这个步骤）

#打包前端文件,而后启动服务器便可
cd frontend
npm run build

cd server
npm run start

#启动后在浏览器输入url： http://127.0.0.1:3001
复制代码

三、共享协做画板目前具备的功能

开发完成:

画布缩放(✔)
画布颜色(✔)
画笔颜色(✔)
画笔粗细(✔)
历史记录（撤销，恢复）(✔)
聊天室(✔)
聊天发送图片（✔）
绘制协做(相似于石墨文档协做)（✔）
UI 界面美化（✔）
- 使用 UI 库（material Design）
聊天消息通知条右上角提示用户（✔）
基于 WebRTC 照相获得照片，在此基础上进行绘制 ~🔥（✔）
webRTC 视频会议～ 🔥🔥（✔）

待开发的功能：

文字控件（待开发）
上传图片，基于图片绘图（待开发）
绘图带基本形状可拖拽调控大小（待开发）
聊天功能丰富（待开发）
- 支持聊天表情
- 相似QQ抖动窗口提醒
其它未知功能（🤔）

3-一、最原始效果图

3-二、使用MDUI后效果

3-三、基于WebRTC照相获得照片，在此基础上进行绘制

3-四、视频会议

四、写在后话

这个应用实现的比较基础，还有很大的改进空间，感兴趣的你能够fork 一下，稍加完善。喜欢的你，赏赐一个小小的star吧，嘻嘻😄，因为工做忙，更新的速度的比较慢。