利用 Socket.io 实现多人在线白板-JavaScript中文网-JavaScript教程资源分享门户

前言

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 服务器。

// www.javascriptcn.com code example
const express = require('express');
const app = express();

const server = app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

const io = require('socket.io')(server);

app.use(express.static('public'));

io.on('connection', (socket) => {
  console.log('A user connected');
});

2. 创建 Canvas

在客户端中创建一个 Canvas 元素，用于绘制图形。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>多人在线白板</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <script src="/socket.io/socket.io.js"></script>
    <script src="client.js"></script>
  </body>
</html>

3. 绘制图形

当用户在 Canvas 上进行绘制时，将绘制的图形数据发送到服务器。

// www.javascriptcn.com code example
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

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

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  lastX = e.offsetX;
  lastY = e.offsetY;
});

canvas.addEventListener('mousemove', (e) => {
  if (isDrawing) {
    const x = e.offsetX;
    const y = e.offsetY;
    drawLine(lastX, lastY, x, y);
    socket.emit('draw', { lastX, lastY, x, y });
    lastX = x;
    lastY = y;
  }
});

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

function drawLine(x1, y1, x2, y2) {
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}

4. 广播图形数据

服务器将接收到的图形数据广播给所有连接到服务器的客户端。

io.on('connection', (socket) => {
  console.log('A user connected');

  socket.on('draw', (data) => {
    socket.broadcast.emit('draw', data);
  });
});

5. 接收图形数据并绘制

客户端接收到服务器广播的图形数据后，在自己的 Canvas 上进行绘制。

// www.javascriptcn.com code example
socket.on('draw', (data) => {
  drawLine(data.lastX, data.lastY, data.x, data.y);
});

function drawLine(x1, y1, x2, y2) {
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}

示例代码

完整的示例代码可以在 Github 上找到。

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

利用 Socket.io 实现多人在线白板

前言

技术栈