search

embiem / react-canvas-draw

React Component for drawing in canvas
https://embiem.github.io/react-canvas-draw/
MIT License
904 stars 315 forks source link

Coupling with Socket.io #90

Open devniz opened 4 years ago

devniz commented 4 years ago

Great React Lib, thank you,

By using the Save & Load functionnalities, is it possible to capture the string data of the drawing on save and then push it via socket.io to load it for multiple clients? Think of collaborative whiteboard, I am definitely going to try it out but not entirely sure about the performance for real-time drawing.

mkvalluri commented 4 years ago

I think this should work as I am doing something similar for a game that I am on working on. Will update this thread once I am done with my change.

kothariji commented 3 years ago

I think this should work as I am doing something similar for a game that I am on working on. Will update this thread once I am done with my change.

@mkvalluri @NizarBsb can you please tell me guys, if it supports Socket,io or not.

devniz commented 3 years ago

@kothariji Yes, I made it working with socket.io version ^2.3.0. However it is not going to be streamed, i.e don't expect to have a live gesture drawing from the remote, it is going to take few milliseconds to refresh and then show the result. I may have done a very bad implementation but since we are saving -> push to socket.io then re-drawing the saved drawing object, this is the expected result.

kothariji commented 3 years ago

@kothariji Yes, I made it working with socket.io version ^2.3.0. However it is not going to be streamed, i.e don't expect to have a live gesture drawing from the remote, it is going to take few milliseconds to refresh and then show the result. I may have done a very bad implementation but since we are saving -> push to socket.io then re-drawing the saved drawing object, this is the expected result.

Oh, Nice. Hey buddy can you help me a little bit. Actually, i am a beginner in react and I was working on basic socket.io implementation, I was successful in making chat app, but I am not able to implement socket-io with react-canvas-draw. (My code is going in a loop) Can you please help me walk through with basic implementation of socket-io with react-canvas-draw? Thanks in Advance. :pray:

atharva-bhange commented 3 years ago

@kothariji Yes, I made it working with socket.io version ^2.3.0. However it is not going to be streamed, i.e don't expect to have a live gesture drawing from the remote, it is going to take few milliseconds to refresh and then show the result. I may have done a very bad implementation but since we are saving -> push to socket.io then re-drawing the saved drawing object, this is the expected result.

@NizarBsb So like when you save the drawing on one end and then send the saved data through a socket it redraws the whole thing in sequence every time a new save has been received. So it is not real time right?