javascript - 使用 byte[] 发送游戏更新并在 javascript 中转换为数字

Question

这可能是 Convert byte array to numbers in JavaScript 的重复项但最好的答案已经很旧了(也许有新的东西？)，我也想以开放式的方式解决这个问题，并提出一个更广泛的问题，即是否有更好的方法以高性能的方式发送数据，而不是我正在尝试做什么。

我目前正在使用由 C# 服务器运行的 webrtc 制作实时游戏。

为了更新客户端，我目前正在使用此代码将数字转换为 byte[]，然后我可以将其发送到客户端(为了最小化数据，这会变成 50 个字节)。这很重要，因为我每秒会发送多次更新。

public static byte[] UserLocationToByte(long userId, double x, double y, double r, double dx, double dy)
{
    var msg = new List<byte[]>
    {
        BitConverter.GetBytes((short)DataMessageType.Location),
        BitConverter.GetBytes(userId),
        BitConverter.GetBytes(x),
        BitConverter.GetBytes(y),
        BitConverter.GetBytes(r),
        BitConverter.GetBytes(dx),
        BitConverter.GetBytes(dy)
    };

    var t = msg.SelectMany(a => a).ToArray();
    return t;
}

在 C# 中，我可以使用以下命令将其转换回数值。

// convert it back.
var rtype = (DataMessageType)BitConverter.ToInt16(bytes, 0);
var ruserId = BitConverter.ToInt64(bytes, 2);
var rx = BitConverter.ToDouble(bytes, 2 + 8);
var ry = BitConverter.ToDouble(bytes, 2 + 8 + 8);
var rr = BitConverter.ToDouble(bytes, 2 + 8 + 8 + 8);
var rdx = BitConverter.ToDouble(bytes, 2 + 8 + 8 + 8 + 8);
var rdy = BitConverter.ToDouble(bytes, 2 + 8 + 8 + 8 + 8 + 8);

四处搜索，我发现没有简单的方法可以在 javascript/typescript 中执行此操作。

我可以用 | 发送字符串分隔符并在 JavaScript 中解析它们，但这会增加很多数据量。

关于如何在 javascript 中解析 byte[] 或其他方式来解决这个问题，有什么建议吗？

我只支持 Firefox 和 Chrome 没有问题。

Answer 1

好吧，假设一个 unsigned int 对于 userid 来说足够大了。

您可以使用 DataView，

下面是一个示例，它将返回一个 ArrayBuffer，您可以使用它来发送数据等。

每组末尾的 true 是为了使用小尾数法，这应该与 Windows 上的 C# 兼容。

如果您使用的是 Chrome，您可以查看 ArrayBuffer 中的内容并确认它看起来是否正确。

const msgTypeLocation = 1;


function UserLocationToByte(userId, x, y, r,  dx, dy)
{
  const buffer = new ArrayBuffer(46);
  const dv = new DataView(buffer);
  let o = 0;
  dv.setInt16(0, msgTypeLocation, true); o += 2;
  dv.setUint32(o, userId, true); o += 4;
  dv.setFloat64(o, x, true); o += 8;
  dv.setFloat64(o, y, true); o += 8;
  dv.setFloat64(o, r, true); o += 8;
  dv.setFloat64(o, dx, true); o += 8;
  dv.setFloat64(o, dy, true); o += 8;
  return buffer;
}


const data = UserLocationToByte(10, 20.0, 30.0, 40.0, 10.0, 12.0);
console.log(data);

Look in Chrome Console, etc. to see the bytes.