Advanced Search

Implementation of a publisher-subscriber pattern in JQuery to poll network availability

/ Published in: Other
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. 	<head>
  4. 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. 		<title>Network Detection With jQuery</title>
  6. 		<link rel="stylesheet" href="/css/main.css" type="text/css" media="all" />
  7. 		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
  8. 		<script type="text/javascript">
  9.  
  10. 			// see article http://jamazon.co.uk/web/2008/06/17/publish-subscribe-with-jquery/
  11.  
  12. 			$.networkDetection = function(url,interval){
  13.  
  14. 				var url = url;
  15. 				var interval = interval;
  16. 				online = false;
  17. 				this.StartPolling = function(){
  18. 					this.StopPolling();
  19. 					this.timer = setInterval(poll, interval);
  20. 				};
  21.  
  22. 				this.StopPolling = function(){
  23. 					clearInterval(this.timer);
  24. 				};
  25.  
  26. 				this.setPollInterval= function(i) {
  27. 					interval = i;
  28. 				};
  29.  
  30. 				this.getOnlineStatus = function(){
  31. 					return online;
  32. 				};
  33.  
  34. 				function poll() {
  35. 					$.ajax({
  36. 						type: "POST",
  37. 						url: url,
  38. 						dataType: "text",
  39. 						error: function(){
  40. 							online = false; 
  41. 							$(document).trigger('status.networkDetection',[false]);
  42. 						},
  43. 						success: function(){
  44. 							online = true; 
  45. 							$(document).trigger('status.networkDetection',[true]);
  46. 						}
  47. 					});
  48. 				};
  49.  
  50.  
  51. 			};
  52.  
  53. 			$(document).ready(function(){
  54.  
  55. 				network = new $.networkDetection("poll.php", 5000);
  56. 				network.StartPolling();
  57.  
  58. 				$(document).bind("status.networkDetection", function(e, status){	
  59. 					// subscribers can be namespaced with multiple classes
  60. 					subscribers = $('.subscriber.networkDetection');
  61. 					// publish notify.networkDetection to subscribers
  62. 					subscribers.trigger("notify.networkDetection", [status])
  63. 					/*
  64. 					other logic based on network connectivity could go here
  65. 					use google gears offline storage etc
  66. 					maybe trigger some other events
  67. 					*/
  68. 				});
  69.  
  70. 				/* 
  71. 				Listen for notify.networkDetection events. This could equally be listening
  72. 				directly to status.networkDetection events
  73. 				*/
  74. 				$('#notifier').bind("notify.networkDetection",function(e, online){
  75. 					// the following simply demonstrates
  76. 					notifier = $(this);
  77. 					if(online){
  78. 						if (!notifier.hasClass("online")){
  79. 							$(this)
  80. 								.addClass("online")
  81. 								.removeClass("offline")
  82. 								.text("ONLINE");
  83. 						}
  84. 					}else{
  85. 						if (!notifier.hasClass("offline")){
  86. 							$(this)
  87. 								.addClass("offline")
  88. 								.removeClass("online")
  89. 								.text("OFFLINE");
  90. 						}
  91. 					};
  92. 				});
  93.  
  94. 			});
  95. 		</script>
  96.  
  97.  
  98. 		<style type="text/css">
  99.  
  100. 			* {
  101. 				font-family:verdana, arial, helvetica, sans-serif;
  102. 				font-weight:bold;
  103. 			}
  104.  
  105. 			#notifier{
  106. 				margin:auto;
  107. 				margin-top:200px;
  108. 				border:1px solid #ccc;
  109. 				color:#333;
  110. 				width:300px;
  111. 				padding:20px;
  112. 				text-align:center;
  113. 			}
  114.  
  115. 			#notifier.online{
  116. 				color:#fff;
  117. 				background:#3c3;
  118. 				border-color:#3c3;
  119. 			}
  120.  
  121. 			#notifier.offline{
  122. 				color:#fff;
  123. 				background:#f66;
  124. 				border-color:#f66;
  125. 			}
  126.  
  127.  
  128. 		</style>
  129.  
  130. 	</head>
  131. <body>
  132. 	<ul id="listItems">
  133. 	</ul>
  134.  
  135. 	<div id="notifier" class="subscriber networkDetection online">ONLINE</div>
  136.  
  137. </body>
  138. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.