开门见山地说，在移动应用端，从后端及时获取消息，展示到手机消息通知栏上面来与用户进行交互是一个很高频的应用场景，这篇文章就来介绍一下，在uniapp开发中如何实现这种需求。

要实现这个需求，对于前端来说主要技术需要拆分成两部分：一是从后端及时获取消息，本文介绍的方式是通过websocket获得后端推送的最新消息。二是将获得的消息展示到手机的通知栏上面，将内容展示给用户。

一.websocket的前端实现

在components中新增websocket.js，复制一下代码：

let isSocketClose = false; // 是否关闭socketlet reconnectCount = 5; // 重连次数let heartbeatInterval = ""; // 心跳定时器let socketTask = null; // websocket对象let againTimer = null; //断线重连定时器let url = null;let onReFn = null;let onSucFn = null;let onErrFn = null;/** * sockeUrl：websocet的地址 * onReceive：消息监听的回调 * onErrorEvent：抛出错误的回调，且弹窗连接失败的提示框 * onErrorSucceed：抛出成功回调，主要用于隐藏连接失败的提示框 * */const sokcet = (sockeUrl, onReceive, onErrorEvent, onErrorSucceed) => { url = sockeUrl;onReFn = onReceive;onErrFn = onErrorEvent;onSucFn = onErrorSucceed;isSocketClose = false;//判断是否有websocet对象，有的话清空if (socketTask) { socketTask.close();socketTask = null;clearInterval(heartbeatInterval);}//WebSocket的地址// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】let url = sockeUrl// 连接socketTask = uni.connectSocket({ url: url,success(data) { console.log("websocket连接成功");clearInterval(againTimer) //断线重连定时器},fail: (err) => { console.log(url)console.log(