1.以下代碼實現一個webSocket連接，在文本輸入框中輸入內容，點擊發送，通過服務器，返回相同的內容顯示在下方。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>WebSocket</title> 6 </head> 7 <body> 8 <h1>Echo Test</h1> 9 <input type="text" id="sendTxt"> 10 <button id="sendBtn">發送</button> 11 <div id="recv"></div> 12 <script type="text/javascript"> 13 var websocket = new WebSocket("ws://echo.websocket.org/"); 14 websocket.onopen = function(){ 15 console.log("websocket open"); 16 document.getElementById("recv").innerHTML = "Connected"; 17 } 18 websocket.inclose = function(){ 19 console.log('websocket close'); 20 } 21 websocket.onmessage = function(e){ 22 console.log(e.data); 23 document.getElementById("recv").innerHTML = e.data; 24 } 25 document.getElementById("sendBtn").onclick = function(){ 26 var txt = document.getElementById("sendTxt").value; 27 websocket.send(txt); 28 } 29 30 </script> 31 </body> 32 </html>
下面通過Chrom瀏覽器開發者工具查看相關信息：
（1）點擊Network，選中ws欄，注意選中Filter。
（2）刷新頁面，可以看到一個ws連接。
（3）點擊。
（4）也可以查看輸入和發送的信息。
