├── .github └── FUNDING.yml ├── LICENSE ├── README.md ├── landingpage ├── index.html └── mp3 │ ├── sad_circurs.mp3 │ └── they_say.mp3 ├── tabsub.v1.js └── tabsub.v1.min.js /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: simonfrey 4 | custom: 'https://simon-frey.com/tip' 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Simon Frey 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # TabSub 2 | ## Offline Javascript PubSub between browser tabs 3 | 4 | TabSub offers you an easy to use Javascript PubSub via local storage. No server is required as all messages are shared via the browser built in local storage. 5 | 6 | Give the example a try to see what you can build with TabSub. 7 | 8 | Is this safe for a lot of concurrent writes? To be honest I have no clue. I tried to break it with 10 concurrent writers and everything worked as expected: No message got lost and the messages where in correct order. No warranty here, use at your own risk 😅 9 | 10 | As TabSub uses local store this only works on the same domain, as the browser separates the local storage by domains as security measure. 11 | 12 | TabSub is licensed [MIT](https://github.com/simonfrey/tabsub/blob/master/LICENSE) 13 | 14 | ## Example 15 | 16 | To checkout TabSub in action visit [simon-frey.com/tabsub](https://simon-frey.com/tabsub) 17 | 18 | ## Usage 19 | 20 | ### Including the script 21 | 22 | ```html 23 | 24 | ``` 25 | 26 | ### Initialization 27 | 28 | ```javascript 29 | const ts = new TabSub(); 30 | ``` 31 | 32 | ### Available functions 33 | 34 | #### publish(topic,msg) 35 | 36 | Publish new message. The message can be of any type. Your callback in subscribe has to handle it correctly. TabSub does not take care about that. 37 | 38 | ```javascript 39 | ts.publish("hello","world"); 40 | ``` 41 | 42 | #### subscribe(topic, callback) 43 | 44 | Register new listener. Callback is called with the message content if new message arrives 45 | 46 | ```javascript 47 | ts.subscribe("hello",(msg)=>{ 48 | console.log("Got msg: ",msg); 49 | }); 50 | ``` 51 | 52 | #### state(topic) 53 | Get the current (static) state of a topic. Returns the current data in the local storage for this topic 54 | 55 | ```javascript 56 | const state = ts.state("hello"); 57 | console.log("Current state: ",msg); 58 | ``` -------------------------------------------------------------------------------- /landingpage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TabSub - Offline Javascript PubSub between browser tabs using local storage 5 | 6 | 56 | 57 | 58 | 59 |

TabSub

60 |

Offline Javascript PubSub between browser tabs

61 |

TabSub offers you an easy to use Javascript PubSub via local storage. No server is required as all messages are shared via the browser built in local storage.

62 |

Give the example a try to see what you can build with TabSub.

63 |

Is this safe for a lot of concurrent writes? To be honest I have no clue. I tried to break it with 10 concurrent writers and everything worked as expected: No message got lost and the messages where in correct order. No warranty here, use at your own risk 😅

64 |

As TabSub uses local store this only works on the same domain, as the browser separates the local storage by domains as security measure.

65 |

TabSub is on Github and licensed MIT

66 | 67 |

Example

68 |

Start one of the two songs and than open this site in a second tab. You will see that the playing song time syncs and if you start the other song that the first one stops.

69 |

Look into the source code of this site to see how I used TabSub to built this example.

70 |

71 |

Sad Circus

72 |

76 | 77 |

78 | 79 |

80 |

They say

81 |

85 |

86 |

Usage

87 |

Including the script

88 |

 89 | <script src="https://simon-frey.com/tabsub/tabsub.v1.min.js" 
 90 |     integrity="sha384-WhqYceisw/e1nVVrHA5CI/Lt/c3HrNIZLtPE+sWky3NjzRAF6kt9Ivjp8LwoIS/k" >
 91 | </script>

92 | 93 |

Initialization

94 |

 95 | <script>
 96 |     const ts = new TabSub();
 97 | </script>

98 | 99 |

Available functions

100 | 101 |

publish(topic,msg)

102 |

Publish new message. The message can be of any type. Your callback in subscribe has to handle it correctly. TabSub does not take care about that.

103 |

104 | <script>
105 |     ts.publish("hello","world");
106 | </script>

107 | 108 |

subscribe(topic, callback)

109 |

110 |

111 | <script>
112 |     ts.subscribe("hello",(msg)=>{
113 |         console.log("Got msg: ",msg);
114 |     });
115 | </script>

116 | 117 |

state(topic)

118 |

Get the current (static) state of a topic. Returns the current data in the local storage for this topic

119 |

120 | <script>
121 |     const state = ts.state("hello");
122 |     console.log("Current state: ",msg);
123 | </script>

124 | 125 |

Find my other projects on simon-frey.com

126 | 127 | 167 | 168 | 169 | -------------------------------------------------------------------------------- /landingpage/mp3/sad_circurs.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonfrey/tabsub/4813fb4d7ab2c53125159fc74c2f26fbbda1abfd/landingpage/mp3/sad_circurs.mp3 -------------------------------------------------------------------------------- /landingpage/mp3/they_say.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonfrey/tabsub/4813fb4d7ab2c53125159fc74c2f26fbbda1abfd/landingpage/mp3/they_say.mp3 -------------------------------------------------------------------------------- /tabsub.v1.js: -------------------------------------------------------------------------------- 1 | class TabSub { 2 | constructor() { 3 | this.listeners = {}; 4 | } 5 | publish(topic,msg) { 6 | const dataKey = topic + "_data"; 7 | const jsonData = JSON.stringify([msg,Date.now()]); 8 | 9 | localStorage.setItem(dataKey, jsonData); 10 | 11 | // Dispatch to local event listener as well 12 | var event = new Event("storage"); 13 | event.key=dataKey; 14 | event.newValue=jsonData; 15 | window.dispatchEvent(event); 16 | } 17 | state(topic){ 18 | const dataKey = topic + "_data"; 19 | const dataJSON = localStorage.getItem(dataKey); 20 | if (dataJSON == undefined){ 21 | return undefined 22 | } 23 | return JSON.parse(dataJSON)[0]; 24 | } 25 | subscribe(topic, callback) { 26 | if (this.listeners[topic] == undefined) { 27 | // Not yet any listener for this topic 28 | this.listeners[topic] = []; 29 | 30 | window.addEventListener('storage', (e) => { 31 | const dataKey = topic + "_data"; 32 | if (e.key === dataKey) { 33 | const data = JSON.parse(e.newValue)[0]; 34 | this.listeners[topic].forEach((v, k) => { 35 | v(data); 36 | }); 37 | } 38 | }, false); 39 | } 40 | this.listeners[topic].push(callback) 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /tabsub.v1.min.js: -------------------------------------------------------------------------------- 1 | class TabSub{constructor(){this.listeners={}}publish(t,e){const s=t+"_data",a=JSON.stringify([e,Date.now()]);localStorage.setItem(s,a);var n=new Event("storage");n.key=s,n.newValue=a,window.dispatchEvent(n)}state(t){const e=t+"_data",s=localStorage.getItem(e);if(null!=s)return JSON.parse(s)[0]}subscribe(t,e){null==this.listeners[t]&&(this.listeners[t]=[],window.addEventListener("storage",e=>{const s=t+"_data";if(e.key===s){const s=JSON.parse(e.newValue)[0];this.listeners[t].forEach((t,e)=>{t(s)})}},!1)),this.listeners[t].push(e)}} --------------------------------------------------------------------------------