HTML and CSS Reference
In-Depth Information
Listing 4-13.
Sending a Message Stanza to the Server
<message type="chat" to="desktopuser@localhost">
<body>
I like chatting. I also like angle brackets.
</body>
</message>
To build this message with Strophe.js, use the
$msg
builder function. Create a
message stanza with the
type
attribute set to
chat
and the
to
attribute set to the user with
whom you want to chat. The other user should receive the message shortly after you send
the message on the connection. Listing 4-14 shows an example of this message stanza.
Listing 4-14.
Building a Message with Strophe.js
// Create chat UI
var chatArea = document.getElementById("chatArea");
var toJid = document.createElement("input");
toJid.setAttribute("placeholder", "user@server");
chatArea.appendChild(toJid);
var chatBody = document.createElement("input");
chatBody.setAttribute("placeholder", "chat body");
chatArea.appendChild(chatBody);
var sendButton = document.createElement("button");
sendButton.textContent = "Send";
sendButton.onclick = function() {
var message = $msg({to: toJid.value, type:"chat"})
.c("body").t(chatBody.value);
connection.send(message);
}
chatArea.appendChild(sendButton);
And now, you're chatting. Of course, you can chat between web clients, desktop
clients, or a combination of the two. This chat application is a great example of HTML5
and WebSocket enabling desktop-class experiences in the web browser through
integration with standard network protocols. This web application is a true peer of the
desktop client. They are both first-class participants in the same network, because they
understand the same application level protocol. And yes, XMPP is a standard protocol,
even if this particular layering onto WebSocket is not yet standardized. It retains nearly all
of the benefits of XMPP over TCP, even as a draft.
Conversations between any number of web and desktop clients are possible.
The same users can connect from either client. In Figure
4-11
, both users are using the
web client.
