arnellebalane / hermes

Client-side messaging channel for sending data from one browser tab to another

Hermes

Client-side messaging channel for sending data from one browser tab to another with the same origin. Think of it as a PubSub module that can send messages across multiple browser tabs.

To see a demo of Hermes in action, open this page in multiple browser tabs.

Usage

Get a copy of hermes.js or dist/hermes.min.js and include it in your code:

<script src="/path/to/hermes.js"></script>

Hermes also supports AMD, so it can also be included this way:

require(['path/to/hermes'], function(hermes) { });

Hermes exposes an object named hermes which contains the API methods.

API

• send(topic, data, [includeSelf=false]): Send data to other browser tabs subscribed to a specified topic.

  • topic: The name of the topic in which the data will be sent to.
  • data: The data to be sent. This needs to be a JSON-serializable object.
  • includeSelf (optional, default=false): A boolean indicating whether the data should also be sent to the current tab.

  hermes.send('some-topic', 'hello world');
  hermes.send('some-topic', { title: 'awesome' });
  hermes.send('some-topic', { title: 'awesome' }, true);

• on(topic, callback): Add a callback function for a specified topic.

  • topic: The name of the topic to subscribe to.
  • callback: The callback function, which accepts a single argument representing the data that was sent originally.

  hermes.on('some-topic', function(data) { });

• off(topic, [callback]): Remove a callback function for a specified topic.

  • topic: The name of the topic to unsubscribe from.
  • callback (optional): The callback function to remove, or don't provide in order to remove all callback functions for the topic topic.

  hermes.off('some-topic', callbackFunction);
  hermes.off('some-topic');

License

MIT License

hermes's Issues

Compatibility with LocalStorage and IE (11 Tested)

Hi, your API is really great!
I used it and i find a couple issues when i used it on Internet Explorer(11) or in general in LocalStorage mode. I fix that and i'll suggest to you to apply correction.

For the general issue for LocalStorage i notice you make a control in receiving like this (null === e.oldValue). The problem is that "e.oldValue" is never "null" but is defined as empty string (""). So i change the control in ("" === e.oldValue) and it worked.

Specifically for IE(11) you use (e.key.startsWidth(a)) but startsWidth method for Strings is not compatible with IE(11) (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith#Browser_compatibility).

I fix this issue adding the polyFill (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith#Polyfill) to the library.

I hope I was helpful

Long life and prosperity

react-native support?

Hi, does it support react-native? thanks so much

Sending data between pages with different URLs

Does Hermes include a method to send messages between pages with different URLs?
This demo works with only one URL, but it would be even better if there were a way to communicate between pages with several different URLs.

Add to npmjs

Hi,
Could you add this to npmjs? I searched but couldn't find the "official" version of it, and the hermes name is already taken by another package.

Hermes doesn't work with IE 11 & Edge

Hi!
I'm a user of your API for a professionnal use and I just notice that it doesn't work anymore on IE 11 version 11.165.17134.0 and Edge version 42.17134.1.0.
I tried your demo and it's the same issue.
It still works on Firefox.
Cordially