electron桌面应用webSoket实时弹框提示实现

最新推荐文章于 2024-05-10 15:35:35 发布

Lemon今天学习了吗

最新推荐文章于 2024-05-10 15:35:35 发布

阅读量1.5k

点赞数

分类专栏：前端 electron 桌面应用文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/weixin_47978760/article/details/134535393

版权

前端同时被 3 个专栏收录

40 篇文章 0 订阅

订阅专栏

electron

3 篇文章 0 订阅

订阅专栏

桌面应用

3 篇文章 0 订阅

订阅专栏

一、实现效果：网页端或者移动端进行了审核操作，在电脑右下角提示用户查看。

1、当有弹框提示的情况时，会弹出如下提示，点击查看自动跳转到当前地址，点击关闭则关闭当前提示窗口；

2、当有两条及其以上的消息要审核时，弹框的内容会变成如下展示：

二、实现思路：

1、在主进程main.js中创建弹框，并确定弹框的位置；

2、编写弹框内容和样式；

3、在登录成功后使用webSoket实时监听消息；

4、主进程收到消息后触发提示弹框展示；

三、代码实现：

1、主进程main.js中：

// main.js

// 监听
ipcMain.on('remindWindow:close', () => {
  remindWindow.close()
})

// 判断在弹框关闭前一共收到几次消息
let num = 1
ipcMain.on('open-remind', (event, task, twrUrl) => {
  if (remindWindow) {
    num++
    remindWindow.webContents.send('show-remind', task, twrUrl, num)
  } else {
    num = 1
    createRemindWindow(task, twrUrl)
  }
})

// 创建提示弹出窗
const iconPath = path.join(__dirname, './src/img/icon.png')
function createRemindWindow(task, twrUrl) {
  if (remindWindow) remindWindow.close()
  remindWindow = new BrowserWindow({
    height: 180,
    width: 300,
    resizable: false,
    frame: false,
    icon: iconPath,
    show: false,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false, //关闭上下文隔离的
      // preload: path.join(__dirname, './preload.js')
    },
  })

  // 打开控制台
  // remindWindow.webContents.openDevTools()
  remindWindow.removeMenu()
  // 右下角弹出
  const size = screen.getPrimaryDisplay().workAreaSize
  const { y } = tray.getBounds()
  const { height, width } = remindWindow.getBounds()
  const yPosition = y - height

  remindWindow.setBounds({
    x: size.width - width,
    y: yPosition,
    height,
    width,
  })
  remindWindow.setAlwaysOnTop(true)
  remindWindow.loadURL(`file://${__dirname}/src/remind.html`)
  remindWindow.show()
  // 发消息
  remindWindow.webContents.send('show-remind', task, twrUrl)
  remindWindow.on('closed', () => {
    remindWindow = null
  })
}

2、登录成功后获取实时信息弹框提示；

// login.js

  // 获取登录
  async function getLogin({ account, password }) {

   // do something

   if (response.ok) {
        // 登录成功后触发webSoket
        initWebSocket()
      }
  }

  const heartbeatInterval = 30000 // 心跳检测间隔，单位：毫秒
  const reconnectInterval = 3000 // 重连间隔，单位：毫秒
  let socket = null
  let isReconnecting = false
  // 心跳检测
  function startHeartbeat() {
    setInterval(() => {
      if (socket && socket.readyState === WebSocket.OPEN) {
        // 发送心跳消息到服务器
        socket.send('heartbeat')
      }
    }, heartbeatInterval)
  }

  // 获取实时信息弹框提示
  function initWebSocket() {
    const socUrl = 'ws://xxx/xxx'
    socket = new WebSocket(socUrl)
    // 监听连接事件
    socket.onopen = () => {
      console.log('WebSocket连接已建立')
      // 启动心跳检测
      startHeartbeat()
    }
    // 监听消息事件
    socket.onmessage = event => {
      console.log('收到数据：', event)
      // 启动心跳检测
      startHeartbeat()
      if (event.data === 'HeartBeatResp') {
        // 心跳响应消息不做处理
        return
      }
      const socketData = JSON.parse(event.data)
      // 收到消息后发消息给主进程 socketData：提示信息 | twrUrl.value：跳转地址
      if (socketData) {
        ipcRenderer.send('open-remind', socketData, twrUrl.value)
      }
    }

    // 监听关闭事件
    socket.onclose = event => {
      console.log(`websocket连接关闭 code: ${event.code}, reason: ${event.reason}, wasClean: ${event.wasClean}`)
      reconnectWebSocket()
    }

    // 监听错误事件
    socket.onerror = event => {
      console.log('websocket连接错误')
      reconnectWebSocket()
    }
  }
  // websocket重连
  function reconnectWebSocket() {
    if (!isReconnecting) {
      // 连接断开时，触发重连
      isReconnecting = true
      setTimeout(() => {
        initWebSocket()
        isReconnecting = false
      }, reconnectInterval)
    }
  }

