消息实时刷新怎么实现？

Question

最近想做一个实时聊天 前端采用vue3 后端采用springBoot 聊天功能采用websocket的形式 目前聊天功能已经实现 那请假一下各位 待处理消息的消息怎么做刷新的 比如微信消息聊表，有未处理的消息 会自动刷新 并有红点 这个功能企业实际开发中怎么完成的 ，采用短轮询吗？ 感觉采用短轮询 这样会给后端数据库压力 请教一下 大家在企业开发中 这类需求怎么实现的

Answer 1

很迷茫丶 下午好🌅🌅🌅
本答案参考ChatGPT-3.5

实时刷新消息可以通过以下几种方式实现：

1. WebSocket： WebSocket是一种支持双向通信的网络协议，可以在浏览器和服务器之间建立持久连接，实现实时通信。在你的情况下，已经采用了WebSocket形式实现了聊天功能，可以借助WebSocket的能力来实现消息实时刷新。当服务器端有新的消息时，通过WebSocket将消息推送到前端，前端接收到消息后更新页面内容。

2. 长轮询： 长轮询是一种将客户端请求保持在服务器端的技术，服务器在有新消息时才会响应并返回结果，否则会保持连接。在前端，可以通过定期发送请求到服务器，服务器检查是否有新的消息，并在有新消息时返回。这种方式相对于短轮询可以减少请求次数，但仍然需要不断发起请求查询是否有新消息，会增加服务器的负载和网络流量。

3. 服务器推送： 服务器推送是指服务器主动将消息推送给客户端，而不是客户端主动向服务器发起请求。这可以通过使用特定的协议和技术来实现，例如WebSockets、SSE（Server-Sent Events）等。在这种方式下，服务器可以实时地向客户端发送消息，客户端接收到消息后更新页面内容。服务器推送相比长轮询可以减少不必要的请求，有效减少了网络流量和服务器负载。

针对实时刷新消息的需求，在企业开发中可以采用上述的方式来实现。具体选择哪种方式可以根据具体的场景和需求来决定。在你的情况下，已经使用了WebSocket来实现聊天功能，可以继续沿用WebSocket来实现待处理消息的实时刷新。当消息待处理状态改变时，后端通过WebSocket将消息推送到前端，前端接收到推送的消息后进行相应的处理，例如更新页面内容、显示红点等。

以下是一个WebSocket实现实时刷新消息的示例代码（基于Vue和Spring Boot）：

前端代码（Vue）：

<template>
  <div>
    <ul>
      <li v-for="message in messages">{{ message }}</li>
    </ul>
  </div>
</template>

<script>
import { createApp } from 'vue';

export default {
  data() {
    return {
      messages: [],
    };
  },
  mounted() {
    const socket = new WebSocket('ws://localhost:8080/ws'); // WebSocket连接地址
    socket.onmessage = (event) => {
      const message = event.data;
      this.messages.push(message);
    };
  },
};
</script>

后端代码（Spring Boot）：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(webSocketHandler(), "/ws").setAllowedOrigins("*");
    }
    
    @Bean
    public WebSocketHandler webSocketHandler() {
        return new WebSocketHandler() {
            private final Set<WebSocketSession> sessions = new CopyOnWriteArraySet<>();
            
            @Override
            public void afterConnectionEstablished(WebSocketSession session) throws Exception {
                sessions.add(session);
            }
            
            @Override
            public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
                sessions.remove(session);
            }
            
            @Override
            public void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
                // 处理客户端发送的消息
            }
            
            public void pushMessage(String message) throws IOException {
                for (WebSocketSession session : sessions) {
                    session.sendMessage(new TextMessage(message));
                }
            }
        };
    }
    
    // 在需要推送消息时调用该方法
    public void pushMessage(String message) {
        webSocketHandler().pushMessage(message);
    }
}

在你的业务逻辑中，当有新的待处理消息时，调用pushMessage方法将消息推送给前端。前端通过WebSocket接收到消息后，更新页面内容。

请注意，以上代码只是示例，需要根据具体的业务逻辑和项目结构进行适当的调整和优化。