DuelJS 介紹

js-coder發表於2018-06-15

DuelJS 是什麼？

DuelJS是一個快速和小型的JavaScript庫，可以幫助實現瀏覽器tab頁主從關係的切換。使用它可以優化你瀏覽器和伺服器之間的通訊，以及你瀏覽器內部tab頁之間的通訊。

對於我而言，我關注的就是它可以幫助實現同域名下不同視窗（tab）之間通訊，可以廣播訊息。

簡言

DuelJS中的基本元素是channel。Channel為同一個站點的不同瀏覽器tab之間提供了一個特有的共享空間。

var channel = duel.channel(`example`); // build your channel

每一個視窗只有連個可能的狀態：核心方和從屬方。核心方視窗是指當前活動的視窗（也就是獲得焦點的視窗）。

檢測當前視窗是否是核心方視窗的方法是：

window.isMaster()

你可以使用它來判斷，並獲取聊天資訊，例如：

if (window.isMaster()) {
    updateChatWindow(); // user function
}

越多越好

你想要更多的功能嗎？是的，我們是有的。廣播功能是系統向所有channel（視窗）廣播訊息的功能，舉例如下：

 1 <script type="text/javascript">
 2     var channel = duel.channel(`test`);
 3     document.title = `Master ` + duel.getWindowID();
 4 
 5     channel.on(`demo_trigger`, function (message) {
 6         console.info((new Date).getTime(), message)
 7     });
 8 
 9     setInterval(function () {
10         document.title = (window.isMaster() ? `Master ` : `Slave `) + duel.getWindowID();
11     }, 100);
12 </script>
13 <button onclick="channel.broadcast(`demo_trigger`, `hello world`)">
14     channel.broadcast(`demo_trigger`, `hello world`)
15 </button>