http环境实现通知

前言

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

一、修改页面的标题属性

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

javascript 复制代码

<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服务

javascript 复制代码

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随便处理了一下

编写页面代码

javascript 复制代码

<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>

这里循环发送请求

看一下结果

虽然这个gif感官不是那么的好，但是很明显是可以的

重点：一定要开启window的系统通知权限，还有不要设置通知尾请勿打扰 这样不会在右下角弹出通知

总结

以上就是关于如何在非localhost和https环境下实现通知功能，如果有更好的方法欢迎大家讨论