這篇文章主要介紹了Javascript實現網絡監測的方法,可實現檢測網絡連接及網速的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了Javascript實現網絡監測的方法。分享給大家供大家參考。具體實現方法如下：

該代碼可監測網絡是否連接及網速的快慢狀態。

1. (function(){ 
2. var network = function(){ 
3. var monitor = this; 
4. /** 
5. * @param {Funcation} speedInterval 
6. */ 
7. var speedInterval = null; 
8. /** 
9. * @param {Function} networkInterval 
10. */ 
11. var networkInterval = null; 
12. /** 
13. * @param {Function} reNetworkInterval 
14. */ 
15. var reNetworkInterval = null; 
16. var time = 5000; 
17. /** 
18. * 獲取網絡連接狀態 
19. */ 
20. var getConnectState = function(){ 
21. return navigator.onLine ? 1 : 0; 
22. };  
23. /** 
24. * 網絡中斷 
25. */ 
26. var disconnect = function(){ 
27. // TODO ...  
28. console.log("網速中斷"); 
29. window.clearInterval(reNetworkInterval); 
30. reNetworkInterval = null; 
31. endSpeed(); 
32. endNetwork(); 
33. window.setTimeout(function(){ 
34. reNetworkInterval = window.setInterval(function(){ 
35. if (getConnectState() == 1) { 
36. window.clearInterval(reNetworkInterval); 
37. reNetworkInterval = null; 
38. startSpeed(); 
39. startNetwork(); 
40. } else { 
41. window.clearInterval(reNetworkInterval); 
42. reNetworkInterval = null; 
43. disconnect(); 
44. } 
45. }, time); 
46. }, 2 * time); 
47. }; 
48. /** 
49. * 網絡速度 
50. */ 
51. var speed = { 
52. /** 
53. * 網速過慢 
54. */ 
55. bad : function(){ 
56. // TODO ...  
57. console.log("網速過慢"); 
58. window.setTimeout(function(){ 
59. if(getConnectState() == 1) { 
60. window.clearInterval(networkInterval); 
61. networkInterval = null; 
62. startSpeed(); 
63. } else { 
64. disconnect(); 
65. } 
66. }, 2 * time); 
67. }, 
68. /** 
69. * 網速中等 
70. */ 
71. medium : function(){ 
72. // TODO ...  
73. console.log("網速中等"); 
74. }, 
75. /** 
76. * 網速極佳 
77. */ 
78. great : function(){ 
79. // TODO ...  
80. console.log("網速極佳"); 
81. } 
82. }; 
83. /** 
84. * 開啟速度監測 
85. * @private 
86. */ 
87. var startSpeed = function(){ 
88. window.clearInterval(speedInterval); 
89. speedInterval = null; 
90. if(getConnectState() == 1) { 
91. speedInterval = window.setInterval(function(){ 
92. var start = new Date().getTime(); 
93. if (getConnectState() == 1) { 
94. var img = document.getElementById("networkSpeedImage"); 
95. if (!!!img) { 
96. img = document.createElement("IMG"); 
97. img.id = "networkSpeedImage"; 
98. img.style.display = "none"; 
99. document.body.appendChild(img); 
100. } 
101. try { 
102. img.src = "http://www.baidu.com/img/baidu_jgylogo3.gif?_t=" + new Date().getTime(); 
103. img.onload = function(){ 
104. var end = new Date().getTime(); 
105. var delta = end - start; 
106. if (delta > 200) { 
107. speed.bad(); 
108. } else if (delta > 100) { 
109. speed.medium(); 
110. } else { 
111. speed.great(); 
112. } 
113. }; 
114. } catch(e){ 
115. speed.bad(); 
116. } 
117. } else { 
118. // TODO 網絡斷開 
119. disconnect(); 
120. } 
121. }, time); 
122. }else { 
123. // TODO 網絡斷開 
124. disconnect(); 
125. } 
126. }; 
127. /** 
128. * 停止速度監測 
129. * @private 
130. */ 
131. var endSpeed = function(){ 
132. window.clearInterval(speedInterval); 
133. speedInterval = null; 
134. }; 
135. /** 
136. * 開啟網絡連接監測 
137. * @private 
138. */ 
139. var startNetwork = function(){ 
140. if (getConnectState() == 1) { 
141. networkInterval = window.setInterval(function(){ 
142. if (getConnectState() == 0) { 
143. disconnect(); 
144. } 
145. }, time); 
146. } else{ 
147. disconnect(); 
148. } 
149. }; 
150. /** 
151. * 結束網絡連接監測 
152. * @private  
153. */ 
154. var endNetwork = function(){ 
155. window.clearInterval(networkInterval); 
156. networkInterval = null; 
157. }; 
158. /** 
159. * 網絡監控開始 
160. */ 
161. this.start = function(){ 
162. startNetwork(); 
163. startSpeed(); 
164. }; 
165. /** 
166. * 停止網絡監控 
167. */ 
168. this.stop = function(){ 
169. endSpeed(); 
170. endNetwork(); 
171. }; 
172. }; 
173. window.network = new network(); 
174. }).call(this); 
175. // 調用的時候,直接調用network.start(); 

希望本文所述對大家的javascript程序設計有所幫助。