Предложения для рендеринга клиентов .io

Question

В настоящее время я работаю над игрой .io, используя socket.io для общения. Все игровые логи c равны OOP и содержатся в экземпляре класса GameLogi c. Я пытаюсь решить, как лучше отправить информацию о графике c и отобразить ее. Я ищу минимальный код на стороне клиента, поэтому что-то вроде

const canvas = document.getElementById(‘canvass’)
const ctx = canvas.getContext(‘2d’)


const socket = io();
socket.on(‘Graphics Package’, (data) => {
    ctx.clearRect(0, 0,        innerWidth, innerHeight)
    for(let i in data){
        data[i].display(ctx);
    }

});

будет оптимальным

Возможно ли это, или есть лучший способ сделать это? Если так, что это?

Answer 1

С момента публикации этого вопроса я остановился на относительно простом OOP подходе к этой проблеме. У меня есть большой объект Sceen, который содержит всю информацию о каждом объекте, который будет отображаться. Он рассылается клиентам, как каждый из них имеет свой собственный «прерыватель», если хотите. Это код сервера:

class Scene{
   constructor(){
       this.objs = new Object();
   }
   addCircle(id,x,y,r,col){
       this.objs[id]={
           type: 'circle',
           x: x,
           y: y,
           r: r,
           col: col
       };
   }
   addRect(id, x,y,w,h,col){
       this.objs[id] = {
           type: 'rect',
           x: x,
           y: y,
           w: w,
           h: h,
           col: col
       };
   }
   addPath(id, col, ...verts){
       this.objs[id] = {
           type: 'path',
           col: col,
           verts: verts
       };
   }
   render(socket){
       socket.emit('Scene Package',this.objs);
   }
}

scene = new Scene();
// Add a rectange
scene.addRect(socket.id, 50,50,50,50,"blue");
scene.render(socket);

И (незавершенный) код клиента выглядит так:

socket.on('Scene Package',(data) => {
    ctx.clearRect(0,0, innerWidth,innerHeight)
    for(let i in data){
        shape = data[i]
        if(shape){
            switch(shape.type){
                case 'circle':
                    ctx.beginPath();
                    ctx.fillStyle = shape.col;
                    ctx.arc(shape.x, shape.y, shape.r, 0, Math.PI*2, false);
                    ctx.fill();
                break;
                case 'rect':
                    ctx.beginPath();
                    ctx.fillStyle = shape.col;
                    ctx.fillRect(shape.x, shape.y, shape.w, shape.h);
                break;
                case 'path':
                    ctx.beginPath();
                    ctx.fillStyle = shape.col;
                    ctx.arc(shape.x, shape.y, shape.r, 0, Math.PI*2, false);
                break;
            }
        }
    }
})

Таким образом, я могу рисовать на универсальном холсте и контролировать синтаксис , Это дало мне очень мало (если вообще что-то) ошибок и должно позволить легкое расширение с точки зрения форм и функций.