基于Websocket和Canvas實現多人協作實時共享白板 · Spring Boot 技術棧

基于Websocket和Canvas實現多人協作實時共享白板 ## 概述本文主要基于 Websocket、Canvas、Workerman、HTML5 CSS 等技術實現一個共享白板原型，支持在多個桌面瀏覽器之間共享一個無限大小、任意縮放的多人實時協作白板，并實時同步繪畫、涂鴉。項目通過 Canvas 渲染畫板、產生涂鴉數據。然后通過Websocket實現客戶端與服務器的雙向通信，并在多個設備之間實時同步涂鴉數據。 ### 畫板協同簡單來說就是使用canvas開發一個可以多人共享的畫板，都可以在上面作畫畫板，并且畫面進行實時同步顯示 ### 協同的方式相當于創建一個房間，像微信的面對面建群一樣，加入房間的用戶之間可以進行消息通訊，其中一個客戶端發布消息，其他的客戶都會被分發消息，而達到的一種消息同步的效果 ## 協同畫板實現使用workerman作為Websocket消息訂閱發布服務器 ### 安裝think-template composer安裝 ``` composer require topthink/think-template ``` 修改配置`config/view.php`為 ``` <?php use support\view\ThinkPHP; return [ 'handler' => ThinkPHP::class, ]; ``` ### HTTP服務新建`app/controller/DemoController.php`控制器 ```php <?php /** * @desc Demo.php 描述信息 * @author Tinywan(ShaoBo Wan) * @date 2024/6/16 20:14 */ declare(strict_types=1); namespace app\controller; use support\Request; use support\Response; class DemoController { /** * @desc 實戰構建多人互動畫板 * @param Request $request * @return Response * @author Tinywan(ShaoBo Wan) */ public function canvas(Request $request): Response { return view('demo/canvas'); } } ``` 文件`app/view/demo/canvas.html`如下 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>開源技術小棧 WebSocket+Canvas: 實戰構建多人互動畫板</title> </head> <body> <canvas id="canvas" height="600" width="600" style="border:1px solid #000000;">你的瀏覽器不支持canvas，請升級瀏覽器</canvas> <script src="/static/js/index.js"></script> </body> </html> ``` `/static/js/index.js` 文件 ``` var el = document.getElementById('canvas'); el.width = document.body.clientWidth; el.height = document.body.clientHeight; var ctx = el.getContext('2d'); var isDrawing; var point = {}; ctx.strokeStyle = '#fffff'; var ws = new WebSocket('ws://192.168.13.168:8788'); console.log(ws) // 當連接成功后，再進行繪畫操作，以免數據丟失 ws.onopen = function () { el.onmousedown = function (e) { isDrawing = true; ctx.moveTo(e.clientX,e.clientY); sendPoint(e,1); } el.onmousemove = function (e) { if(isDrawing){ ctx.lineTo(e.clientX,e.clientY); ctx.stroke(); sendPoint(e,2); } } el.onmouseup = function (e) { isDrawing = false; } } ws.onmessage = function (e) { var data = JSON.parse(e.data); if(data.type == 1){ ctx.moveTo(data.x,data.y); }else if(data.type == 2){ ctx.lineTo(data.x,data.y); ctx.stroke(); } } function sendPoint(e,type) { point = { type:type, x:e.clientX, y:e.clientY, } ws.send(JSON.stringify(point)); } ``` ### Websocket服務這里通過webman自定義進程實現。在webman中你可以像workerman那樣自定義監聽或者進程。新建 `process/CanvasWebsocket.php` ``` <?php /** * @desc CanvasWebsocket.php * @author Tinywan(ShaoBo Wan) * @date 2024/6/18 9:18 */ declare(strict_types=1); namespace process; use Workerman\Connection\TcpConnection; class CanvasWebsocket { public function onConnect(TcpConnection $connection) { echo "onConnect\n"; } public function onWebSocketConnect(TcpConnection $connection, $http_buffer) { echo "onWebSocketConnect\n"; } public function onMessage(TcpConnection $connection, $data) { foreach ($connection->worker->connections as $_connection) { if($connection != $_connection){ $_connection->send($data); } } } public function onClose(TcpConnection $connection) { echo "onClose\n"; } } ``` 在`config/process.php`中添加如下配置 ``` return [ // ... 其它進程配置省略 ... // canvas_websocket為進程名稱 'canvas_websocket' => [ // 這里指定進程類，就是上面定義的Pusher類 'handler' => \process\CanvasWebsocket::class, 'listen' => 'websocket://0.0.0.0:8788', 'count' => 1, ], ]; ``` 啟動webman ![](https://img.kancloud.cn/93/b3/93b35be4acf74000f6cc72cd2a0bd570_1221x200.png) ## 協同畫板實現效果 ![](https://img.kancloud.cn/ab/70/ab70f1b7927ff994c4b789db3369038a_1493x710.png) ![](https://img.kancloud.cn/0f/f1/0ff1b897cf25f92cb4d78c59b4b74677_1496x710.png)