WebSocket 實現長連接演示代碼


服務端代碼(node)

const WebSocket = require('ws')
const ws = new WebSocket.Server({ port: 8080 },()=>{
    console.log('socket start')
})
// 創建服務器
// 連接監聽 clinet表示已經連接的客戶端對象有多個

let clinets=[] //保存所有客戶端連接
ws.on('connection',(clinet)=>{
  console.log('客戶端已連接')
  clinets.push(clinet)
  // clinet.send('歡迎廣臨')// 主動向前端發送數據  只能發送字符串

  clinet.on('message',(msg)=>{
    // 監聽客戶端發送消息
    console.log('來自前端的問候:')
    console.log(msg)
  })

  clinet.on('close',(msg)=>{
    // 客戶端主動斷開連接
    console.log('客戶端主動斷開連接')
  })  
})

setTimeout(()=>{
  sendAll()
},20000)

//群發 廣播
function sendAll(){
  for (let index = 0; index < clinets.length; index++) {
    let  num=parseInt(Math.random()*200)%3+1
     clinets[index].send(JSON.stringify({type:num}))
    
  }
}

客戶端(H5)

<!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>
  <button onclick="sendserver()">send server</button>
  <script>
    const ws = new WebSocket('ws://localhost:8080/')
    ws.onopen=function(){
      console.log('與服務器連接')
    }
    ws.onmessage=function(msg){
      console.log(msg)
      console.log('來自服務器的問候:'+msg.data)
      let data=JSON.parse(msg.data)
      switch(data.type){
        case 1 :
          alert('恭喜中間')
          break;
      
      case 2 :
          alert('會員到期')
          break;
      
      case 3 :
          alert('收到信息請注意查收')
          break;
      
    }
  }
    ws.onclose=function(){
      console.log('服務器主動斷開連接')
    }
    function sendserver() {
        ws.send('你好我來了')
    } 

  </script>
</body>
</html>

ps

1.websocket 長連接是沒有跨域問題的

2.服務器端和客戶端都是多對多的

3.websocket是H5的新特性,受瀏覽器限制,因此老版本的瀏覽器可能就不行了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM