server-sent events

Basic, Intro

Websockets and SSE (Server Sent Events) are both capable of pushing data to browsers.

Websockets connections can both send data to the browser and receive data from the browser.

SSE connections can only push data to the browser.

SSE is Simpler, case by case.

Backend

SseEmitter (Spring Framework 6.0.2 API)

/**
 * get realtime state by SSE
 * use redis as mq, get realtime state
 * continue send data to frontend if there has data in redis
 *
 * @param id id
 */
@GetMapping(value = "/getRunStatusById", produces = "text/event-stream;charset=UTF-8")
public SseEmitter getRunStatusById(@RequestParam("id") long id) {
    final long userId = getUserId();
    SseEmitter emitter = new SseEmitter(0L); //0 means no limit timemout
    emitter.onError(throwable -> logger.error("emitter-error:" + throwable.getMessage()));
    emitter.onCompletion(() -> logger.info("emitter run onCompletion."));
    emitter.onTimeout(() -> {
        logger.info("emitter timeout");
        emitter.complete();
    });

    ScheduledExecutorService executor = Executors.newSingleThreadScheduledExecutor();
    AtomicInteger eventId = new AtomicInteger(1);
    executor.scheduleWithFixedDelay(() ->
    {
        try {
            Set<String> zSetData = getTestDataFromRedis(userId, id);
            if (zSetData == null || zSetData.size() == 0 || StringUtils.isEmpty(zSetData.stream().findFirst().orElse(""))) { //no data
                SseEmitter.SseEventBuilder event = SseEmitter.event().data("notRun").id(String.valueOf(eventId));
                emitter.send(event);
                executor.shutdown();
                emitter.complete();
            } else { //if has data
                SseEmitter.SseEventBuilder event = SseEmitter.event().data("running").id(String.valueOf(eventId));
                emitter.send(event);
            }
            logger.info("emitter eventid: " + eventId);
            eventId.getAndIncrement();
        } catch (Exception ex) {
            logger.error("getRunStatusById error: " + ex.getMessage(), ex);
            emitter.completeWithError(ex);
            executor.shutdown();
        }
    }, 0, 1, TimeUnit.SECONDS);

    return emitter;
}

• SseEmitter: one implement of sse
• ScheduledExecutorService.scheduleWithFixedDelay: sent data with schedule delay, like use Scheduled annotation for a job, but job is not recomend

Frontend, with token for authorization

https://github.com/Yaffle/EventSource

const createEventSource = url => {
  const token = window.store.state.common.token
  const eventSource = new EventSourcePolyfill(`${process.env.VUE_APP_BASE_URL}${url}`, {
    headers: {
      Authorization: `Bearer ${token}`,
      withCredentials: true
    }
  })

  eventSource.onopen = (event) => {
    // console.log(event)
    // console.log('event-source connect success，url:' + url)
  }

  eventSource.onmessage = event => {
    console.log(event)
    console.log('eventId'+event.lastEventId + ', data:' + event.data)
    if(event.data.indexOf("notRun") > -1) {
      console.log('notRun or end')
      eventSource.close()
    }
  }

  eventSource.onerror = (event) => {
    console.log('network error or event end')
    console.log(event)
    console.log('readyState ' + event.target.readyState + '; error:' + event)
    event.target.close()
  }

  return eventSource
}

nginx

It’s important to note that an EventSource requires an HTTP/1.1 server to work correctly. This is because, unlike XMLHttpRequest, an EventSource request is kept open indefinitely and therefore relies on features only present in HTTP/1.1, such as chunked encoding. In addition, the HTTP status code of the response must be 200 OK, or the connection will be closed.

worker_processes 4;
worker_connections 2048;
keepalive_timeout 65;

http {
  server {
    listen 80;

    location /events/ {
      proxy_pass http://backend_server;
      proxy_set_header Connection '';
      proxy_http_version 1.1; #important
      proxy_set_header Host $host;
      proxy_cache_bypass $http_pragma;
      proxy_cache_revalidate on;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "Upgrade";
    }
  }
}

Problems

1.timeout, responsebodyemitter has already completed

• if sent data so many, set timeout to zero, but if unnecessary like send data one time, should use default timeout which is not set then, or set some timeout like new SseEmitter(1000L) which means 1s timeout

2.frontend error happen

• frontend usecase is simple, mostly the error is some backend error

Reference

• HTTP version should 1.1
• server-sent_events.html
• java source code of SseEmitterController
• sse-with-timeout
• Server-Sent Events Using Spring - DZone Java
• Spring Server Sent Events - ResponseBodyEmitter is already set complete
• Zero to Hero in Server Sent Events.
• Quarkus-For-Spring-Developers-Red-Hat

• 本文作者： Linking
• 本文链接： https://linking.fun/2022/11/28/server-sent-events/
• 版权声明： 版权所有，转载请注明出处！