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

2024-05-30 阅读：1436 类型：前端分类：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>'
	  });
	 }
	};
}