Node.js + Express + WebSocket 实现实时白板功能的完整教程-JavaScript中文网-JavaScript教程资源分享门户

随着互联网技术的不断发展，实时交互已经成为了许多应用场景的必要需求。而实时白板功能则是在在线协作、远程教学、远程会议等场景中经常使用的一种实时交互方式。本文将介绍如何使用 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 的文件，并编写以下代码：

// javascriptcn.com 代码示例
const express = require('express');
const app = express();

// 静态文件服务
app.use(express.static('public'));

// 启动服务器
const server = app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在上面的代码中，我们创建了一个 Express 应用，并启动了一个 HTTP 服务器，监听端口号为 3000。同时，我们也添加了一个静态文件服务中间件，用于提供静态资源。

创建 WebSocket 服务器

接下来，我们需要创建一个 WebSocket 服务器，用于实现实时通信。

在 app.js 中添加以下代码：

// javascriptcn.com 代码示例
const WebSocket = require('websocket').server;
const http = require('http');

// 创建 HTTP 服务器
const httpServer = http.createServer(app);

// 创建 WebSocket 服务器
const webSocketServer = new WebSocket({
  httpServer: httpServer,
});

// 监听 WebSocket 连接
webSocketServer.on('request', (request) => {
  const connection = request.accept(null, request.origin);

  console.log('WebSocket connection accepted.');

  // 监听消息
  connection.on('message', (message) => {
    console.log(`Received message: ${message.utf8Data}`);
  });

  // 监听关闭
  connection.on('close', (reasonCode, description) => {
    console.log(`WebSocket connection closed: ${reasonCode} - ${description}`);
  });
});

// 启动 HTTP 服务器
httpServer.listen(3001, () => {
  console.log('WebSocket server started on port 3001');
});

在上面的代码中，我们创建了一个 HTTP 服务器和一个 WebSocket 服务器，并将它们绑定在不同的端口上。在监听 WebSocket 连接的回调函数中，我们添加了消息和关闭的监听器。

在 public 目录下创建一个名为 index.html 的文件，并编写以下代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>实时白板</title>
  </head>
  <body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <script>
      const ws = new WebSocket('ws://localhost:3001');

      ws.onopen = () => {
        console.log('WebSocket connection opened.');
      };

      ws.onmessage = (event) => {
        console.log(`Received message: ${event.data}`);
      };

      ws.onclose = (event) => {
        console.log(`WebSocket connection closed: ${event.code} - ${event.reason}`);
      };
    </script>
  </body>
</html>

在上面的代码中，我们创建了一个 HTML 页面，并添加了一个 Canvas 元素和一个 WebSocket 客户端。在 WebSocket 客户端中，我们添加了连接、消息和关闭的监听器。

实现实时绘制功能

最后，我们需要在客户端和服务器之间实现实时绘制功能。

在 app.js 中添加以下代码：

// javascriptcn.com 代码示例
// 广播消息
function broadcastMessage(message) {
  webSocketServer.connections.forEach((connection) => {
    connection.sendUTF(message);
  });
}

// 监听消息
connection.on('message', (message) => {
  console.log(`Received message: ${message.utf8Data}`);

  // 广播消息
  broadcastMessage(message.utf8Data);
});

在上面的代码中，我们添加了一个 broadcastMessage 函数，用于广播消息给所有连接的客户端。在监听消息的回调函数中，我们调用了该函数，将接收到的消息广播给所有客户端。

在 public/index.html 中添加以下代码：

// javascriptcn.com 代码示例
<script>
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');

  let isDrawing = false;
  let lastX = 0;
  let lastY = 0;

  canvas.addEventListener('mousedown', (event) => {
    isDrawing = true;

    lastX = event.offsetX;
    lastY = event.offsetY;
  });

  canvas.addEventListener('mousemove', (event) => {
    if (isDrawing) {
      context.beginPath();
      context.moveTo(lastX, lastY);
      context.lineTo(event.offsetX, event.offsetY);
      context.stroke();

      const message = JSON.stringify({
        type: 'draw',
        data: {
          x1: lastX,
          y1: lastY,
          x2: event.offsetX,
          y2: event.offsetY,
        },
      });

      ws.send(message);

      lastX = event.offsetX;
      lastY = event.offsetY;
    }
  });

  canvas.addEventListener('mouseup', () => {
    isDrawing = false;
  });

  canvas.addEventListener('mouseout', () => {
    isDrawing = false;
  });

  ws.onmessage = (event) => {
    const message = JSON.parse(event.data);

    if (message.type === 'draw') {
      const x1 = message.data.x1;
      const y1 = message.data.y1;
      const x2 = message.data.x2;
      const y2 = message.data.y2;

      context.beginPath();
      context.moveTo(x1, y1);
      context.lineTo(x2, y2);
      context.stroke();
    }
  };
</script>

在上面的代码中，我们添加了一个 Canvas 元素的事件监听器，用于实现绘制功能。在绘制过程中，我们向服务器发送消息，并在收到其他客户端发送的消息时进行绘制。

测试

现在，我们可以启动应用并测试实时白板功能了。

在命令行中执行以下命令，启动应用：

node app.js

在浏览器中访问 http://localhost:3000，打开应用页面。
在多个浏览器窗口中打开应用页面，并进行绘制操作，观察各个客户端之间的实时同步效果。

总结

本文介绍了如何使用 Node.js、Express 和 WebSocket 实现实时白板功能的完整教程。通过本文的学习，读者可以了解到实时通信的基本原理和实现方法，并掌握使用 WebSocket 实现实时通信的技能。同时，本文提供了详细的代码示例和指导意义，希望对读者有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6565472bd2f5e1655de8b18b