WebSocket 前后端实时监听推送

拼搏现实的明天。 2021-07-24 21:09 764阅读 0赞

1、安装
    	cnpm install ws --save
    
    2、使用
    	(1)后台开启监听
    		const WebSocket = require('ws');
    
    		const wss = new WebSocket.Server({
    		  port: 监听端口
    		});
    		
    		wss.on('connection',(clinet)=>{
    			接收前台发送的数据
    			client.on('message',(msg)=>{
    				msg为后台接收数据
    			})
    			
    			发送给前台的数据
    			clinet.send('数据');
    		})
    		
    		获取所有连接的客户端对象
    		wss.clients
    		wss.clients.forEach(client=>{
    			client.send('xx'); 给每个客户端发送数据
    		})
    	
    	(2)前台监听
    		浏览器内置了WebSocket,故不需要引入可直接使用
    		
    		 创建连接对象
    		 const ws = new WebSocket('ws://后台域名:端口号');
    		 	如:'ws://127.0.0.1:端口号' 
    		 	  'ws://localhost:端口号'
    		 
    		 监听是否连接成功
    		 ws.onopen=()=>{
    		 	监听后台发送信息
    			ws.onmessage=(msg)=>{
    				msg.data
    			}
    			前台发送后端
    		 	ws.send('数据')
    		 }
    
    		 监听关闭
    		 ws.onclose=fn

代码示例:  
后台

前台:

mounted()
      { 
      
          const ws = new WebSocket('ws://127.0.0.1:8000');
          ws.onopen=()=>{ 
            ws.send('来自前端');
    
            ws.onmessage=(e)=>{ 
                console.log(e);
            }
          }
          ws.onclose=()=>{ 
              console.log('断开连接');
          }
          
      },