springboot+vue实现http长连接

Spring Boot 与 Vue.js 联合使用，可以通过 WebSocket 实现 HTTP 长连接。下面是一个使用 Spring Boot 和 Vue.js 实现 HTTP 长连接的示例：

1. 首先，我们需要在 Spring Boot 中添加 WebSocket 支持。可以通过添加 `spring-boot-starter-websocket` 依赖来实现：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2. 接下来，我们需要创建一个 WebSocket 配置类，用于配置 WebSocket 相关的参数。可以使用 `@Configuration` 和 `@EnableWebSocket` 注解来实现：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
 
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new WebSocketHandler(), "/websocket").setAllowedOrigins("*");
    }
 
}

在上面的代码中，我们创建了一个 `WebSocketHandler` 类来处理 WebSocket 连接请求。该类需要实现 `WebSocketHandler` 接口，并实现 `handleTextMessage` 方法来处理文本消息。我们还使用 `setAllowedOrigins("*")` 方法来允许任何来源的 WebSocket 连接。

3. 在前端，我们可以使用 Vue.js 和 `vue-native-websocket` 库来实现 WebSocket 连接。可以通过以下命令来安装 `vue-native-websocket` 库：

npm install vue-native-websocket --save

4. 在 Vue.js 中，我们需要创建一个 WebSocket 实例，并使用 `vue-native-websocket` 库来连接到服务器。可以使用以下代码：

import VueNativeSock from 'vue-native-websocket'

Vue.use(VueNativeSock, 'ws://localhost:8080/websocket', {
  format: 'json',
  reconnection: true,
  reconnectionAttempts: 5,
  reconnectionDelay: 3000,
})

在上面的代码中，我们创建了一个 WebSocket 实例，并使用 `ws://localhost:8080/websocket` 作为 WebSocket 服务器的地址。我们还定义了一些选项，如消息格式、自动重连等。

5. 最后，在 Vue.js 中，我们可以使用 `mounted` 钩子来监听 WebSocket 连接。可以使用以下代码：

mounted() {
  this.$options.sockets.message = (message) => {
    console.log(message)
  }
}

在上面的代码中，我们使用 `this.$options.sockets.message` 来监听 WebSocket 消息。当有新消息到达时，我们将在控制台中输出消息。

通过上述步骤，我们可以实现 Spring Boot 和 Vue.js 之间的 HTTP 长连接。