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


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



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. <ul id="listItems">
  132. </ul>
  133.  
  134. <div id="notifier" class="subscriber networkDetection online">ONLINE</div>
  135.  
  136. </body>
  137. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.