Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Debugging HTML5 Server-Sent Events in-browser

Tags:

Is there any way of viewing/debugging Server-Sent Events in Chrome (or perhaps Firefox)? I was hoping they'd appear in the Network tab of Chrome's developer tools. The closest way I know of is to drop down to Wireshark, but this is fairly cumbersome in comparison.

For example, go to http://www.emojitracker.com/. You'll see the page updating in real time with data from the server, but no activity appears in the network tab. (It subscribes to server events on line 97 of /application.js.)

like image 359
Mike Chamberlain Avatar asked Sep 21 '14 05:09

Mike Chamberlain


People also ask

What do HTML 5 server-sent events do?

You can create such things with the HTML5 server-sent events. It allows a web page to hold an open connection to a web server so that the web server can send a new response automatically at any time, there's no need to reconnect, and run the same server script from scratch over and over again.

What is the difference between server-sent events SSEs and WebSockets in HTML5?

Obviously, the major difference between WebSockets and Server-Sent Events is that WebSockets are bidirectional (allowing communication between the client and the server) while SSEs are mono-directional (only allowing the client to receive data from the server).

Is server-sent events HTTP?

Server-Sent Events (SSE) is a server push technology enabling a client to receive automatic updates from a server via an HTTP connection, and describes how servers can initiate data transmission towards clients once an initial client connection has been established.

Does postman support SSE?

Postman has proven to be an indispensable tool for working with APIs, but we keep hitting the wall when it comes to working with streaming APIs that employ Server-Sent Events (SSE). Unlike Websockets, SSE leverages HTTP to deliver API responses.


1 Answers

The events appear now in Network Tab. Click on the URL of the SSE stream and you will have an "EventStream" tab:

enter image description here

like image 193
Thierry Avatar answered Sep 22 '22 11:09

Thierry