WebSocket API使用篇检测浏览器是否支持WebSocket(4)
WebSocket API是下一代客户端-服务器的异步通信方法.前面有三篇文章已经对WebSocket有了一些介绍,这里我总结了一下.我在使用WebSockets API过程中遇到的问题.
1.检测浏览器是否支持HTML5 WebSocket
在使用HTML5 WebSocket API之前，首先需要确认浏览器的支持情况。如果浏览器不支持，我们可以提供一些替代信息，提示用户升级浏览器或者更换浏览器.下面的代码是检测浏览器支持情况的一种方法:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>检测浏览器对WebSocket是否支持</title> 6 <script type="text/javascript"> 7 function loadDemo() 8 { 9 if (window.WebSocket) { 10 document.getElementById("support").innerHTML = "您的浏览器支持多个websocket通信的实例"; 11 } 12 else { 13 document.getElementById("support").innerHTML = "您的浏览器不支持多个websocket通信的实例,建议使用火狐浏览器或者谷歌浏览器"; 14 } 15 } 16 </script> 17 </head> 18 <body onload="loadDemo();"> 19 <div id="support"></div> 20 </body> 21 </html>
这是在火狐浏览器下测试的结果:
注释:目前的测试中发现IE8浏览器和QQ浏览器不支持WebSocket.
2.还有一种检测浏览器是否支持HTML5 WebSockets的另一种方法是使用浏览器控制台(如Firebug或Chrome开发工具)。下图是在Google Chrome中和火狐浏览器中检测自身是否支持WebSockets(若不支持，window.WebSocket命令将返回“undefined“)。
3.今天无意中又写了一个判断浏览器是否支持websocket的方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>检测浏览器对WebSocket是否支持</title> 6 <script type="text/javascript" src="js/jquery-2.1.1.js"></script> 7 <script type="text/javascript"> 8 function Log(Text, MessageType) { 9 if (MessageType == "OK") 10 { 11 Text = "<span style='color: green;'>" + Text + "</span>";//连接已建立 12 } 13 if (MessageType == "ERROR") 14 { 15 Text = "<span style='color: red;'>" + Text + "</span>";//远程连接中断 16 } 17 document.getElementById("support").innerHTML = document.getElementById("support").innerHTML + Text + "<br />"; 18 }; 19 20 $(document).ready(function () { 21 alert("哈哈,我执行了!"); 22 var WebSocketsExist = true;//WebSocketsExist存在 23 try { 24 var dummy = new WebSocket("ws://localhost:8989/test"); 25 } 26 catch (ex) { 27 try 28 { 29 webSocket = new MozWebSocket("ws://localhost:8989/test"); 30 } 31 catch(ex) 32 { 33 WebSocketsExist = false; 34 } 35 } 36 37 if (WebSocketsExist) { 38 Log("您的浏览器支持WebSocket. 您可以尝试连接到聊天服务器!", "OK"); 39 40 } else { 41 Log("您的浏览器不支持WebSocket。请选择其他的浏览器再尝试连接服务器。", "ERROR"); 42 } 43 }); 44 45 </script> 46 </head> 47 <body> 48 <div id='support' ></div> 49 </body> 50 </html>
这个看起来比较高大上吧.
