如何在网页上的我的按钮上有一个突出显示的小图标，以显示新的更新？

编程问答 2022-08-12

问题描述

我目前制作了一个Java Web应用程序。它具有服务器（MyServer）和客户端（网页）。客户端向MyServer发出请求以获取一些信息。 MyServer现在向Confluence API服务器发出请求，以从Confluence空间中最新的Confluence页面获取信息。

当我们单击“新功能”按钮（在我们的客户端-网站中）时，“新功能” Web小部件中将显示Confluence空间中的最新页面。用户可以单击“新增功能”按钮，然后显示“融合”页面中的最新页面。

我现在想做的是-

  1. 每次进行新更新时（在同一Confluence页中进行更改或创建新的Confluence页），我的“新增功能”按钮上都会显示一个高亮的小图标。 （请在附件中找到所需的示例图片-同样，例如在任何聊天应用程序{收到新消息时是Whats app，FbMessanger等}）。
  2. 一旦我的特定用户看到该特定用户的新更新，该高亮显示的小图标就会消失。
  3. 如果所有已登录的用户尚未打开新更新，则它们将首次高亮显示。如果user1将其打开-该高亮显示的小图标应为该user1消失（并且“新增功能”按钮应变为普通的非高亮显示的按钮）。但是，如果他们未打开，则该高亮显示的小图标应留给user2使用。 / li>
  4. 然后，如果我们在Confluence页面中进行了新更改，而user1尚未看到此新更新-突出显示的小图标将再次显示给user1。

我应该怎么做？感谢您的帮助。

enter image description here

解决方法

关于解决问题的通用解决方案，

  1. 您需要实现websocket才能从后端获取实时聊天（如通知）

  2. 您可以编写JavaScript代码来定位元素，在本例中为通知图标。 考虑它的ID是#notifIcon

    隐藏 

    document.getElementbyId('notifIcon').style.display = 'none'

    显示 

    document.getElementbyId('notifIcon').style.display = 'block'

  3. 要使其保持用户特定性，您可以从数据库架构中获取数据并进行相应的更新

  4. 再次使用websocket更新数据