Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

383
Visualizações
send json data between client and server in drawing app with fabric.js and socket.io

good night, dear colleagues! I am trying to create a drawing application using fabric.js and socket.io. My task is

  1. create the most primitive draw app.js for the frontend. Here is the code for this application(client.js):

var canvas = new fabric.Canvas(document.getElementById('canvasId'));
//var socket = io();

canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 5;
canvas.freeDrawingBrush.color = '#00aeff';

canvas.on('path:created', function(e) 
{  
  e.path.set();
  canvas.renderAll();
  //socket.emit('json_to_board', JSON.stringify(canvas));
  console.log(JSON.stringify(canvas));
});
canvas 
{
  border: 1px solid red;
}
<canvas id="canvasId" width="600" height="600"></canvas>
<script src="https://unpkg.com/fabric@4.6.0/dist/fabric.js"></script>  
<script src="/socket.io/socket.io.js"></script>

2)the next step is to create socket.io. I try to send json from client to sever with server.js:

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);


app.get('/', (req, res) => 
{
    res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => 
{
    socket.on('json_to_board', (msg) => 
    {
      console.log('message: ' + msg);
    });
});



server.listen(3000, () => 
{
  console.log('listening on *:3000');
});

and the code send nothing from client to server. How should I solve this problem?

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda