Jan-Carel Brand - Instant messaging and real-time functionality with XMPP and backbone.js

published Oct 12, 2012

Talk during the Plone Conference 2012.

Jan-Carel Brand talks about instant messaging and real-time functionality with XMPP and backbone.js, at the Plone conference 2012.

This is about real-time, collaborative applications in Plone. The obvious example is instant messaging. The roots of XMPP are in there, especially Jabber. You can with XMPP have voice and video conferencing. There is an extension for that: jingle. You can use that to tranfer any data, so sending files to another. You can do feeds and notifications, with a publication/subscription (PubSub) setup. Collaborative editing is possible and that is what blew me away.

collective.xmpp.chat is a chat client. See the code on github: https://github.com/collective/collective.xmpp.chat

There is hardly anything that actually accesses the Plone server during the chatting. We only get the full name, otherwise you could keep chatting even when the server is down.

Building blocks are:

  • An XMPP Server and connection manager. Your browser makes a connection to the connection manager. Recommended is ejabberd, written in Erlang, which seems like a good language to use for this.
  • Nginx or Apache does the reverse proxy for the connection manager.
  • Plone add-ons:
    • collective.xmpp.core maps your Plone users to XMPP users. Thanks to Yiorgis Gozadinos for this!
    • collective.xmpp.collaboration
    • collective.xmpp.chat
    • collective.xmpp.pubsub

How does XMPP work?

  • It is the eXtensible Messaging and Presence Protocol
  • You need a Universal Unique Identifier (JID), like jcbrand@jabber.plone.org/sprint
  • Some data exchanged as XML stanzas: presence (status), messages, information or query.
  • A roster and a social graph: list/graph of contacts.

Stroph.js is your XMPP library for connecting to the server. It connects via BOSH to the XMPP server. You can add handlers for the stanzas with this or build your own stanzas. There are several plugins for it.

Backbone.js enables structured Javascript. You use this for example to show a chat box. The models have key/value bindings, custom events when a model has changed. You have a collection of models. Views: declarative event handling, templates (from underscore.js). Sync it with JSON if needed, like if you want to save the conversations in Plone.

I want everyone to be excited about what we can do real-time in Plone. Some ideas, with some that are already available:

  • Messaging:
    • multi/single user chat
    • file sharing
  • Collaboration:
    • documents, whiteborads, UML, mind maps
    • translations
    • pair programming in the Plone IDE or the Theme Editor
  • Continuous feedback:
    • system status messages
    • user feeds (twitter inside your intranet)
  • Audio or video conferencing

My website http://opkode.com

There is a buildout on github that you can clone:

https://github.com/collective/collective.xmpp.buildout

Ask me during the sprint if you want some assistence setting this up.

Keywords
ploneconf2012 plone