Chrome DevTools 显示一个空的传出二进制 Web 套接字框架，当它不是真的为空时

Posted 2023-02-16

【中文标题】Chrome DevTools 显示一个空的传出二进制 Web 套接字框架，当它不是真的为空时

【英文标题】：Chrome DevTools show an empty outgoing binary web socket frame when it is not really empty

【发布时间】：2019-05-13 14:50:52

【问题描述】：

Chrome DevTools 最近获得了预览二进制 Web 套接字框架的功能：

WebSocket binary message viewer

我决定对其进行测试，因此我构建了一个简单的 Web 套接字回显测试器和一个 ping Web 套接字客户端，令我惊讶的是，我传入的二进制帧工作正常，并且可以由开发人员工具预览，但传出的帧报告不正确的长度零字节并且不显示数据。我知道帧是正确的，因为服务器只是回显它，所以如果它被破坏，它会回显一个不正确的帧。

我的测试客户端代码如下所示：

const blob = new Blob(['BINARY']);
webSocket.send(blob);

而服务器只是将其 ping 回来：

await socket.SendAsync(new ArraySegment<byte>(buffer, 0, result.Count), WebSocketMessageType.Binary, result.EndOfMessage, CancellationToken.None);

你可以看到完整的服务器和客户端实现in my GitHub repository。

输出帧：

传入帧：

什么可能导致 Chrome 错误地显示传出帧？我可能是在构建 blob 错误吗？

【问题讨论】：

我认为这可能是 Chrome 的问题，所以我用它们填充了一个错误：crbug.com/962857。

【参考方案1】：

这确实是一个 Chrome 错误，我的 Chromium 错误 https://crbug.com/962857 会跟踪它的进度。

一种解决方法是通过提供ArrayBuffer 或类型化数组有效负载而不是Blobs 来发送二进制帧。

将字符串编码为类型化数组 (Uint8Array) 并将其发送如下的示例：

const uint8Array = new TextEncoder().encode('BINARY');
webSocket.send(uint8Array);