HTML and CSS Reference
In-Depth Information
The Client Library: Strophe.js
To enable your chat application to communicate with your chat server using XMPP over
WebSocket, you need a client library that enables the client to interact with XMPP. In this
example, we use Strophe.js, which is an open-source XMPP client library for JavaScript
that can run in web browsers. Strophe.js provides a low-level API for interacting with
XMPP, and includes functions for constructing, sending, and receiving stanzas. To
build higher-level abstractions like chat clients, you'll need some knowledge of XMPP.
However, Strophe.js is naturally extensible and gives precise control to developers using
the library.
At the time of writing this topic, the stable branch of Strophe.js uses a
communication layer called BOSH. BOSH, specified in the XEP-0124 extension, stands
for Bidirectional-streams over Synchronous HTTP. It is an XMPP-specific way of achieving
bidirectional communication over half-duplex HTTP similar to the Comet techniques
mentioned in Chapter 1. BOSH is older than WebSocket, and was developed out of
similar needs to address the limitations of HTTP.
WeBSOCKet, NOt BOSh
The ejabberd-websocket REAdME calls XMPP over Websocket “a more elegant,
modern and faster replacement to Bosh.” Certainly, now that Websocket has been
standardized and is nearing ubiquitous deployment, Comet-like communication
techniques are quickly becoming obsolete.
see Chapter 8 for a discussion of Websocket emulation, which talks about how to
use Websocket with technologies that do not have native support.
Connecting and Getting Started
Before you start chatting, you need to connect your client to your XMPP/WS server. In this
step, we will establish a connection from an HTML5 client application running in a web
browser to a WebSocket-enabled XMPP server. The socket, once connected, will send XMPP
stanzas back and forth between the client and the server for the duration of the session.
To get started, create a new file called
chat.html
, shown in Listing 4-2. The HTML
portion of the application is just a bare-bones page including the Strophe.js library and
the JavaScript comprising the chat application.
Listing 4-2.
chat.html
<!DOCTYPE html>
<title>WebSocket Chat with XMPP</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="chat.css">
<h1>WebSocket Chat with XMPP</h1>
