Node.js+Socket.io 实现实时白板功能的步骤-JavaScript中文网-JavaScript教程资源分享门户

前言

在现代化的 Web 应用中，实时通信已经成为了必不可少的一部分。其中，实时白板功能是一种非常常见的应用场景，它可以让用户在同一时刻协同编辑同一个文档，实现实时协作的效果。本文将介绍如何使用 Node.js 和 Socket.io 实现实时白板功能。

准备工作

在开始实现实时白板功能之前，我们需要准备一些必要的工作：

安装 Node.js 和 npm

Node.js 是一款基于 Chrome V8 引擎的 JavaScript 运行环境，它可以使 JavaScript 运行在服务器端。npm（Node Package Manager）是 Node.js 的包管理工具，它可以帮助我们安装、升级和管理 Node.js 的模块。

可以在 Node.js 的官方网站上下载安装包，然后按照提示进行安装。
创建一个空白的项目目录

在终端中进入项目目录，然后使用 npm init 命令来创建一个空白的 package.json 文件，它用于记录项目的依赖项和其他相关信息。
安装 Socket.io

在终端中执行 npm install socket.io 命令来安装 Socket.io 模块。Socket.io 是一款基于 WebSocket 的实时通信库，它可以方便地实现客户端和服务器端之间的实时通信。

实现步骤

在完成准备工作之后，我们就可以开始实现实时白板功能了。下面是具体的实现步骤：

创建服务器

首先，我们需要创建一个 Node.js 服务器。在项目目录中创建一个名为 server.js 的文件，然后输入以下代码：
```
// javascriptcn.com 代码示例
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

app.use(express.static(__dirname + '/public'));

io.on('connection', function(socket) {
  console.log('a user connected');
  socket.on('disconnect', function() {
    console.log('user disconnected');
  });
});

http.listen(3000, function() {
  console.log('listening on *:3000');
});
```
上述代码中，我们首先创建了一个 express 实例，然后使用 http 模块创建了一个 Node.js 服务器。接着，我们使用 socket.io 模块创建了一个 WebSocket 服务器，并将它绑定到 Node.js 服务器上。

最后，我们定义了一个 connection 事件，它会在客户端连接到服务器时触发。在这个事件中，我们输出了一条日志，并监听了客户端的 disconnect 事件，它会在客户端断开连接时触发。

创建客户端

接下来，我们需要创建一个客户端页面。在项目目录中创建一个名为 public/index.html 的文件，然后输入以下代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <title>Real-time Whiteboard</title>
    <script src="/socket.io/socket.io.js"></script>
  </head>
  <body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <script>
      const socket = io();

      const canvas = document.querySelector('#canvas');
      const context = canvas.getContext('2d');

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

      canvas.addEventListener('mousedown', function(event) {
        isDrawing = true;
        lastX = event.clientX - canvas.offsetLeft;
        lastY = event.clientY - canvas.offsetTop;
      });

      canvas.addEventListener('mousemove', function(event) {
        if (isDrawing) {
          const x = event.clientX - canvas.offsetLeft;
          const y = event.clientY - canvas.offsetTop;
          context.beginPath();
          context.moveTo(lastX, lastY);
          context.lineTo(x, y);
          context.stroke();
          socket.emit('draw', { lastX, lastY, x, y });
          lastX = x;
          lastY = y;
        }
      });

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

      socket.on('draw', function(data) {
        context.beginPath();
        context.moveTo(data.lastX, data.lastY);
        context.lineTo(data.x, data.y);
        context.stroke();
      });
    </script>
  </body>
</html>

上述代码中，我们首先引入了 socket.io.js 文件，它会帮助我们在客户端和服务器端之间建立 WebSocket 连接。

然后，我们使用 canvas 元素创建了一个画布，并定义了一些变量和事件监听器。当用户在画布上按下鼠标时，我们记录下当前的坐标，并将 isDrawing 变量设为 true。当用户在画布上移动鼠标时，如果 isDrawing 为 true，则绘制一条线段，并发送一个 draw 事件到服务器端。当用户在画布上松开鼠标时，将 isDrawing 变量设为 false。

最后，我们监听了服务器端发送的 draw 事件，并在画布上绘制一条线段。

运行程序

在终端中进入项目目录，然后执行 node server.js 命令来启动服务器。接着，在浏览器中访问 http://localhost:3000，即可看到实时白板功能的效果。

总结

本文介绍了如何使用 Node.js 和 Socket.io 实现实时白板功能。通过本文的学习，读者可以了解到 WebSocket 的基本原理和使用方法，以及如何使用 canvas 元素实现绘图功能。希望本文能够对读者有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6506fd8295b1f8cacd291de0