#server-sent events

[covalesedigital]

Role of Server-Sent Events in Reactive Programming

Unlock real-time web communication with Server-Sent Events (SSE) in Spring WebFlux. Discover how SSE simplifies live data streaming vs Websockets in this blog.

Source: Covalense Digital Blog

[nitrix-reloaded-blog]

Streaming Responses for LLMs: Implementing Server-Sent Events

Streaming Responses for LLMs: Implementing Server-Sent Events is a critical topic for building production AI applications. This comprehensive guide covers essential concepts, implementation patterns, and best practices based on real-world experience. What You’ll Learn Core concepts and architectural patterns Step-by-step implementation guide Production best practices Performance optimization…

[cognithtechnology]

Understanding Real-Time APIs: Types and Their Optimal Uses

Introduction to Real-Time APIs

Real-time APIs have revolutionized how data is communicated and processed, enabling instant data transfer and updates. These APIs facilitate seamless interactions, ensuring that information is exchanged swiftly and efficiently. This article delves into the various types of real-time APIs and their optimal uses, providing a comprehensive understanding of their applications in different domains.

Types of Real-Time APIs

WebSockets

WebSockets offer a full-duplex communication channel over a single, long-lived connection. This technology is essential for applications requiring constant data flow, such as chat applications, online gaming, and live updates.

Key Features of WebSockets

Bidirectional Communication: Allows for sending and receiving data simultaneously.

Low Latency: Provides near-instantaneous data transmission.

Persistent Connection: Maintains a stable connection, reducing overhead from frequent handshakes.

Read More: BUILDING REAL-TIME APIS WITH WEBSOCKETS AND TOOLS

Server-Sent Events (SSE)

Server-sent events (SSE) are used to push updates from a server to a client over a single HTTP connection. Ideal for applications needing consistent updates, such as live news feeds, stock tickers, and social media streams.

Advantages of SSE

Simple Implementation: Easier to implement compared to WebSockets.

Automatic Reconnection: Handles reconnections and updates efficiently.

Event-Driven: Only sends data when there are updates, conserving resources.

Long Polling

Long Polling is a technique where the client requests information from the server with the server holding the request open until new data is available. This method is suitable for applications where WebSockets are not supported.

Benefits of Long Polling

Compatibility: Works with existing HTTP infrastructure.

Reduced Latency: Provides a semblance of real-time communication without needing a persistent connection.

gRPC

gRPC is a high-performance RPC framework that uses HTTP/2 for transport. It's designed for low latency and high throughput communication, making it ideal for microservices and distributed systems.

Core Features of gRPC

Language Agnostic: Supports multiple programming languages.

Efficient: Utilizes HTTP/2 for multiplexing and compressing messages.

Streaming: Supports bi-directional streaming, enabling continuous data flow.

Optimal Uses of Real-Time APIs

Financial Services

In financial services, real-time APIs are crucial for providing instantaneous updates on stock prices, market data, and transaction statuses. WebSockets and SSE are commonly used to ensure traders and investors receive up-to-the-second information.

Healthcare

In healthcare, real-time APIs facilitate the rapid exchange of patient data, remote monitoring, and telemedicine services. gRPC and WebSockets are often employed to ensure secure and timely data transfer.

E-Commerce

E-commerce platforms utilize real-time APIs to update inventory, track shipments, and manage customer interactions. Long Polling and WebSockets enable these platforms to handle high volumes of concurrent users efficiently.

Social Media

Social media applications rely heavily on real-time APIs to deliver notifications, messages, and live updates. SSE and WebSockets are popular choices, providing users with seamless and interactive experiences.

Implementing Real-Time APIs

Best Practices

Security: Implement robust authentication and encryption to protect data.

Scalability: Design the API to handle a large number of concurrent connections.

Latency Optimization: Minimize delays by optimizing network and server performance.

Conclusion

Real-time APIs are indispensable in today's fast-paced digital landscape. Understanding the different types of real-time APIs and their optimal uses allows developers to choose the right technology for their specific needs. By implementing best practices, organizations can leverage these APIs to enhance performance, ensure security, and provide superior user experiences.

[forvillelser]

Exploring HTTP push/stream methods

Basically I’ve been looking a little bit on how to deliver a steady stream of “stuff” to a client over HTTP. There are many ways to do this and which one to use depends on your use-case. Here’s my understanding so far

Long-polling: Good for low data volumes where there is little requirements on latency.

