Converse.js

What is XMPP?

eXtensible Message and Presence Protocol

Originally intended for instant messaging, also being used for the Internet-of-things.

For an introduction to XMPP and using it with web-technologies, see this talk.

The challenge of integrating XMPP into a website

• Browser's sandbox and APIs don't allow direct XMPP connections
• XMPP and HTTP are fundamentally different
  • HTTP is stateless, request/response based (synchronous) and has a short-lived connection.
  • XMPP is stateful, interactive, bidirectional (asynchronous) and requires a long-running connection.

How do we integrate XMPP into web-apps?

Integration can happen on both ends of a web application:

• Frontend integration
• Backend integration

Frontend integration:

Tunneled communication between browser (Javascript) and XMPP server:

• XMPP-over-HTTP
• XMPP-over-Websocket

Frontend integration:

BOSH

Bidirectional-streams Over Synchronous HTTP

• In use since 2004 (proven and well supported)
• Both "push" and "pull" of data (bidirectionality)
• Uses Long-polling
• Session attachment and resumption
• Requires "connection manager"

Covered by two XEPS:

• XEP-0124 - BOSH
• XEP-0206 - XMPP over BOSH

Frontend integration:

Websocket

See: RFC-7395: An XMPP Subprotocol for WebSocket

• Less transport overhead (compared to BOSH)
• Bidirectional protocol
• Emulating a direct TCP socket connection at the application level
• Quick session resumption requires XEP-0198 (stream management)

Backend integration:

• BOSH (e.g. used for prebinding)
• XMPP client
  (e.g. SleekXMPP, Slixmpp or NodeXMPP. Requires async/events)
• Making HTTP calls (if supported by XMPP server)

Backend Integration

BOSH prebinding

Faster session establishment

• (Server-side) BOSH client establishes session
• Browser XMPP client gets tokens (RID, SID) from app
• Client uses tokens to attach to prebound session

Alternatives:

• Token-based authentication
• External authentication
• RESTful HTTP auth provider
• External auth backend (dovecot, ldap, SQL)

Backend Integration

Sharing data between a web-app and XMPP server

• Should you duplicate and synchronize? (e.g. chat rooms)
  • Atomicity
  • Where is the canonical store?
  • Examples
    • Tigase HTTP API
    • mod_rest for Ejabberd
    • mod_http_rest for Prosody
• Or push/pull when required? (e.g. user accounts, roster)
  Examples:
  
  • mod_http_roster_admin.lua for Prosody

What is Converse.js?

XMPP chat application that runs in your browser.

Uses Strophe.js

• Can be used as standalone aplication at conversejs.org
• Also works on mobile. m.conversejs.org
• Translated into 16 languages
• Supports both BOSH and websocket*
• Well-tested. See conversejs.org/tests.html

Converse.js can be integrated into any website

Made to be configurable, customizable and embeddable.

• Features are toggleable/configurable via config settings
• All features implemented as (removable) plugins
• Disable plugins through white/blacklists (coming soon)

Prove it!

What can be contributed to?

• Translations
• Documentation
• UI/UX Design
• Emoji support
• Voice/Video calls with WebRTC
• OMEMO encryption
• MIX
• IoT integration (UI/UX, communication with devices)
• Easier and more intuitive room moderation
• Integration into other platforms and open-source projects
• HTTP file upload
• Support multiple XMPP accounts
• Getting rid of jQuery

Alternative web-based XMPP chat clients

• Candy Chat
• JSXC
• Cadence (rooms only)
• Kaiwa

First three use strophe.js. Kaiwa uses stanza.io.

Alternative libraries (to Strophe.js)

• stanza.io
• XMPP-FTW