javascript - HTML5 EventSource sending multiple requests - Stack Overflow

admin管理员组

文章数量:1391964

I'm trying to implement Server Sent Events using Spring SseEmitter as described in this Youtube video.

I'm able to initiate the event stream and receive the data from the server sent event.

However, I can see multiple EventStream type requests fired from the client and arriving at the server. The way I understand it, EventSource should send a single HTTP request and then should maintain a half duplex connection from the server, using which server sends the events to the client.

Why is it then sending requests at regular interval ? Isn't it then like polling instead of a half duplex connection ?

Bellow is the code that I'm using.

Server code

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter.SseEventBuilder;

@RestController
public class TestService {
    private List<SseEmitter> subscriberList = Collections.synchronizedList(new ArrayList<>());

    @RequestMapping("inbox")
    public SseEmitter inbox() {
        SseEmitter subscriber = new SseEmitter();
        subscriberList.add(subscriber);

        subscriber.onCompletion(() -> {
            subscriberList.remove(subscriber);
            System.out.println("Removed the pleted event emitter");
        });

        System.out.println("Subscriber arrived");
        return subscriber;
    }

    @RequestMapping("message")
    public String message(@RequestParam("message") String message) {
        System.out.println("SubscriberList size " + subscriberList.size());
        for(SseEmitter subscriber : subscriberList) {
            try {
                SseEventBuilder eventBuilder = SseEmitter.event().name("group1").data(message);
                subscriber.send(eventBuilder);
            } catch (Exception e) {
                e.printStackTrace();
            }   
        };
        return message;
    }
}

Client code

$(function () {
    console.log("Started");
    var eventSource = new EventSource("/inbox");
    eventSource.addEventListener('error', function(e) {
      if (e.currentTarget.readyState == EventSource.CLOSED) {
          console.log("Connection is closed")
      } else {
        source.close();
        console.log("Closing connection");
      }
    });
    eventSource.addEventListener("group1", function (event) {
        console.log(event.data);
        document.querySelector("body").innerHTML += "<div>" + event.data + "</div>";
    });
});

Bellow is the client network tab screenshot from chrome

Here's server side log

Subscriber arrived
Removed the pleted event emitter
Subscriber arrived
Removed the pleted event emitter
Subscriber arrived
Removed the pleted event emitter
Subscriber arrived
Removed the pleted event emitter
Subscriber arrived
Removed the pleted event emitter
Subscriber arrived
Removed the pleted event emitter
Subscriber arrived

I'm trying to implement Server Sent Events using Spring SseEmitter as described in this Youtube video.

I'm able to initiate the event stream and receive the data from the server sent event.

However, I can see multiple EventStream type requests fired from the client and arriving at the server. The way I understand it, EventSource should send a single HTTP request and then should maintain a half duplex connection from the server, using which server sends the events to the client.

Why is it then sending requests at regular interval ? Isn't it then like polling instead of a half duplex connection ?

Bellow is the code that I'm using.

Server code

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter.SseEventBuilder;

@RestController
public class TestService {
    private List<SseEmitter> subscriberList = Collections.synchronizedList(new ArrayList<>());

    @RequestMapping("inbox")
    public SseEmitter inbox() {
        SseEmitter subscriber = new SseEmitter();
        subscriberList.add(subscriber);

        subscriber.onCompletion(() -> {
            subscriberList.remove(subscriber);
            System.out.println("Removed the pleted event emitter");
        });

        System.out.println("Subscriber arrived");
        return subscriber;
    }

    @RequestMapping("message")
    public String message(@RequestParam("message") String message) {
        System.out.println("SubscriberList size " + subscriberList.size());
        for(SseEmitter subscriber : subscriberList) {
            try {
                SseEventBuilder eventBuilder = SseEmitter.event().name("group1").data(message);
                subscriber.send(eventBuilder);
            } catch (Exception e) {
                e.printStackTrace();
            }   
        };
        return message;
    }
}

Client code

$(function () {
    console.log("Started");
    var eventSource = new EventSource("/inbox");
    eventSource.addEventListener('error', function(e) {
      if (e.currentTarget.readyState == EventSource.CLOSED) {
          console.log("Connection is closed")
      } else {
        source.close();
        console.log("Closing connection");
      }
    });
    eventSource.addEventListener("group1", function (event) {
        console.log(event.data);
        document.querySelector("body").innerHTML += "<div>" + event.data + "</div>";
    });
});

Bellow is the client network tab screenshot from chrome

Here's server side log

Subscriber arrived
Removed the pleted event emitter
Subscriber arrived
Removed the pleted event emitter
Subscriber arrived
Removed the pleted event emitter
Subscriber arrived
Removed the pleted event emitter
Subscriber arrived
Removed the pleted event emitter
Subscriber arrived
Removed the pleted event emitter
Subscriber arrived

• javascript
• java
• spring
• eventsource

Share Improve this question Follow asked May 24, 2016 at 2:09 11thdimension11thdimension 10.7k44 gold badges3838 silver badges7474 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

The problem here is that the server unexpectedly closes the connection, instead of doing its work while leaving it open. When this happnes, the client re-sends a request to open a connection and to start streaming Server Sent Events. The server then closes the connection again and again, leading to an infinate loop.

One way to make sure this is the case is to set the retry field in order to increase the browser's waiting time (the default is about 2-3 seconds). Another way is to have a while (true) {} on the server side, just after the request arrives.

Also take a look at this post about SSEs.

本文标签： javascriptHTML5 EventSource sending multiple requestsStack Overflow