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的新特性,受浏览器限制,因此老版本的浏览器可能就不行了

posted @ 2020-09-07 14:11  镇魂帆-张  阅读(764)  评论(0编辑  收藏  举报