时间戳

首页 > 解决方案 > 从服务器到客户端实时流式传输 html5 动画

node.js - 从服务器到客户端实时流式传输 html5 动画

问题描述

我有一个用 Javascript 编写的动画。我是 nodejs 的新手（不知道），我发现很难将动画实时流式传输给连接到该站点的用户。我阅读了有关 socket.io 和 Websockets 的信息，但我没有一个好的方法。目前，动画以函数调用开始并写入画布。

我需要知道如何将此动画从服务器端流式传输到客户端，以便多个连接的用户可以同时看到动画的同一场景。使用代码的功能解释也将受到赞赏。

标签： node.jssocket.ionodejs-stream

解决方案

在不知道使用什么类型的动画、它们是如何构建和工作的情况下，我建议在客户端执行动画，然后将某种同步命令从服务器发送到所有使用socket.io.

我还建议将所有用户（所有用户都应该看到相同的动画）放在一个room（参见房间）中。

现在您可以向所有用户发送同步命令，例如发送到、start和continue动画。另一方面，在服务器端，您可以跟踪房间中的哪些客户端已经有了动画，等等。stopresetloadedstartedstopped

// 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();
});

推荐阅读