Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

387
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!