-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
149 lines (124 loc) · 4.81 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>$.browserEvent() - communicating between windows</title>
<meta name="title" content="$.browserEvent() - communicating between windows" />
<meta name="description" content="$.browserEvent enables communication accross several windows by sending events back and forth." />
<link rel="stylesheet" type="text/css" href="screen.css" />
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.store.js"></script>
<script type="text/javascript" src="jquery.browserEvent.js"></script>
<script type="text/javascript">
(function($,undefined){
// initialize storage
$.storage = new $.store();
$.storageWindow = new $.store( 'windowName' );
var $windows = null,
$windowList = null,
$messages = null,
$messageList = null,
shorten = function( win ){ return 'win' + win.substr( 13 ) };
var handle = {
windowUpdate: function( e, data, ident )
{
$windowList.empty();
$.each( data, function( win, time )
{
var $t = $( '<li></li>' )
.text( shorten(win) )
.appendTo( $windowList )
.data( 'be', win )
.bind( 'click', handle.sendMessage );
if( win === ident )
$t.addClass( 'self' );
});
$( '<li class="info">broadcast</li>' ).appendTo( $windowList ).bind( 'click', handle.sendMessage );
},
message: function( e, data, origin )
{
var $t = $( '<li></li>' ).prependTo( $messageList );
$( '<span class="ident"></span>' ).text( origin === "self" ? 'I sent' : shorten(origin) ).appendTo( $t );
$( '<span class="message"></span>' ).text( data ).appendTo( $t );
if( origin == 'self' )
$t.addClass( 'self' );
$( '<div class="clear"></div>' ).appendTo( $t );
},
ready: function()
{
$( '<li class="info">ready for business…</li>' ).prependTo( $messageList );
},
sendMessage: function()
{
var ident = $(this).data( 'be' );
$.browserEvent.trigger( 'message', 'Hello, how are you?', ident );
}
};
$(function()
{
$windows = $( '#windows' );
$windowList = $( '#windows > ul' );
$messages = $( '#messages' );
$messageList = $( '#messages > ul' );
$.browserEvent.ready = handle.ready;
$.browserEvent
.bind( 'browserWindows', handle.windowUpdate )
.bind( 'message', handle.message )
.init( $.storage, $.storageWindow );
});
})(jQuery);
</script>
</head>
<body>
<h1><code>$.browserEvent()</code> <abbr title="Proof Of Concept">POC</abbr></h1>
<hr />
<div id="wrapper">
<div id="windows">
<h2>Registered Windows</h2>
<ul>
<li>Initializing…</li>
</ul>
</div>
<div id="messages">
<h2>Messages</h2>
<ul>
<li class="info">Initializing…</li>
<li class="info" style="background-color: #FFDDDD">
<strong>Note:</strong> Open this page in several windows. You'll notice they're all being registered in the right box.
You can send a specific window a message by clicking on its entry in the windows-box.
<em>broadcast</em> will send the message to all windows.
</li>
</ul>
</div>
<hr />
<h2>What this is</h2>
<p>
Since tabbed browsing took over, many people have begun to open the same website in multiple tabs.
This is especially true for web-applications and tools you work with every day (e.g. PhpMyAdmin, issue trackers, wikis, …).
Often enough you do something in one tab, switch to another and have to reload, because that modified item of the first tab
was not modified in the second tab as well. Duh!
</p>
<p>
<code>$.browserEvent()</code> aims to fill the gap in communicating in between windows. It offers an API with which you cann easily send
events to other windows displaying the same website. <code>$.browserEvent()</code> accomplishes this by utilizing the <code>localStorage</code>
(or some fallback). Even some sort of locking mechanism has been implemented on top of <code>localStorage</code> to minize race conditions.
</p>
<h2>Why is this only a Proof Of Concept</h2>
<p>
Currently a lot of CPU power goes down the drain. Mostly because of frequent polling and massive JSON de/serialization.
To make <code>$.browserEvent()</code> succeed in the field, some improvements have to made on this end. With 10 registered
windows, Firefox 3.6 eats 20% of my CPU.
</p>
<h2>How you can help</h2>
<p>
Point me in the right direction(s) to reduce CPU consumption.
</p>
<h2>Will this be OpenSource?</h2>
<p>
Yes. Once it's done, I'll release it under the MIT license.
</p>
</div>
</body>
</html>