随着互联网技术的不断发展，实时交互已经成为了许多应用场景的必要需求。而实时白板功能则是在在线协作、远程教学、远程会议等场景中经常使用的一种实时交互方式。本文将介绍如何使用 Node.js、Express 和 WebSocket 实现实时白板功能，并提供详细的代码示例和指导意义。
准备工作
在开始实现实时白板功能之前，我们需要先准备好开发环境和必要的工具。
开发环境
本文使用的开发环境如下：
- 操作系统：Windows 10
- Node.js 版本：v14.16.1
- Express 版本：4.17.1
- WebSocket 版本：7.4.3
工具
本文使用的工具如下：
- Visual Studio Code：代码编辑器
- Chrome 浏览器：用于调试和测试
实现过程
创建 Express 应用
首先，我们需要创建一个 Express 应用，并安装必要的依赖。
- 使用 npm 初始化一个新的 Node.js 项目：
npm init
- 安装 Express 和 WebSocket：
npm install express@4.17.1 websocket@7.4.3 --save
- 在项目根目录下创建一个名为
app.js的文件，并编写以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- -- ------ ---------------------------------- -- ----- ----- ------ - ---------------- -- -- - ------------------- ------- -- ---- ------- ---
在上面的代码中，我们创建了一个 Express 应用，并启动了一个 HTTP 服务器，监听端口号为 3000。同时，我们也添加了一个静态文件服务中间件，用于提供静态资源。
创建 WebSocket 服务器
接下来，我们需要创建一个 WebSocket 服务器，用于实现实时通信。
- 在
app.js中添加以下代码：
-- -------------------- ---- -------
----- --------- - ----------------------------
----- ---- - ----------------
-- -- ---- ---
----- ---------- - -----------------------
-- -- --------- ---
----- --------------- - --- -----------
----------- -----------
---
-- -- --------- --
----------------------------- --------- -- -
----- ---------- - -------------------- ----------------
---------------------- ---------- ------------
-- ----
------------------------ --------- -- -
--------------------- -------- ----------------------
---
-- ----
---------------------- ------------ ------------ -- -
---------------------- ---------- ------- ------------- - -----------------
---
---
-- -- ---- ---
----------------------- -- -- -
---------------------- ------ ------- -- ---- -------
---在上面的代码中，我们创建了一个 HTTP 服务器和一个 WebSocket 服务器，并将它们绑定在不同的端口上。在监听 WebSocket 连接的回调函数中，我们添加了消息和关闭的监听器。
- 在
public目录下创建一个名为index.html的文件，并编写以下代码：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------------
-------
------
------- ----------- ----------- ----------------------
--------
----- -- - --- ---------------------------------
--------- - -- -- -
---------------------- ---------- ----------
--
------------ - ------- -- -
--------------------- -------- ----------------
--
---------- - ------- -- -
---------------------- ---------- ------- ------------- - ------------------
--
---------
-------
-------在上面的代码中，我们创建了一个 HTML 页面，并添加了一个 Canvas 元素和一个 WebSocket 客户端。在 WebSocket 客户端中，我们添加了连接、消息和关闭的监听器。
实现实时绘制功能
最后，我们需要在客户端和服务器之间实现实时绘制功能。
- 在
app.js中添加以下代码：
-- -------------------- ---- -------
-- ----
-------- ------------------------- -
------------------------------------------------ -- -
----------------------------
---
-
-- ----
------------------------ --------- -- -
--------------------- -------- ----------------------
-- ----
-----------------------------------
---在上面的代码中，我们添加了一个 broadcastMessage 函数，用于广播消息给所有连接的客户端。在监听消息的回调函数中，我们调用了该函数，将接收到的消息广播给所有客户端。
- 在
public/index.html中添加以下代码：
-- -------------------- ---- -------
--------
----- ------ - ----------------------------------
----- ------- - ------------------------
--- --------- - ------
--- ----- - --
--- ----- - --
------------------------------------ ------- -- -
--------- - -----
----- - --------------
----- - --------------
---
------------------------------------ ------- -- -
-- ----------- -
--------------------
--------------------- -------
----------------------------- ---------------
-----------------
----- ------- - ----------------
----- -------
----- -
--- ------
--- ------
--- --------------
--- --------------
--
---
-----------------
----- - --------------
----- - --------------
-
---
---------------------------------- -- -- -
--------- - ------
---
----------------------------------- -- -- -
--------- - ------
---
------------ - ------- -- -
----- ------- - -----------------------
-- ------------- --- ------- -
----- -- - ----------------
----- -- - ----------------
----- -- - ----------------
----- -- - ----------------
--------------------
------------------ ----
------------------ ----
-----------------
-
--
---------在上面的代码中，我们添加了一个 Canvas 元素的事件监听器，用于实现绘制功能。在绘制过程中，我们向服务器发送消息，并在收到其他客户端发送的消息时进行绘制。
测试
现在，我们可以启动应用并测试实时白板功能了。
- 在命令行中执行以下命令，启动应用：
node app.js
在浏览器中访问
http://localhost:3000，打开应用页面。在多个浏览器窗口中打开应用页面，并进行绘制操作，观察各个客户端之间的实时同步效果。
总结
本文介绍了如何使用 Node.js、Express 和 WebSocket 实现实时白板功能的完整教程。通过本文的学习，读者可以了解到实时通信的基本原理和实现方法，并掌握使用 WebSocket 实现实时通信的技能。同时，本文提供了详细的代码示例和指导意义，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6565472bd2f5e1655de8b18b