Question

我在编程的服务器端还很陌生，我有一些疑问。首先，我的项目是用javascript和node.js构建的。它的工作原理是将鼠标坐标发送到服务器，然后将其重新绘制到其他所有人的客户端上。这意味着新客户无法查看以前绘制的内容。新观众如何看待先前绘制的内容？我想我会将鼠标坐标及其颜色存储在数据库中，然后将其加载。我不确定从哪开始。任何帮助，将不胜感激。谢谢大家:)

编辑：所以我做了更多的研究，其他人则说一个更好的选择可能是拍摄当前画布的图像，然后将其上传到服务器，然后将其显示给新用户。我想出了如何保存画布，只是不知道如何在任何类型的服务器上获取它。抱歉，如此无助，哈哈。谢谢你们：）

SKETCH.JS

var socket;
var color;

function setup() {
  createCanvas(1000, 800);
  background(51);
  frameRate(100);

  socket = io.connect();
  socket.on('mouse', newDrawing);

  color = {
    r: random(255),
    g: random(255),
    b: random(255),
  }
}

function newDrawing(data) {
  noStroke();
  fill(data.color.r, data.color.g, data.color.b);
  ellipse(data.x, data.y, 36, 36)
}

function mouseDragged() {
  console.log('Sending: ' + mouseX + ',' + mouseY)

  var data = {
    x: mouseX,
    y: mouseY,
    color: color
  }

  socket.emit('mouse', data);

  noStroke();
  fill(data.color.r, data.color.g, data.color.b);
  ellipse(mouseX, mouseY, 36, 36)
  ellipse(15,25,20,20);
  fill(255);
  textSize(10);
  text('your color:',10,10);


}

function draw() {}

function keyTyped() {
  if (key === 'p') {
    color = {
      r: random(255),
      g: random(255),
      b: random(255)
    }
  }
}

SERVER.JS

var express = require('express');

var app = express();
var server = app.listen(process.env.PORT || 3000);

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

console.log("My socket server is running");

var socket = require('socket.io');

var io = socket(server);

io.sockets.on('connection', newConnection);

function newConnection(socket) {
  console.log('new connection: ' + socket.id);

  socket.on('mouse', mouseMsg);

  function mouseMsg(data) {
    socket.broadcast.emit('mouse', data);
    console.log(data);
  }
}

抱歉，我如此无助。 yall的帮助很棒：）

Answer 1

您可以使用redis，它是一种内存中的数据结构，它非常快，可以存储想要存储的任何内容。

以下是文档： https://redis.io/documentation

它支持列表，哈希图和其他数据结构。您可以使用哈希图。

对于画布，您可以使用make函数在画布上进行如下绘制：

 canvas.addEventListener('mousemove',(e) =>{
  if(drag) {
    ctx.beginPath();
    let oldx = this.X;
    let oldy = this.Y;
    ctx.moveTo(oldx, oldy);
    ctx.lineCap = 'round';
    ctx.lineWidth = penWidth;
    ctx.lineTo(e.offsetX , e.offsetY );
    ctx.strokeStyle = penColor;
    ctx.stroke();
    this.X = e.offsetX;
    this.Y = e.offsetY;
 }
})

您应该存储坐标，并在socket.io的帮助下将事件发送给服务器上的其他客户端。对于撤消和重做部分，您已经存储了完整的笔划，或者可以说出画布上每行的坐标数组以及何时您要渲染该笔触，可以创建如下函数：

 function rerender(strokes){
ctx.clearRect(0,0,canvas.width,canvas.height);
for(let i=0 ; i<strokes.length ; i++){
    console.log(strokes.length);
    for(let j=0 ; j<strokes[i].length ; j++){
        ctx.beginPath();
        ctx.moveTo(strokes[i][j].oldx,strokes[i][j].oldy);
        ctx.lineCap = 'round';
        ctx.lineWidth = strokes[i][j].width+1;
        ctx.lineTo(strokes[i][j].x,strokes[i][j].y);
        ctx.strokeStyle = strokes[i][j].color;
        ctx.stroke();
        strokes[i][j].oldx = strokes[i][j].x;
        strokes[i][j].oldy = strokes[i][j].y;
    }
}

}

Answer 2

在server.js中添加一些内容即可解决问题。

声明一个变量来存储鼠标数据。在此示例中，我将对象用作键值映射。
从套接字接收鼠标数据时，请将数据存储到变量中。 socket.id可以用作对象键，因此每个套接字只能存储一个数据。 usersCurrentMouseData看起来像{socketId1:mouseData1, socketId2:mouseData2, socketId3:mouseData3, ...}
当新的套接字连接到来时，使用循环将所有存储的鼠标数据发送给它。

。

var express = require('express');

var app = express();
var server = app.listen(process.env.PORT || 3000);
var usersCurrentMouseData = {};    //Declare a variable to store the mouse data.

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

console.log("My socket server is running");

var socket = require('socket.io');

var io = socket(server);

io.sockets.on('connection', newConnection);

function newConnection(socket) {
  console.log('new connection: ' + socket.id);

  socket.on('mouse', mouseMsg);
  for(var socketId in usersCurrentMouseData)  //loop through all mouse data stored
  {
      socket.emit('mouse',usersCurrentMouseData[socketId]);    //emit the stored mouse data to this new connection only.
  }

  function mouseMsg(data) {
    socket.broadcast.emit('mouse', data);
    userCurrentMouseData[socket.id] = data  //store the mouse data per socket
    console.log(data);
  }
}

编辑：要存储所有点，只需使用一个数组即可，而不必按每个套接字进行映射。

var express = require('express');

var app = express();
var server = app.listen(process.env.PORT || 3000);
var usersCurrentMouseData = [];    //Declare a variable to store the mouse data.

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

console.log("My socket server is running");

var socket = require('socket.io');

var io = socket(server);

io.sockets.on('connection', newConnection);

function newConnection(socket) {
  console.log('new connection: ' + socket.id);

  socket.on('mouse', mouseMsg);
  for(var data of usersCurrentMouseData)  //loop through all mouse data stored
  {
      socket.emit('mouse',data);    //emit the stored mouse data to this new connection only.
  }

  function mouseMsg(data) {
    socket.broadcast.emit('mouse', data);
    userCurrentMouseData.push(data)  //store the mouse data 
    console.log(data);
  }
}

如何将鼠标坐标存储在在线服务器上？

2 个答案: