Vue.js+Spring Boot：后端变量值变更的最优检测方案？

Hey there! Great call looking for a better alternative than fixed-interval polling—it’s definitely not the most efficient approach, especially if that someVariable doesn’t change super often. Let’s walk through the best options tailored for your Vue.js + Spring Boot stack:

1. Server-Sent Events (SSE) - Simple One-Way Push #

SSE is perfect if you only need the backend to push updates to the frontend (no two-way communication). It’s built on HTTP, so it works with most infrastructure, and browsers handle automatic reconnection out of the box.

Backend (Spring Boot) Implementation #

Use SseEmitter to stream updates whenever your variable changes (or at a reasonable interval):

import org.springframework.http.MediaType;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
import java.util.concurrent.Executors;

@GetMapping(value = "/path", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public SseEmitter getVariableStream() {
    SseEmitter emitter = new SseEmitter();

    // Run a background thread to check for updates (replace with your actual change detection logic)
    Executors.newSingleThreadExecutor().submit(() -> {
        try {
            while (!Thread.currentThread().isInterrupted()) {
                // Only send if the variable has changed (add your own change check here)
                emitter.send(someVariable);
                Thread.sleep(1000); // Adjust delay as needed
            }
        } catch (Exception e) {
            emitter.completeWithError(e);
        }
    });

    // Clean up on completion/timeout
    emitter.onCompletion(() -> Thread.currentThread().interrupt());
    emitter.onTimeout(() -> emitter.complete());

    return emitter;
}

Frontend (Vue.js) Implementation #

Use the browser’s native EventSource to listen for updates:

export default {
  mounted() {
    const eventSource = new EventSource('/path');
    
    eventSource.onmessage = (event) => {
      const newValue = event.data;
      // Do your logic with the updated value here
    };

    // Close the connection when the component is destroyed
    this.$once('hook:beforeDestroy', () => {
      eventSource.close();
    });
  }
}

Pros: Low implementation overhead, automatic reconnection, no extra dependencies needed for frontend.

2. WebSocket - Full Two-Way Real-Time Communication #

If you ever need the frontend to send data back to the backend (or require ultra-low latency), WebSockets are the way to go. They create a persistent, bidirectional connection between client and server.

Backend (Spring Boot) Setup #

First, configure WebSocket support:

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic"); // Channel for sending updates to clients
        config.setApplicationDestinationPrefixes("/app"); // Prefix for client-to-server messages
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").withSockJS(); // Fallback for browsers that don't support WebSockets
    }
}

Then create a controller to push updates when your variable changes:

import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class VariableController {
    private final SimpMessagingTemplate messagingTemplate;

    public VariableController(SimpMessagingTemplate messagingTemplate) {
        this.messagingTemplate = messagingTemplate;
    }

    // Call this method whenever someVariable is updated
    public void sendVariableUpdate(String newValue) {
        messagingTemplate.convertAndSend("/topic/variable-updates", newValue);
    }

    // Optional: Get initial value on page load
    @GetMapping("/path")
    public String getInitialVariable() {
        return someVariable;
    }
}

Frontend (Vue.js) Implementation #

Use stompjs and sockjs-client to connect to the WebSocket:

import SockJS from 'sockjs-client';
import Stomp from 'stompjs';

export default {
  data() {
    return {
      stompClient: null
    };
  },
  mounted() {
    const socket = new SockJS('/ws');
    this.stompClient = Stomp.over(socket);

    this.stompClient.connect({}, (frame) => {
      // Subscribe to the update channel
      this.stompClient.subscribe('/topic/variable-updates', (message) => {
        const newValue = message.body;
        // Do your logic with the updated value here
      });
    });
  },
  beforeDestroy() {
    // Clean up the connection when the component is destroyed
    if (this.stompClient) {
      this.stompClient.disconnect();
    }
  }
}

Pros: True real-time communication, bidirectional support, minimal overhead compared to polling.

3. Long Polling - Improved Polling for Restricted Environments #

If SSE/WebSockets aren’t an option (e.g., strict firewall rules), long polling is a better alternative to fixed-interval polling. The backend holds the request open until the variable changes or a timeout occurs, then the frontend immediately sends a new request.

Backend (Spring Boot) Implementation #

Use DeferredResult to hold the request:

import org.springframework.web.context.request.async.DeferredResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class VariableController {
    @GetMapping("/path")
    public DeferredResult<String> getVariableLongPoll() {
        DeferredResult<String> deferredResult = new DeferredResult<>(5000L); // Timeout after 5 seconds

        // Add a listener for variable changes (replace with your actual change detection)
        VariableChangeListener listener = newValue -> {
            deferredResult.setResult(newValue);
        };

        // Handle timeout: return the current value and clean up
        deferredResult.onTimeout(() -> {
            deferredResult.setResult(someVariable);
            // Remove the listener here to avoid memory leaks
        });

        // Clean up listener when request completes
        deferredResult.onCompletion(() -> {
            // Remove the listener here
        });

        return deferredResult;
    }
}

Frontend (Vue.js) Implementation #

Chain requests instead of using setInterval:

export default {
  data() {
    return {
      isDestroyed: false
    };
  },
  methods: {
    fetchVariable() {
      if (this.isDestroyed) return;

      axios.get('/path')
        .then(response => {
          const newValue = response.data;
          // Do your logic with the updated value here
          // Immediately send the next request
          this.fetchVariable();
        })
        .catch(() => {
          // Retry after a delay if the request fails
          setTimeout(() => this.fetchVariable(), 2000);
        });
    }
  },
  mounted() {
    this.fetchVariable();
  },
  beforeDestroy() {
    this.isDestroyed = true;
  }
}

Pros: Reduces unnecessary requests compared to fixed polling, works in environments that block persistent connections.

How to Choose? #

• SSE: Go here for simple one-way updates (easiest to implement).
• WebSocket: Choose this if you need two-way communication or ultra-low latency.
• Long Polling: Use this only if SSE/WebSockets are blocked by your infrastructure.

内容的提问来源于stack exchange，提问作者Jakubeeee