前言
Socket.io 是一个实时通信库，基于 WebSockets 实现。它允许客户端和服务器之间进行双向通信，并支持广播和房间功能。在这篇文章中，我们将使用 Socket.io 来实现一个多人在线白板。
技术栈
- 前端：HTML、CSS、JavaScript、Canvas
- 后端：Node.js、Express、Socket.io
实现思路
- 服务器端使用 Node.js 和 Express 搭建一个简单的 HTTP 服务器。
- 在客户端中创建一个 Canvas 元素，用于绘制图形。
- 当用户在 Canvas 上进行绘制时，将绘制的图形数据发送到服务器。
- 服务器将接收到的图形数据广播给所有连接到服务器的客户端。
- 客户端接收到服务器广播的图形数据后，在自己的 Canvas 上进行绘制。
实现步骤
1. 搭建服务器
使用 Node.js 和 Express 搭建一个简单的 HTTP 服务器。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ----- ------ - ---------------- -- -- - ------------------- -- ------- -- ---- ------- --- ----- -- - ----------------------------- ---------------------------------- ------------------- -------- -- - -------------- ---- ------------ ---
2. 创建 Canvas
在客户端中创建一个 Canvas 元素，用于绘制图形。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------
-------
------ -
------- --- ----- ------
-
--------
-------
------
------- ----------- ----------- ----------------------
------- ---------------------------------------
------- -------------------------
-------
-------3. 绘制图形
当用户在 Canvas 上进行绘制时，将绘制的图形数据发送到服务器。
-- -------------------- ---- -------
----- ------ - ----------------------------------
----- --- - ------------------------
--- --------- - ------
--- ----- - --
--- ----- - --
------------------------------------ --- -- -
--------- - -----
----- - ----------
----- - ----------
---
------------------------------------ --- -- -
-- ----------- -
----- - - ----------
----- - - ----------
--------------- ------ -- ---
------------------- - ------ ------ -- - ---
----- - --
----- - --
-
---
---------------------------------- -- -- -
--------- - ------
---
-------- ------------ --- --- --- -
----------------
-------------- ----
-------------- ----
-------------
-4. 广播图形数据
服务器将接收到的图形数据广播给所有连接到服务器的客户端。
io.on('connection', (socket) => {
console.log('A user connected');
socket.on('draw', (data) => {
socket.broadcast.emit('draw', data);
});
});5. 接收图形数据并绘制
客户端接收到服务器广播的图形数据后，在自己的 Canvas 上进行绘制。
-- -------------------- ---- ------- ----------------- ------ -- - -------------------- ----------- ------- -------- --- -------- ------------ --- --- --- - ---------------- -------------- ---- -------------- ---- ------------- -
示例代码
完整的示例代码可以在 Github 上找到。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d947afa941bf71340dde04