vue+websocket+spring boot 日志自动刷新

最新推荐文章于 2026-01-04 17:36:05 发布

原创

最新推荐文章于 2026-01-04 17:36:05 发布 · 2.4k 阅读

收录于

当前文章被以下社区和专栏收录：

该博客介绍了如何结合Vue.js、WebSocket和Spring Boot来创建一个实时日志刷新的功能。通过在Vue页面中设置输入框和按钮，用户可以发送消息到后端。当页面加载时，初始化WebSocket连接，而当页面销毁时关闭连接。WebSocket连接成功后，后端每秒推送一次数据，或者在接收到特定标识时返回相应数据，更新显示在页面的msg区域。

pom 依赖

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

config

package com.baidu.sobi.polestar.dataintegration.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * @author chongmengzhao
 * @version 0.1
 * @date 2021/11/8 11:35 上午
 * @Description TODO
 */
@Configuration
public class WebSocketConfig {

    /**
     * 注入一个ServerEndpointExporter,该Bean会自动注册使用@ServerEndpoint注解申明的websocket endpoint
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new Serve

标签