HTML and CSS Reference
In-Depth Information
Putting it all together
You might be wondering where is the server code that handles the requests, receives
the images, and updates the video frames. We deliberately left out the server-side
part in order to focus on the client-side JavaScript code. For the purposes of our chat
demo web app, we'll now show you both the client and the server code. Once more,
note that you can use the programming language and frameworks of your choice to
implement the WebSocket server.
Let's have a close look at the new parts you'll implement.
Sending the nickname and message using JSON
At first, you'll add one more text field to the HTML document, in order for the user to
type his/her preferred nickname. You'll send the nickname along with the text mes-
sage by encoding them in JSON format.
Add a new text input just before the message input:
<label id="status-label">Status...</label>
<input type="text" id="name-view"
placeholder="Your name" />
<input type="text" id="text-view"
placeholder="Type yourmessage..." />
Then, create a reference to the JavaScript code:
var nameView =
And finally, send the nickname and the message to the server, as you did a few pages
buttonSend.onclick = function (event) {
if (socket.readyState == WebSocket.OPEN) {
var json = "{ 'name' : '" + nameView.value +
Search WWH ::

Custom Search