webSoket用來實現雙向通信，客戶端和服務端實時通信。
webSoket優點和缺點：
優點：對於前端來說，使用簡單，功能靈活，如果部署了webSocket服務器，可以實現實時通信。
缺點：需要服務端技術的支持，如果websocket數據量比較大的話，會嚴重消耗服務器的資源。
例子：
1 websocket服務器端搭建
//初始化一個node項目：node init，一路確認就可以,文件夾會自動創建一個package.json文件 // 下載ws文件 npm i -save ws //獲得WebSocketServerr類型 var WebSocketServer = require('ws').Server; //創建WebSocketServer對象實例，監聽指定端口 var wss = new WebSocketServer({ port:8080 }); //創建保存所有已連接到服務器的客戶端對象的數組 var clients=[]; //為服務器添加connection事件監聽，當有客戶端連接到服務端時，立刻將客戶端對象保存進數組中 wss.on('connection', function (client) { console.log("一個客戶端連接到服務器") if(clients.indexOf(client)===-1){//如果是首次連接 clients.push(client) //就將當前連接保存到數組備用 console.log("有"+clients.length+"客戶端在線") //為每個client對象綁定message事件，當某個客戶端發來消息時，自動觸發 client.on('message',function(msg){ console.log('收到消息'+msg) //遍歷clients數組中每個其他客戶端對象，並發送消息給其他客戶端 for(var c of clients){ if(c!=client){//把消息發給別人 c.send(msg); } } }) } })
2 用來發送信息的標簽頁
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 這個頁面是用來發送信息的 --> <input type="text" id="msg"> <button id="send">發送</button> <script> //建立到服務端webSoket連接 var ws=new WebSocket("ws://localhost:8080") send.onclick=function(){ if(msg.value.trim()!=''){//如果msg輸入框內容不是空的 ws.send(msg.value.trim()) //將msg輸入框中的內容發送給服務器 } } </script> </body> </html>
3 接收消息的標簽頁
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 這個標簽頁是用來接收信息的 --> <h1 >收到的消息:<p id="recMsg"></p></h1> <script> //建立到服務端webSoket連接 var ws=new WebSocket("ws://localhost:8080") //當連接被打開時，注冊接收消息的處理函數 ws.onopen=function(event) { //當有消息發過來時，就將消息放到顯示元素上 ws.onmessage=function(event) { recMsg.innerHTML=event.data; } } </script> </body> </html>
轉自：https://blog.csdn.net/aweo960421621/article/details/101973580