WebSocket 前后端实时监听推送

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

代码示例:
后台

const Koa=require('koa');
const Router=require('koa-router');
const WebSocket = require('ws');

const app=new Koa();
const router=new Router();

app.use(require('./middleware/koa_duration'));

app.use(require('./middleware/koa_data'));

app.use(router.routes())
    .use(router.allowedMethods());

router.get('/',async(ctx,next)=>{
    ctx.body='hello';
})

app.listen(3000,()=>{
    console.log('this koa server is running at http://localhost:3000/');
})

//开启后台socket监听

const ws = new WebSocket.Server({
  port:8000
})

ws.on('connection',client=>{
  console.log('有客户端链接');
  client.on('message',msg=>{
    console.log(msg);
    client.send('后台发送的数据');
  })
})




前台:

  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('断开连接');
      }
      
  },
  • 1
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Spring Boot是一个用于开发和部署Java应用程序的框架,它简化了应用程序的配置和部署过程。WebSocket是一种通过单个持久连接实现全双工通信的协议,它可以实现实时的消息推送和交互。RocketMQ是一个开源的分布式消息中间件,可以实现高效可靠的消息传递。 要实现Spring Boot与WebSocket和RocketMQ的实时消息推送,可以按照以下步骤进行操作: 1. 首先,需要引入相关的依赖,如Spring Boot、WebSocket和RocketMQ的依赖。 2. 在Spring Boot中配置WebSocket的相关信息,包括WebSocket的端点、握手拦截器等。 3. 实现WebSocket的处理器,用于处理WebSocket的连接、断开、消息发送等操作。 4. 在RocketMQ中配置生产者和消费者,用于发送和接收实时消息。 5. 在WebSocket的处理器中,通过RocketMQ的消费者监听相关的消息队列,一旦接收到消息,即可通过WebSocket进行实时推送。 6. 在前端页面中,通过建立WebSocket的连接,即可接收后端实时消息并进行展示或处理。 通过以上步骤,就可以实现Spring Boot与WebSocket和RocketMQ的实时消息推送。当有新的消息产生时,RocketMQ会将消息发送到指定的消息队列,WebSocket的处理器通过监听该消息队列并将消息推送给连接的前端页面,实现了实时的消息推送功能。同时,通过Spring Boot的便利性和RocketMQ的高效性,可以更加方便地实现实时消息推送的需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值