ITエンジニア/デザイナ向けにオープンソースを毎日紹介

タブブラウザが当たり前になっている現在、同じサイトで複数のタブを開いているなんて良くありますよね。そこで片方のタブでデータを修正して、その後別なタブで上書きしてしまったなんて経験はないでしょうか。

サーバサイドを介さず、クライアントサイドだけでタブ間のデータ同期ができるライブラリがsysend.jsです。HTML5 localStrageを使ってメッセージ通信を実現しています。

sysend.jsの使い方

デモのコードは次のようになっています。

window.onload = function() {
    sysend.on('foo', function(message) {
        console.log(message);
    });
    var input = document.getElementsByTagName('input')[0];
    document.getElementsByTagName('button')[0].onclick = function() {
        sysend.broadcast('foo', {message: input.value});
    };
};

sysend.broadcastを使ってメッセージを送信し、sysend.onで受信する仕組みになっています。とてもシンプルですね。

こちらのタブからメッセージを送信します。
こちらのタブからメッセージを送信します。

別なタブでメッセージを受け取りました。
別なタブでメッセージを受け取りました。

サーバサイドは使っていませんので、他のコンピュータにメッセージが送れるという訳ではないのでご注意ください。また、ブラウザ間でメッセージが飛ばせる訳でもありません。あくまでもタブ間なので、用途が限られるかも知れませんが面白い仕組みですね。

sysend.jsはJavaScript製、GPL v3のオープンソース・ソフトウェアです。

jcubic/sysend.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2