文章首发于我的掘金：https://juejin.cn/post/7173926642811666446
前言
在疫情时代里，居家办公团队协作已成为常见问题，相信你们在市面上见过很多这样的产品，一个白板界面，允许多个人一起在上面协作画图。
类似的产品还有witeboard，excalidraw等，下面我们基于社区里一些开源库动手自己实现一个在线多人协作的画图工具。
效果预览
技术栈
LogicFlow，Socket.io
画图引擎我们选择当下比较流行的 LogicFlow,它是一款支持高拓展，简单灵活的流程图编辑引擎，画布部分就基于它来搞。
后端通信部分因为需要实时的双工通信，绕不开websocket这样的协议，这里我们选用nodejs中最主流的socket.io库来实现。
这里主要展现设计思路和核心实现，数据库数据存储部分等暂不介入。
其他技术栈：Express，Vue3，Vite...etc
设计
我们需要支持的功能：
- 支持房间隔离，支持创建房间，一个房间的人可以才能够同步彼此的操作
- 活动消息展示，谁加入的房间，谁离开的房间，谁操作了画布，信息同步在房间里
- 画图房间实时同步协作
创建房间页面
正常的Vue页面，需要注意一点是，我们需要把房间id放在路由url里，后端通过识别到客户端请求头参数来辨别room标识。这里没什么特殊逻辑部分，就不展示代码了。
房间页面
我们点进入房间1，输入自己的用户名后，可看到主体页面
整个分两个区域，左边区域显示当前房间人数，退出按钮，和活动消息列表，右边区域是画图部分。
通信逻辑：
请求头处理&跨域
上面提到过，为了让后端识别到前端数据来自哪个房间，我们需要把房间信息放在请求头里，这里我们可以在前端初始化socket实例的时候，自定义一个header头，同时处理跨域问题：
const socket = io('ws://localhost:3001', {
withCredentials: true,
extraHeaders: {
'raw-url': window.location.href
}
});
后端拿到roomId
const url = socket.request.headers['raw-url'];
const splited = url.split('/');
const roomID = splited[splited.length - 1]; // 获取房间ID
房间概念
sockets服务端 提供了房间概念，可以join 和 leave房间。它可用于向一部分客户端广播事件：
但注意，房间是一个仅限服务器的概念（即客户端无权访问它已加入的房间列表）。
前端页面上，当人员进入房间输入用户名后，给后端触发事件
confirmUser() {
this.$data.socket.emit('join', this.$data.curUser);
this.$data.dialogVisible = false;
},
同时需要监听活动消息事件和记录人员数量事件
socket.on('sys', (msg) => {
this.$data.activityMsg.push(msg);
});
socket.on('peopleNumJob', (num) => {
this.$data.peopleNum = num;
});
后端接收到后，"加入房间"，并给该房间的客户端socket实例广播消息
socket.on('join', function (userName) {
user = userName;
// 将用户昵称加入房间名单中
if (!roomInfo[roomID]) {
roomInfo[roomID] = [];
}
roomInfo[roomID].push(user);
socket.join(roomID); // 加入房间
// 通知房间内人员
io.to(roomID).emit('sys', user + '加入了房间');
io.to(roomID).emit('peopleNumJob', roomInfo[roomID].length);
console.log(user + '加入了' + roomID);
});
在上面处理中，有个roomInfo变量，他是后端全局声明的一个变量,我们用它来保存后端的房间状态和人员状态，在前端触发join事件后，同时我们也给前端触发更新消息信息和在线人数信息。
// 房间用户名单，全局变量
const roomInfo = {};
离开房间
离开房间动作触发时机有两个，一个是页面退出/销毁，一个是人员手动点退出房间
销毁：
unmounted() {
this.$data.socket.emit('leave', curUser);
this.$data.socket.disconnect();
},
前端点击退出房间后触发：
leaveRoom() {
ElMessageBox.confirm('确认是否退出房间', '确认', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(() => {
console.log('ddd')
this.$data.socket.emit('leave', this.$data.curUser);
this.$data.dialogVisible = true;
ElMessage({
type: 'success',
message: '退出成功'
});
});
},
后端监听到后处理
socket.on('leave', function () {
// 从房间名单中移除
const index = roomInfo[roomID].indexOf(user);
if (index !== -1) {
roomInfo[roomID].splice(index, 1);
}
io.to(roomID).emit('sys', user + '退出了房间', roomInfo[roomID]);
socket.leave(roomID); // 退出房间
console.log(user + '退出了' + roomID);
});
画布逻辑
画布基于LogicFlow，大家可以看下他们官网文档 http://logic-flow.org/ ，写的很详细，api上手友好。
功能逻辑上，我们需要做得有：
- 在mounted方法里初始化LogicFLow画布实例
- 在LogicFLow插件里导入拖拽面板，LogicFLow官方维护了左边节点拖拽面板的插件，没错，可以拿来直接用。文档
- 监听LogicFLow内部的各种节点事件，线事件，画布事件等，参考文档，触发后，利用socket通信，把数据广播出去。(注意这里需要防抖函数包装一下)
let lf = new LogicFlow({
container: this.$refs.container,
width: 1100,
height: 700,
grid: false,
adjustNodePosition: true,
textEdit: false,
stopZoomGraph: true,
stopScrollGraph: true,
stopMoveGraph: true,
keyboard: {
enabled: true
},
plugins: [SelectionSelect, DndPanel]
});
this.$data.lf = lf;
lf.openSelectionSelect();
lf.extension.dndPanel.setPatternItems([
{
type: 'circle',
text: '开始',
label: '开始节点',
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAnBJREFUOBGdVL1rU1EcPfdGBddmaZLiEhdx1MHZQXApraCzQ7GKLgoRBxMfcRELuihWKcXFRcEWF8HBf0DdDCKYRZpnl7p0svLe9Zzbd29eQhTbC8nv+9zf130AT63jvooOGS8Vf9Nt5zxba7sXQwODfkWpkbjTQfCGUd9gIp3uuPP8bZ946g56dYQvnBg+b1HB8VIQmMFrazKcKSvFW2dQTxJnJdQ77urmXWOMBCmXM2Rke4S7UAW+/8ywwFoewmBps2tu7mbTdp8VMOkIRAkKfrVawalJTtIliclFbaOBqa0M2xImHeVIfd/nKAfVq/LGnPss5Kh00VEdSzfwnBXPUpmykNss4lUI9C1ga+8PNrBD5YeqRY2Zz8PhjooIbfJXjowvQJBqkmEkVnktWhwu2SM7SMx7Cj0N9IC0oQXRo8xwAGzQms+xrB/nNSUWVveI48ayrFGyC2+E2C+aWrZHXvOuz+CiV6iycWe1Rd1Q6+QUG07nb5SbPrL4426d+9E1axKjY3AoRrlEeSQo2Eu0T6BWAAr6COhTcWjRaYfKG5csnvytvUr/WY4rrPMB53Uo7jZRjXaG6/CFfNMaXEu75nG47X+oepU7PKJvvzGDY1YLSKHJrK7vFUwXKkaxwhCW3u+sDFMVrIju54RYYbFKpALZAo7sB6wcKyyrd+aBMryMT2gPyD6GsQoRFkGHr14TthZni9ck0z+Pnmee460mHXbRAypKNy3nuMdrWgVKj8YVV8E7PSzp1BZ9SJnJAsXdryw/h5ctboUVi4AFiCd+lQaYMw5z3LGTBKjLQOeUF35k89f58Vv/tGh+l+PE/wG0rgfIUbZK5AAAAABJRU5ErkJggg=='
},
{
type: 'rect',
label: '用户任务',
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg==',
className: 'important-node'
},
{
type: 'rect',
label: '系统任务',
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg==',
className: 'import_icon'
},
{
type: 'diamond',
label: '条件判断',
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAAHeEJUAAAAABGdBTUEAALGPC/xhBQAAAvVJREFUOBGNVEFrE0EU/mY3bQoiFlOkaUJrQUQoWMGePLX24EH0IIoHKQiCV0G8iE1covgLiqA/QTzVm1JPogc9tIJYFaQtlhQxqYjSpunu+L7JvmUTU3AgmTfvffPNN++9WSA1DO182f6xwILzD5btfAoQmwL5KJEwiQyVbSVZ0IgRyV6PTpIJ81E5ZvqfHQR0HUOBHW4L5Et2kQ6Zf7iAOhTFAA8s0pEP7AXO1uAA52SbqGk6h/6J45LaLhO64ByfcUzM39V7ZiAdS2yCePPEIQYvTUHqM/n7dgQNfBKWPjpF4ISk8q3J4nB11qw6X8l+FsF3EhlkEMfrjIer3wJTLwS2aCNcj4DbGxXTw00JmAuO+Ni6bBxVUCvS5d9aa04+so4pHW5jLTywuXAL7jJ+D06sl82Sgl2JuVBQn498zkc2bGKxULHjCnSMadBKYDYYHAtsby1EQ5lNGrQd4Y3v4Zo0XdGEmDno46yCM9Tk+RiJmUYHS/aXHPNTcjxcbTFna000PFJHIVZ5lFRqRpJWk9/+QtlOUYJj9HG5pVFEU7zqIYDVsw2s+AJaD8wTd2umgSCCyUxgGsS1Y6TBwXQQTFuZaHcd8gAGioE90hlsY+wMcs30RduYtxanjMGal8H5dMW67dmT1JFtYUEe8LiQLRsPZ6IIc7A4J5tqco3T0pnv/4u0kyzrYUq7gASuEyI8VXKvB9Odytv6jS/PNaZBln0nioJG/AVQRZvApOdhjj3Jt8QC8Im09SafwdBdvIpztpxWxpeKCC+EsFdS8DCyuCn2munFpL7ctHKp+Xc5cMybeIyMAN33SPL3ZR9QV1XVwLyzHm6Iv0/yeUuUb7PPlZC4D4HZkeu6dpF4v9j9MreGtMbxMMRLIcjJic9yHi7WQ3yVKzZVWUr5UrViJvn1FfUlwe/KYVfYyWRLSGNu16hR01U9IacajXPei0wx/5BqgInvJN+MMNtNme7ReU9SBbgntovn0kKHpFg7UogZvaZiOue/q1SBo9ktHzQAAAAASUVORK5CYII='
},
{
type: 'circle',
text: '结束',
label: '结束节点',
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAA1BJREFUOBFtVE1IVUEYPXOf+tq40Y3vPcmFIdSjIorWoRG0ERWUgnb5FwVhYQSl72oUoZAboxKNFtWiwKRN0M+jpfSzqJAQclHo001tKkjl3emc8V69igP3znzfnO/M9zcDcKT67azmjYWTwl9Vn7Vumeqzj1DVb6cleQY4oAVnIOPb+mKAGxQmKI5CWNJ2aLPatxWa3aB9K7/fB+/Z0jUF6TmMlFLQqrkECWQzOZxYGjTlOl8eeKaIY5yHnFn486xBustDjWT6dG7pmjHOJd+33t0iitTPkK6tEvjxq4h2MozQ6WFSX/LkDUGfFwfhEZj1Auz/U4pyAi5Sznd7uKzznXeVHlI/Aywmk6j7fsUsEuCGADrWARXXwjxWQsUbIupDHJI7kF5dRktg0eN81IbiZXiTESic50iwS+t1oJgL83jAiBupLDCQqwziaWSoAFSeIR3P5Xv5az00wyIn35QRYTwdSYbz8pH8fxUUAtxnFvYmEmgI0wYXUXcCCSpeEVpXlsRhBnCEATxWylL9+EKCAYhe1NGstUa6356kS9NVvt3DU2fd+Wtbm/+lSbylJqsqkSm9CRhvoJVlvKPvF1RKY/FcPn5j4UfIMLn8D4UYb54BNsilTDXKnF4CfTobA0FpoW/LSp306wkXM+XaOJhZaFkcNM82ASNAWMrhrUbRfmyeI1FvRBTpN06WKxa9BK0o2E4Pd3zfBBEwPsv9sQBnmLVbLEIZ/Xe9LYwJu/Er17W6HYVBc7vmuk0xUQ+pqxdom5Fnp55SiytXLPYoMXNM4u4SNSCFWnrVIzKG3EGyMXo6n/BQOe+bX3FClY4PwydVhthOZ9NnS+ntiLh0fxtlUJHAuGaFoVmttpVMeum0p3WEXbcll94l1wM/gZ0Ccczop77VvN2I7TlsZCsuXf1WHvWEhjO8DPtyOVg2/mvK9QqboEth+7pD6NUQC1HN/TwvydGBARi9MZSzLE4b8Ru3XhX2PBxf8E1er2A6516o0w4sIA+lwURhAON82Kwe2iDAC1Watq4XHaGQ7skLcFOtI5lDxuM2gZe6WFIotPAhbaeYlU4to5cuarF1QrcZ/lwrLaCJl66JBocYZnrNlvm2+MBCTmUymPrYZVbjdlr/BxlMjmNmNI3SAAAAAElFTkSuQmCC'
}
]);
lf.on(
'node:mouseup,node:mousemove,node:delete,node:add,node:drop,edge:add,edge:delete,edge:adjust,edge:exchange-node,blank:mousemove,blank:drop',
debounce(this.brodcastData, 80)
);
lf.render();
监听到LogicFlow内部的事件后，需要把数据实时路由给后端
前端广播代码：
brodcastData() {
console.log('brodcastData');
const socket = this.$data.socket;
const graphData = this.$data.lf.getGraphData();
socket.emit('drawing', graphData);
},
后端收到drawing事件后，再把数据路由分发给该房间的所有客户端socket实例
socket.on('drawing', (data) => {
console.log('erver drawing');
// socket.broadcast.emit("drawing", data);
socket.join(roomID);
io.to(roomID).emit('drawing', data);
io.to(roomID).emit('sys', user + '操作画布');
});
前端再监听这个事件，收到数据后，重渲染画布。
socket.on('drawing', (data) => {
console.log('客户端收到:', data);
lf.render(data);
});
这里有点绕，顺序是：前端emit->后端监听分发->前端监听
尾言
其他功能、细节等，可参考完整代码，已开源可见：github。
本文只是抛砖引玉实现了一个这么基础的本地在线多人协作画图系统，如果需要部署和深入探究，还会涉及到数据一致性，协同冲突处理，OT算法等，有机会可以在后文研究发布。欢迎一起留言探讨