Master Real-Time Push with Spring SseEmitter and Vue 3: A Step-by-Step Guide

SseEmitter Overview

SseEmitter is a class in the Spring Framework that implements Server‑Sent Events (SSE), allowing the server to push data to the client over HTTP. Clients subscribe via an HTTP request, and the server continuously sends events through an SseEmitter instance.

Key Features

Unidirectional communication: only server‑to‑client.

Based on standard HTTP, no extra protocol needed.

Automatic reconnection by the browser if the connection drops.

Simple text‑based event format (data: … followed by two line breaks).

Typical Use Cases

Real‑time data streams such as stock price updates.

Instant notifications for e‑learning platforms, new courses, etc.

Chat applications for live message delivery.

Monitoring systems to push sensor data in IoT projects.

Basic Usage Steps

Create an SseEmitter instance in a controller and return it to the client.

Send events using the send method.

Handle connection closure and timeout with onCompletion and onTimeout.

Frontend Implementation (Vue 3)

Install Vue CLI and create a Vue 3 project:

npm install -g @vue/cli
vue create my-vue3-app

Start the development server:

cd my-vue3-app
npm run serve

Create EventList.vue to display incoming messages:

<template>
  <div>
    <h1>Server-Sent Events</h1>
    <ul>
      <li v-for="message in messages" :key="message.id">{{ message.content }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { SseClient } from './SseClient';

const messages = ref([]);
const sseClient = new SseClient(event => {
  const data = JSON.parse(event.data);
  messages.value.push(data);
});

onMounted(() => sseClient.connect());
onUnmounted(() => sseClient.disconnect());
</script>

<style scoped>
/* Add your styles here */
</style>

Implement SseClient.js to manage the EventSource:

export class SseClient {
  constructor(onMessage) {
    this.onMessage = onMessage;
    this.eventSource = null;
  }
  connect() {
    this.eventSource = new EventSource('http://localhost:8089/events/54321');
    this.eventSource.onmessage = event => this.onMessage(event);
    this.eventSource.onerror = () => this.disconnect();
  }
  disconnect() {
    if (this.eventSource) {
      this.eventSource.close();
      this.eventSource = null;
    }
  }
}

Backend Implementation (Spring Boot)

Define a controller that stores SseEmitter instances and provides endpoints to stream, send messages, and close connections:

@Controller
public class SseEmitterController {
    private static Map<String, SseEmitter> sseCache = new ConcurrentHashMap<>();

    @CrossOrigin(origins = "*")
    @GetMapping("/events/{userId}")
    public SseEmitter stream(@PathVariable String userId) throws IOException {
        sseCache.put(userId, new SseEmitter(10 * 60 * 1000L));
        SseEmitter emitter = sseCache.get(userId);
        Map<String, String> map = new HashMap<>();
        map.put("id", userId);
        map.put("content", "连接成功");
        emitter.send(map);
        return emitter;
    }

    @GetMapping("/sendMessage/{userId}")
    public String sendMessage(@PathVariable String userId,
                              @RequestParam(name = "message", required = false) String message) throws IOException {
        SseEmitter emitter = sseCache.get(userId);
        Map<String, String> map = new HashMap<>();
        map.put("id", userId);
        map.put("content", message);
        emitter.send(map);
        return "成功";
    }

    @GetMapping("/close/{userId}")
    public String close(@PathVariable String userId) throws IOException {
        SseEmitter emitter = sseCache.get(userId);
        emitter.complete();
        return "成功";
    }
}

After starting both front‑end and back‑end, the client connects, receives an initial success message, and can receive further messages sent via the /sendMessage endpoint.

These steps demonstrate a simple end‑to‑end solution for server‑initiated real‑time communication using Spring SseEmitter and Vue 3.