HTML and CSS Reference
In-Depth Information
Now, feel free to change the contents of the Message field and click the Send button.
To inspect the WebSocket frames, you'll need to click on the Name on the far left again,
which will refresh the panel on the right, adding the Frames tab, as shown in Figure
A-4
.
Figure A-4.
Inspecting WebSocket frames
The WebSocket Frame inspector shows the data (which is text in this example), the
length of the data, the time it was sent, as well as the direction of the data: a light green
background indicates traffic from the browser to the WebSocket server (upload), and
white indicates traffic from the server to the browser (download).
■
As you're sending Websocket messages, be sure to always click the name
column to trigger the refresh of the frames tab.
Note
As you navigate to the Sources tab, and locate the
echo.js
file, you see a variable
called
"websocket"
that represents our WebSocket connection. By displaying the
Console, you can simply send a message to the WebSocket server, using the
send()
function, as shown in Listing A-2.
