HTML and CSS Reference
In-Depth Information
In XMPP, each user has a presence. The presence has an availability value,
represented by a
show
tag, and a
status message
. To change this presence information,
send a presence stanza, as shown in Listing 4-5:
Listing 4-5.
Presence Stanza Example
<presence>
<show>chat</show>
<status>Having a lot of fun with WebSocket</status>
</presence>
Let's add a way for the user to change their status to
chat_app.js
(see Listing 4-6).
First, we can append some basic form controls to set the online/offline portion of the
status, called “
show
” in XMPP parlance. These controls will display as a dropdown menu
with the four choices for availability. The values in the dropdown menu have short
specified names like “dnd” for “do not disturb.” We will also give these human readable
labels like “Away” and “Busy.”
Listing 4-6.
Presence Update UI
// Create presence update UI
var presenceArea = document.getElementById("presenceArea");
var sel = document.createElement("select");
var availabilities = ["away", "chat", "dnd", "xa"];
var labels = ["Away", "Available", "Busy", "Gone"];
for (var i=0; i<availabilities.length; i++) {
var option = document.createElement("option");
option.value = availabilities[i];
option.text = labels[i];
sel.add(option);
}
presenceArea.appendChild(sel);
The status text is free form, so we will use an input element, as shown in Listing 4-7.
Listing 4-7.
Input Element for Status Text
var statusInput = document.createElement("input");
statusInput.setAttribute("placeholder", "status");
presenceArea.appendChild(statusInput);
Finally, we'll add a button that causes the update to be sent out to the server (see
Listing 4-8). The
$pres
function builds a presence stanza. To update the status of the
connected user, the presence stanza contains two child nodes:
show
and
status
. Try
this out, and notice that the desktop client reflects the web user's status practically
instantaneously. Figure
4-8
illustrates the example so far.
