当前位置：首页 > news >正文

http环境实现通知

news 2025/10/15 7:24:09

前言

之前在做项目的时候遇到一个场景，就是希望页面在最小化的时候，如果有消息通知，能够有弹框提示用户；
一开始想的是用Notification，但很可惜，项目只是运行在http的环境中（不要问我为什么是http，用户限定版），所以这个方法就丢弃了；
随后我查阅了大量资料（其实就是ai），找到一些解决方法

一、修改页面的标题属性

这种方式比较好理解，就是当有消息来的时候，修改这个页面的标题，来达到提示信息
举个例子：

<template><div><button @click="handleClick">点击</button></div>
</template>
<script setup lang="ts">
const handleClick = () => {// 修改标题setInterval(() => {document.title = Math.random().toString(36).substring(2);}, 1000);
};
</script>
<style lang="scss" scoped></style>

请添加图片描述
在这里插入图片描述
这样也能实现，但是呢有一些问题
1.首先这个提示很不明显，不注意看根本看不出来
2.需要用户设置任务栏，选择不合并任务栏，如果隐藏标签，必须要鼠标移上去才能查看

这种方法就被pass

二、桌面端

这种方式是可行的，就是将你的网页用electron包装成一个桌面端，通过electron提供的api调用，但是呢需要用electron，包装好可能还需要进行一些样式或者功能的修改，用户还需要额外下一个软件包，也是pass
== tips:过程太麻烦，我就不举例子了 ==

三、通过服务端实现

看到这个方法，有人就有疑惑了，服务端如何实现？
看一下我下面给的demo就知道了
首先，我们需要借用一个插件 node-notifier"
关于插件的概述（ai回答）：
node-notifier 是一款跨平台的 Node.js 通知库，核心作用是让 Node.js 程序调用操作系统原生的通知服务（如 Windows 通知、macOS 通知中心、Linux 通知），生成系统级弹窗或通知，完全独立于浏览器、网页等应用，不受前端环境限制。
看这个描述是不是有点懂了

创建一个node服务

const WebSocket = require("ws");
const notifier = require("node-notifier");// 创建 WebSocket 服务器，监听 8080 端口
const wss = new WebSocket.Server({ port: 8080 });console.log("Node 服务器已启动，监听 ws://localhost:8080");// 监听客户端连接
wss.on("connection", (ws) => {console.log("网页客户端已连接");// 接收网页发送的消息ws.on("message", (data) => {const message = data.toString(); // 解析消息内容console.log("收到网页消息：", message);// 调用系统弹窗（标题、内容、图标可选）notifier.notify({title: "网页消息通知", // 弹窗标题message: message, // 弹窗内容sound: true, // 播放提示音（可选）wait: true, // 等待用户点击再关闭（可选）});});// 监听连接关闭ws.on("close", () => {console.log("网页客户端已断开连接");});
});

这里就用ws随便处理了一下

编写页面代码

<template><div></div>
</template>
<script setup lang="ts">
const ws = new WebSocket("ws://localhost:8080");// 连接成功回调
ws.onopen = () => {console.log("已连接到 Node 服务器");setInterval(() => {const newMsg = "网页收到新消息：您有一条未读通知";console.log("网页内部消息：", newMsg);sendMessageToNode(newMsg); // 转发给 Node 触发弹窗}, 5000);
};// 发送消息给 Node 服务
function sendMessageToNode(message: string) {if (ws.readyState === WebSocket.OPEN) {ws.send(message);console.log("已发送消息到 Node：", message);} else {console.error("连接未建立，无法发送");}
}
</script>
<style lang="scss" scoped></style>