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>
這個看起來比較高大上吧.