標籤：nop img ima 通過 button put src net 技術
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）也可以查看輸入和發送的資訊。
Chrome 瀏覽器中查看 webSocket 串連資訊
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
