socket.io框架数据在chrome devtools中无法读取

Question

服务器：

function startServer() {
  const io = new Server().attach(8090);

  io.on('connection', (socket) => {
    console.log("connection on server");
    socket.emit('test','test data');
  });
}

客户：

const socket = io(`${location.protocol}//${location.hostname}:8090`);
socket.on('test', (data) => {
  console.log(data);
})

然后：

• 我启动服务器
• 我打开客户端代码

服务器日志输出：

connection on server

客户端控制台输出：

test data

所有看起来都不错，但是当我在chrome devtools上打开websocket面板时，我看到了这个：

我在框架中找不到websocket数据：只有“探测”的东西和数字。

如何查看帧数据？

使用https://www.websocket.org/echo.html我可以完美地读取帧中的数据：

Answer 1

您在“框架”面板中看到的2probe和随机数是数据包类型，然后是客户端和服务器之间的ping / pong。您可以阅读详细信息here。

如果您从服务器广播消息，则只能在“相框”面板中查看数据。在您的情况下，您将向连接的客户端发送包含数据的消息，并在回调中处理它。如果您希望自己和所有其他客户都看到数据，请使用：

io.sockets.emit('test', 'test data');

如果与服务器建立了两个客户端连接，则当客户端上的test data事件处理事件时，两者都将收到test。当第二个客户端连接时，您将在“框架”面板中看到该消息。你没有看到它是为了你自己的联系。

如果您只想将该消息广播给所有其他客户，而不是您自己，请使用：

socket.broadcast.emit('test','test data');

您可以在chrome://net-internals/中看到更多信息，表明正在发送的数据，但除非您拥有Wireshark或{Fiddler等网络嗅探工具，否则它不会显示实际的文字内容{3}}