uniapp通过websocket实现手机APP通知栏消息显示功能（前端部分）_uniapp 通知栏消息

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

一.websocket的前端实现

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

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(
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49