Websockets in chrome devtools

Question

Currently working with Socket.IO using websockets. I have a couple of questions regarding how to interpret websockets in the chrome devtools:

When we have the following output in chrome:

Questions:

1. The method still is specified with the HTTP get method verb. Is this because this HTTP protocol is used to initiate the handshake?
2. If we have 4 type = websocket like in this example. Do we actually have 4 websocket connections?
3. One websockets was completed and the other 3 were still pending, what does this mean?

Answer 1

1. Yes, that's because the WebSocket handshake is an HTTP GET request. As you can see in the Status column, the server responded with "101 Switching Protocols", after which the protocol changed to the WebSocket protocol.
2. You seem to have one closed connection and three ongoing connections. Maybe whatever library you're using likes to create multiple connections?
3. The "pending" connections are active connections. The developer tools shows each connection that hasn't been closed yet as "pending". Not the most clear representation, but the dev tools were made to primarily deal with HTTP where individual requests don't last forever.

Free ProTip in case you didn't know: If you click on any of the requests and then click on the Frames tab, you can see all the WebSocket messages in real-time.