zoukankan      html  css  js  c++  java
  • 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的新特性,受浏览器限制,因此老版本的浏览器可能就不行了

  • 相关阅读:
    @synthesize 有什么好处?
    javascript isNaN
    nodejs 与 mysql联接
    SQL SERVER 2008 架构
    sql server 2008 索引
    sql server 2008 (3)
    sql server 2008 (1)(2)
    c# 中的 Trim
    无法将该规则转化为等效的IIS格式,因为有不支持的标记:E
    如何解决近期微赞或微擎有些模块提示不是官方安装的解决办法
  • 原文地址:https://www.cnblogs.com/zhenhunfan2/p/13626578.html
Copyright © 2011-2022 走看看