socket.io frames data not readable in chrome devtools - websocket

Question

Server :
function startServer() {
const io = new Server().attach(8090);
io.on('connection', (socket) => {
console.log("connection on server");
socket.emit('test','test data');
});
}
Client :
const socket = io(`${location.protocol}//${location.hostname}:8090`);
socket.on('test', (data) => {
console.log(data);
})
Then :
I start the server
I open the client code
Server log output :
connection on server
Client console output :
test data
So all looks good, but when I open the websocket panel on chrome devtools i see this :
I cannot find the websocket data in the frames : only the "probe" thing and numbers.
How can I see frames data ?
Using https://www.websocket.org/echo.html I can perfectly read data in the frames :

Answer 1

The 2probe and random numbers you are seeing in the Frames panel is the Packet Type, followed by a ping/pong between client and server. You can read the details here.
You can only view data in the Frames panel if you are broadcasting messages from the server. In your case, you are sending a message with data to the client connected and handling it in a callback. If you want both yourself and all other clients to see the data, use:
io.sockets.emit('test', 'test data');
If two client connections are made to the server, both will receive test data, when the event is handled with the test event on the client. When the second client connects, you will see the message in the Frames panel. You don't see it for your own connection.
If you want to only broadcast that message to all other client, but not yourself, use:
socket.broadcast.emit('test','test data');
You can see some more information in chrome://net-internals/, indicating the data being sent, though it doesn't show you the actual text content unless you have a network sniffing tool like Wireshark or Fiddler.