java+vue实现http1.1长连接前后端示例

以下是一个使用 Java 和 Vue.js 实现 HTTP/1.1 长连接的前后端示例：

后端（Java + Spring Boot）：

@RestController
public class DataController {

    // 注入 SimpMessagingTemplate 对象
    @Autowired
    private SimpMessagingTemplate messagingTemplate;

    // 处理 GET 请求，指定 URL 为 /api/data
    @GetMapping("/api/data")
    public void getData() {
        // 设置 HTTP 头部，指定响应的数据类型
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_JSON);
        // 创建响应对象
        ResponseEntity<String> response = new ResponseEntity<>("{\"message\":\"Hello, World!\"}", headers, HttpStatus.OK);
        // 发送响应数据
        messagingTemplate.convertAndSend("/topic/data", response);
    }
}

在这个示例中，后端使用 Spring Boot 框架创建了一个 GET 请求的处理器，当请求的 URL 为 /api/data 时会返回一个 JSON 格式的响应数据。由于 HTTP/1.1 支持长连接，因此在发送响应数据时，将使用 SimpMessagingTemplate 对象将响应数据发送到 WebSocket 的主题 /topic/data 中，以便前端能够接收到数据。

前端（Vue.js）：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    // 创建一个 WebSocket 连接
    const ws = new WebSocket('ws://localhost:8080/ws');

    // 监听 WebSocket 连接的打开事件
    ws.onopen = () => {
      // 发送一个空消息，以启动 HTTP/1.1 长连接
      ws.send('');
    };

    // 监听 WebSocket 连接的消息事件
    ws.onmessage = (event) => {
      // 处理消息数据
      const response = JSON.parse(event.data);
      if (response.status === 200) {
        this.message = response.data.message;
        // 继续发送空消息，以保持 HTTP/1.1 长连接
        ws.send('');
      }
    };
  }
};
</script>

在这个示例中，前端使用 Vue.js 框架创建了一个组件，当组件被挂载到 DOM 树上后会创建一个 WebSocket 连接，并向后端发送一个空消息，以启动 HTTP/1.1 长连接。后端会将响应数据发送到 WebSocket 的主题 /topic/data 中，前端会监听该主题的消息事件，并在接收到消息数据后处理数据并向后端发送一个空消息，以保持 HTTP/1.1 长连接。