Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

386
Vistas
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 la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda