Concurrent drawing with paper.js

Question

I have an app that deals with drawing widget based upon paper.js. Several users can draw at the same time, and changes are broadcast to each other in real time. The problem is that I need to store the changes and show drawn image while document is loaded.

The natural solution is to store commands sent by clients in DB. But drawn images can consist of thousands of commands, and I can have tens of images. So when I'm opening a document getting a list of commands from server, drawing can take too much time.

Is there a better way of storing images and interaction between clients?

Note that I have a scaling feature, so storing raster is not an option.

UPDATE: If I'm storing an image (e.g. in a BLOB) it's not clear how to apply changes made in real time. Passing image each time is not the solution I want.

Answer 1

If you are going to save the drawing as an image you have a few possible solutions.

1. Save the item somewhere in a folder and save the directory path + file name in your database
2. Save images in the database as a blob. Blobs are really database intensive though.

There are some intresting articeles about blob's. Like this one from microsoft.

As expected from the common wisdom, objects smaller than 256K are best stored in a database while objects larger than 1M are best stored in the filesystem.

So performance wice it would be a better solution to save the image into a directory.

It's also possible to export a svgfile of an drawn image. (info) I don't know if this is any help to you, but this is my personal experience. And I agree with you that storing thousands of commands into a database isn't the best solution. So you might want to take a look at saving images somewhere, but then you would lose the ability to edit an image if you have that implemented.

Update:

If you don't want to save a blob the best solution would be to "render" the image each time an edit is made. So you could execute all commands when some one opens the drawing. And only apply the latest commands when an edit gets triggered.

There are several options to achieve this. Like Jimmy Chandra said, firebase would be a good solution. They also provide a tutorial with pretty much has everything you want to achieve. (drawing an image using x and ycoordinates real time) Maybe you have to take a look into that.

A bit more info about Firebase.

Firebase is a powerful API to store and sync data in realtime

This is exactly what you want to achieve I believe. You can try their full tutorial here.

An other option you might take into consideration is nodejs. I've seen people using nodejs for chat systems to send the data to all other users. If you can send data, I'm sure you can draw an image with it.

In the end it's up to you to choose which technology you want to use. So I think you can have to investigate a few solutions like I suggested and ask a different question if you run into trouble with integrating that technology.