Server-sent Events: Good for high data volumes and where there is some requirements on latency.

Websockets: Good for when there is a need to do two way communication between client and server.

I decided to look closer at Server-sent events, because that’s something I didn’t really know about before. I put together a simple demo application in Elixir (using Cowboy and Plug) which you can find on github. It was surprisingly straight-forward.

[elenadicecco]

Sever-Sent Events (SSE)

function styleCode() { if (typeof disableStyleCode != 'undefined') { return; } var a = false; $('code').each(function() { if (!$(this).hasClass('prettyprint linenums')) { $(this).addClass('prettyprint linenums'); a = true; } }); if (a) { prettyPrint(); } } $(function() {styleCode();});

Wtf is a SSE?

Server-Sent Events allow browsers to automatically receive updates from a server through a simple JavaScript API called EventSource. These events are similar to common JavaScript events, like click events, except we can change the name and the data related to it. Before server-sent events, a web page would have to ask the server if any updates were available; with SSEs the data comes in a stream of updates without having to make an initial request. A few examples of server-sent events in action would be Facebook/Twitter updates, news feeds, real-time sports scores and streaming stock prices. All major browsers except Internet Explorer support SSEs.

Simple SSE DEMO

Why use a SSE?

Over the years the SSE specification has taken a backseat to younger more attractive communication practices such as the WebSocket API. WebSockets are able to execute a two-way communication procedure, where as SSEs are very much a one-way communication system. Having a two-way channel is more attractive for things like games, and messaging applications. However, data doesn’t always need to be sent by the client and sometimes all that is needed is updates from the server. Another reason one might choose to use the SSE API over the WebSocket API is SSEs are sent over traditional HTTP, they do not require a special protocol or server implementation to work. WebSockets require full-duplex connections and Web Socket servers to handle the procedure. Other SSE advantages include features such as automatic reconnection, using event ids, and the ability to send arbitrary events.

How do you use a SSE?

Using user-sent event in your web application is quite simple, like I mean really really simple.

Receiving updates from the server

The server-sent event API is stored in the EventSource object. For the browser to open the connection with the sever a new EventSource object must be created. This is where the source that generates the events is specified.

