1

I have an animation written in Javascript. I am new to nodejs (no knowledge) and I have been finding it difficult to stream the animation in real-time to users connected to the site. I read about socket.io and Websockets but I do not have a good approach. Currently, the animation starts with a function call and writes to a canvas.

I need to know how to stream this animation from the server-side to the client so that multiple connected users can see the same scene of the animation at the same time. A functional explanation with code will also be appreciated.

Wicfasho
  • 311
  • 2
  • 13
  • If you say "stream" do you mean a video stream ? Like a live stream ? Why do you need to stream an animation in real-time to the user ? – turbopasi Jan 28 '21 at 19:17
  • I gave my reason in the question. I want connected users to see the same scene of the animation. Stream means sending live data from the server to the client to draw in a canvas for the user to see – Wicfasho Jan 28 '21 at 19:20
  • So you want that multiple connected users see the same animation at the same time - that's a very helpful information and should be included in the question more clearly. – turbopasi Jan 28 '21 at 19:24
  • Try to include a sample of that animation code ( can be pseudo code as well ) so one might understand better how this could be implemented. – turbopasi Jan 28 '21 at 19:26

1 Answers1

0

Without knowing what type of animations are used, how they're built and work, I would suggest doing the animation client-side and just send some sort of synchronization command from server to all clients using socket.io .

I also would suggest putting all users (which all should see the same animation) in to one room (see rooms).

Now you can send a synchronized command to all users, e.g. to start, continue, stop and reset the animation. On the other hand, on the server-side you could track which of the clients in the room have already loaded the animation, started, stopped and so on.

// server

io.to('some-room').emit('load', animationid);

/* ... */

socket.on('loaded', () => {
  if (allClientsLoaded) {
    io.to('some-room').emit('start');
  }
});

socket.on('started', () => {

});

// client

socket.on('load', async (animationid) => {
  await loadAnimation(animationid);
  socket.emit('loaded');
});

socket.on('start', () => {
  startAnimation();
});
turbopasi
  • 3,327
  • 2
  • 16
  • 43