A Tale of Cross-Tab

Communication

Neil Jenkins / @neilj

FastMail

Chapter 1: The Problem

In which our multi-tabbed hero is pushed into a problem.

One site, six connections

  • Modern web apps push data
  • Push requires a persistant connection
  • Browsers limit the number of concurrent connections to the same protocol-domain-port combo
  • So when the site is opened in multiple tabs at the same time…

Chapter 2: The Idea

In which our protaginist realises the world would be a nicer place if we all shared with one another.

Thinking like a native

A native app would have a single push connection, shared between the windows.

Communication woes

  • Browser windows only have direct references to each other if one was opened by another :(
  • We therefore need some kind of shared memory or event system to communicate

    • Chapter 3: The Solution

    In which our communication issues are resolved, but our hero gets a nasty headache from a missing lock.

    Local Storage

  • Shared between all windows
  • Even fires a storage event when something changes
  • Pick a key, and use that to send (JSON-encoded) messages

    • Race Conditions

  • Unlike within a page, you can get interleaved execution of JS between windows.
  • This makes synchronisation slightly harder: you can't guarantee ordering of events.

    • Demo time

    http://nmjenkins.com/intertab.html

    The code

    https://gist.github.com/neilj/4146038

    Thank You

    Slides are available at
    http://nmjenkins.com