HTML and CSS Reference
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.
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.