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>' }); } }; }
文章评论(0)