vue+elementUi结合websocket实现后台新订单实时消息推送

2024-05-30   阅读:400   类型:前端   分类:Vue    标签: swoole Vue ElementUI

1、前端我们使用vue+elementUI的Notification 通知组件:悬浮出现在页面角落,显示全局的通知提醒消息。

this.$notify({
	   title: '温馨提示',
	   type: 'success',
	   dangerouslyUseHTMLString: true,
	   position: 'top-right',
	   message: '<p>你有新的订单信息:“'+jsonData.pro_id+'”,</p><p>下单时间:“'+jsonData.appointment_date+jsonData.appointment_time+'”,</p>'
});

2、通过结合websocket连接接收后端传过来的数据,实现后台新订单实时消息推送,以下是部分代码:

created () {
	// 创建 WebSocket 连接
	this.socket = new WebSocket('wss://120.125.5.25:9502');
	// 监听连接建立事件
	this.socket.onopen = () => {
	 console.log('连接 Swoole WebSocket 成功!');
	 this.connectionStatus = 'connected'; // 更新连接状态为已连接
	};
	// 监听连接错误事件
	this.socket.onerror = (error) => {
	 console.error('连接 Swoole WebSocket 失败:', error);
	};
	// 监听消息接收事件
	this.socket.onmessage = (event) => {
	 // 解析 JSON 数据
	 var jsonData = JSON.parse(event.data);
	 // 手动解码接收到的数据
	 console.log(jsonData);
	 if(jsonData){
	  this.$notify({
	   title: '温馨提示',
	   type: 'success',
	   dangerouslyUseHTMLString: true,
	   position: 'top-right',
	   message: '<p>你有新的订单信息:“'+jsonData.pro_id+'”,</p><p>下单时间:“'+jsonData.appointment_date+jsonData.appointment_time+'”,</p>'
	  });
	 }
	};
}
【腾讯云】2核2G云服务器新老同享 99元/年,续费同价,云服务器3年机/5年机限时抢购,低至 2.5折

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://tpxhm.com/fdetail/1053.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×