java怎么实现有消息时显示红点_未读消息（小红点），RabbitMQ实时消息推送实践，贼简单

在 Java 中实现有消息时显示红点可以通过以下步骤实现：

1. 在前端页面中添加一个元素，用来显示红点，比如一个小圆点。

2. 在后端代码中，当有新消息时，将该元素的状态设置为可见。

3. 将该元素的状态传递到前端页面，使其在页面上显示。

以下是一个示例代码：

// 在后端代码中，当有新消息时，将该元素的状态设置为可见
boolean hasNewMessage = true;

// 将该元素的状态传递到前端页面，使其在页面上显示
model.addAttribute("hasNewMessage", hasNewMessage);

在前端页面中，可以通过以下代码根据后端传递的状态来显示或隐藏红点：

<!-- 在前端页面中添加一个元素，用来显示红点 -->
<div class="red-dot" th:if="${hasNewMessage}"></div>

<!-- CSS 样式 -->
<style>
  .red-dot {
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    display: none;
  }
</style>

<!-- JavaScript 代码 -->
<script>
  // 当有新消息时，将该元素的状态设置为可见
  var hasNewMessage = /* 后端传递的状态 */;
  if (hasNewMessage) {
    document.querySelector('.red-dot').style.display = 'block';
  }
</script>

关于 RabbitMQ 实时消息推送，可以使用 RabbitMQ 的 AMQP 协议来实现。具体实现步骤如下：

1. 在后端代码中，使用 RabbitMQ 的 Java 客户端库连接到 RabbitMQ 服务。

2. 创建一个队列，用来存储需要发送的消息。

3. 将需要发送的消息发送到队列中。

4. 在前端页面中，使用 WebSocket 连接到后端代码，接收实时推送的消息。

5. 当有新消息时，后端代码通过 RabbitMQ 将消息发送到队列中，前端页面通过 WebSocket 接收并显示消息。

以下是一个简单的 RabbitMQ 实时消息推送示例代码：

// 后端代码
ConnectionFactory factory = new ConnectionFactory();
factory.setHost("localhost");
try (Connection connection = factory.newConnection();
     Channel channel = connection.createChannel()) {

  // 创建一个队列
  String queueName = "my-queue";
  channel.queueDeclare(queueName, false, false, false, null);

  // 发送消息到队列中
  String message = "Hello, world!";
  channel.basicPublish("", queueName, null, message.getBytes(StandardCharsets.UTF_8));

  // 接收消息并发送到前端页面
  String exchangeName = "my-exchange";
  channel.exchangeDeclare(exchangeName, "fanout");
  String queueName = channel.queueDeclare().getQueue();
  channel.queueBind(queueName, exchangeName, "");
  channel.basicConsume(queueName, true, (consumerTag, delivery) -> {
    String message = new String(delivery.getBody(), StandardCharsets.UTF_8);
    // 发送消息到前端页面
    // ...
  }, consumerTag -> {});
}

// 前端代码
var socket = new WebSocket('ws://localhost:8080/ws');
socket.onmessage = function(event) {
  var message = event.data;
  // 在页面上显示消息
  // ...
};

以上代码仅供参考，实际应用中还需要考虑更多的细节和安全性问题。