window.onload = function(){ //create a new EventSource object and specify the source var source = new EventSource("sse.php"); //start listening for updates source.onmessage = function(event){ removeChild(); if (!textNode){ var textContainer = document.getElementById("time"); var textList = document.createElement("ul"); var text = document.createElement("li"); var textNode = document.createTextNode("It is" + " " + event.data + " " + "in Miami, Florida!"); textContainer.appendChild(textList); textList.appendChild(text); text.appendChild(textNode); } function removeChild(){ var timeText = document.getElementById("time"); timeText.removeChild(timeText.childNodes[0]); } }; //This code listens for updates from the server when a new update is received it appends the message to the html "time" id. When a newer update is received the previous update is removed. };

Sending updates from the server

The server side script that sends events must use the MIME type text/event-stream and each update is sent as a block of text terminated by two newlines.

header("Content-Type: text/event-stream"); header("Cache-Control: no-cache"); // get current time on server $currentTime = date("h:i:s", time()); // send new time to browser (don't forget the paired new lines \n\n) echo "data: " . $currentTime . "\n\n"; flush();

And now you know the basics!

Sources

html5 Doctor sitepoint HTML5 Rocks Mozilla Developer Network

[thoughtbot]

Chat Example App Using Server-Sent Events

Rails 4 can stream data to the browser with ActionController::Live using server-sent events (SSEs). I was curious how server sent events worked so I decided to use them to implement a simple chat application. Tiny-chat is a chat app I built using Goliath, Redis Pub/Sub and of course server-sent events.

Subscribing to Events

require 'goliath' require 'redis' class Subscribe < Goliath::API def response(env) EM.synchrony do @redis = Redis.new(Options::redis) channel = env["REQUEST_PATH"].sub(/^\/subscribe\//, '') # We pass the subscribe method a block which describes what to # do when we receive an event. # This block writes the message formatted as a server sent event # to the HTTP stream. @redis.subscribe(channel) do |on| on.message do |channel, message| @message = message env.stream_send(payload) end end end end streaming_response(200, { 'Content-Type' => "text/event-stream" }) end end def on_close(env) @redis.disconnect end def payload "id: #{Time.now}\n" + "data: #{@message}" + "\r\n\n" end end end

When tiny-chat connects to the server it sends a GET request to /subscribe/everyone where everyone is the name of the channel and with the “Accept” header set to text/event-stream. The streaming middleware (above) receives this request and subscribes to a redis Pub/Sub channel. Since Goliath is non-blocking multiple clients can be listening for events without tying up a Heroku dyno. The payload of a server sent event looks like this:

id: 1361572294 data: {"sender":"mason", "message":"hi"}

Receiving messages

class Receive < Goliath::API @@redis = Redis.new(Options::redis) def response(env) channel = env["REQUEST_PATH"][1..-1] message = Rack::Utils.escape_html(params["message"]) @@redis.publish(channel, {sender: params["sender"], message: message}.to_json) [ 200, { }, [ ] ] end end

In the tiny-chat app, the client POSTs to /everyone with the message and the name of the sender encoded in JSON. The Receive middleware takes this request and publishes it to the appropriate redis Pub/Sub channel.

The Client

var source = new EventSource('/subscribe/everyone'); source.addEventListener('message', function(event) { message = JSON.parse(event.data); $('.messages').append( "<div class="sender">"+message.sender+"</div>"+ "<div class="message">"+message.message+"</div>"); });

The client is a single page of static HTML, CSS and Javascript. First we instantiate an EventSource object. The EventSource object is built into the latest Firefox, Safari and Chrome. There are also polyfills available which bring support to other browsers including Internet Explorer.

Next, we add an event listener for the “message” event. “message” is the default event but you could also define your own custom events and bind event listeners to those. For example if the SSE payload was:

event: userJoined data: {"username": "mason"}

You could bind to the custom event like this:

source.addEventListener('userJoined', function(event) { username = JSON.parse(event.data).username; alert(user + " joined the room!"); });

To send messages we do a regular ajax POST, prevent the default behavior of the form and reset the message field to be empty.

$('form').submit(function(e){ e.preventDefault(); $.post($('.room option:selected').val(), { sender: $('.name').text(), message: $('form .message').val() }) $('form .message').val('') });

That’s it! We now have a fully functional chat application. Tiny-chat is setup to run on Heroku with the Redis To Go plugin. There is a demo running on Heroku. And the source is available on GitHub. Try forking it and adding multiple chat rooms!

Some useful links:

https://github.com/npj/sse-goliath - Another example app which tiny-chat is based on.

http://stackoverflow.com/a/5326159 - A nice list of pros and cons of server sent events vs web sockets

Written by Mason Fischer.

[robertfolkerts-blog]

Listen/Notify in PostgreSQL

PostgreSQL has a listen/notify implementation that allows for robust inter-process communication channels within a database.  From the Documentation from PostgreSQL 9.2

When NOTIFY is used to signal the occurrence of changes to a particular table, a useful programming technique is to put the NOTIFY in a rule that is triggered by table updates. In this way, notification happens automatically when the table is changed, and the application programmer cannot accidentally forget to do it

Slick.  An internal message queue without any setup.

It may start as an internal message queue, but with Carl Hoerberg's meercat, you can inform web clients with Server-Sent Events.  Really slick.

[adamrich]

One way communication

Continuing on my theme of web sites communicating with the server after the page has loaded, I'll discuss two means of one way communication.

XMLHttpRequest (AJAX)

This is the famous way for sites to send a request to a server and process the reponse. The name is a bit of a misnomer since the response does not have to be XML, in fact recently JSON has become the more prevalent response. JSON is less verbose than XML which saves on bandwidth (and typing). Also JSON can be processed in JavaScript very simply.

In order to get cross-browser compatibility, I highly recommend using jQuery's fantastic $.ajax function.

In a sense AJAX is not truly one directional as the server does respond. However, the server cannot send a message, it can only respond to existing ones. Like a good child it cannot speak unless spoken to :)

Server-sent Events

Welcome to HTML5! Unfortunatelly, not one of the popular parts of HTML5, this is only imlemented in Opera to my knowledge, at least as of the time of this writing.

var eventSource = new EventSource("eventsource.html");//the address on your webserver that will send events eventSource.onmessage = function(event){ var dataReceived = event.data;//the string of new data sent from the server };

The server just sends the data in a long-lasting HTTP request with a special MIME type.

For more information read Nicholas C. Zakas's Introduction to Server-Sent Events or the specification itself.

This would be really cool, if only more browsers implemented it.