3、在src文件夹下新建remind.html实现提示弹框具体内容；

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .custom-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        font-weight: bold;
        background-color: rgb(236, 233, 233);
      }
      .custom-toolbar .close-button {
        cursor: pointer;
        font-size: 20px;
        position: relative;
        bottom: 1px;
      }
      .custom-toolbar .title-text {
        font-size: 16px;
      }
      .custom-toolbar .title-text > img {
        width: 16px;
        height: 16px;
        position: relative;
        top: 2px;
      }
      .reminder {
        text-align: left;
        font-size: 14px;
        height: 100px;
        padding: 10px;
        padding-top: 0;
        line-height: 24px;
        /* letter-spacing: 1.2px; */
        overflow: auto;
      }
      .close,
      .detail-button {
        position: absolute;
        font-size: 14px;
        color: dodgerblue;
        bottom: 10px;
        cursor: pointer;
        z-index: 1;
      }
      .close {
        right: 10px;
      }
      .detail-button {
        right: 50px;
      }
      .num {
        color: dodgerblue;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="custom-toolbar">
      <div class="title-text">
        <img src="./img/icon.png" alt="" />
        xxx小助手
      </div>
      <div class="close-button">×</div>
    </div>
    <span class="detail-button">查看</span>
    <span class="close-button close">关闭</span>
    <div class="reminder"></div>
  </body>
  <script>
    const electron = require('electron')
    const { ipcRenderer } = electron
    const { shell } = require('electron/common')
    const reminder = document.querySelector('.reminder')
    const closeBtns = document.querySelectorAll('.close-button')
    const detailBtn = document.querySelector('.detail-button')
    let socketData
    let url
    ipcRenderer.on('show-remind', (event, task, twrUrl, num) => {
      socketData = task
      url = twrUrl
      if (num) {
        reminder.innerHTML = `您有<span class="num">${num}</span>条信息需要处理，请及时登录xxx系统操作。`
      } else {
        reminder.innerHTML = `<span>${socketData.msgContent}</span>`
      }
      
    })
    // 关闭
    closeBtns.forEach(i => {
      i.addEventListener('click', () => {
        ipcRenderer.send('remindWindow:close')
      })
    })
    // 查看-点击自动跳转到默认浏览器
    detailBtn.addEventListener('click', () => {
      shell.openExternal(`http://${url}/xxx/#/xxx`)
    })
  </script>
</html>

4、综上所述，即可完成桌面提示功能。

Lemon今天学习了吗

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
electron桌面应用webSoket实时弹框提示实现

1、当有弹框提示的情况时，会弹出如下提示，点击查看自动跳转到当前地址，点击关闭则关闭当前提示窗口；一、实现效果：网页端或者移动端进行了审核操作，在电脑右下角提示用户查看。3、在src文件夹下新建remind.html实现提示弹框具体内容；1、在主进程main.js中创建弹框，并确定弹框的位置；3、在登录成功后使用webSoket实时监听消息；4、主进程收到消息后触发提示弹框展示；2、登录成功后获取实时信息弹框提示；4、综上所述，即可完成桌面提示功能。2、编写弹框内容和样式；
复制链接

扫一扫