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>

这个看起来比较高大上吧.

posted @ 2014-08-06 14:24  SkyTeam_LBM  阅读(10667)  评论(1)  编辑  收藏  举报