uniapp通过websocket实现手机APP通知栏消息显示功能（前端部分）-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp通过websocket实现手机APP通知栏消息显示功能（前端部分）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

开门见山地说，在移动应用端，从后端及时获取消息，展示到手机消息通知栏上面来与用户进行交互是一个很高频的应用场景，这篇文章就来介绍一下，在uniapp开发中如何实现这种需求。
要实现这个需求，对于前端来说主要技术需要拆分成两部分：一是从后端及时获取消息，本文介绍的方式是通过websocket获得后端推送的最新消息。二是将获得的消息展示到手机的通知栏上面，将内容展示给用户。

一.websocket的前端实现

在components中新增websocket.js，复制一下代码：文章来源地址https://www.toymoban.com/news/detail-841172.html

let isSocketClose = false; // 是否关闭socket
let 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(