Server Despatched Occasions in Android (with Node.js) | by Rahul Ray | June 2023

In in the present day’s utility growth communication between consumer and server is a vital facet. Whether or not we’d like stay knowledge streams, push notifications, knowledge synchronization with the backend, and so on. We’d like some method to those communications primarily based on the use case.
A few of them are REST, Websockets, Polling, Server-Despatched Occasions, and so on
Every of them has its personal traits and advantages however we’ll think about Server-sent occasion in in the present day’s submit.

Server Despatched Occasions (SSE) is a persistent HTTP connection by means of which the server can ship occasions to its consumer in actual time. It supplies a easy and environment friendly method to push knowledge from server to consumer, allows real-time notifications, stay updates, knowledge switch, and so on.
SSE primarily based on an event-driven mannequin, the place the server sends occasions to the consumer each time new knowledge or info turns into accessible. Every occasion features a message with an optionally available occasion title and knowledge payload.
It’s a one-way connection the place solely server can ship occasions and consumer can solely hearken to it.

Net sockets are additionally used for real-time connectivity however not like SSE they use a two-way communication channel the place each consumer and server can ship and hear for occasions and vice versa.
Due to this fact, each time we have to construct messaging functions the place the consumer and server hearth and hear for occasions, we use WebSockets. However when we have to construct functions that embrace monitoring knowledge adjustments from the backend (like a inventory market charting utility), we use SSE.

On this article, we’ll discover the best way to create an Android utility that makes use of Server-Despatched Occasions (SSE) for real-time communication with the Node.js backend. We’ll reveal this by constructing an utility that maintains a set of pictures and updates the consumer each time a brand new picture is added.

To get began, let’s arrange the backend utilizing Node.js and Categorical. We are going to create an Categorical server that maintains two arrays: one for the consumer and one for the pictures. Moreover, we’ll outline three endpoints:

1. /standing (GET): Returns the present variety of energetic purchasers.
2. /pictures (GET): Create a picture occasion stream from a picture[] array.
3. /pictures (POST): Add pictures to photographs[] array, which the consumer can get by means of the occasion stream.

const specific = require('specific');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = specific();


app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({prolonged: false}));


app.get('/standing', (request, response) => response.json({purchasers: purchasers.size}));


const PORT = 3000;


let purchasers = [];
let pictures = [];


perform imagesHandler(request, response, subsequent) {
const headers = {
'Content material-Sort': 'textual content/event-stream',
'Connection': 'keep-alive',
'Cache-Management': 'no-cache'
};
response.writeHead(200, headers);


const knowledge = `knowledge: ${JSON.stringify(pictures)}nn`;


response.write(knowledge);


const clientId = Date.now();


const newClient = {
id: clientId,
response
};


purchasers.push(newClient);


request.on('shut', () => {
console.log(`${clientId} Connection closed`);
purchasers = purchasers.filter(consumer => consumer.id !== clientId);
});
}


app.get('/pictures', imagesHandler);


perform sendImagesToAll(newImage) {
purchasers.forEach(consumer => consumer.response.write(`knowledge: ${JSON.stringify(newImage)}nn`))
}


async perform addImage(request, respsonse, subsequent) {
const newImage = request.physique;
pictures.push(newImage);
respsonse.json(newImage)
return sendImagesToAll(newImage);
}


app.submit('/pictures', addImage);


app.hear(PORT, () => {
console.log(`Server working at http://localhost:${PORT}`)
})

Now let’s dive into constructing the Android consumer. Listed here are step-by-step directions:

Storage class:
— Create a Repository class that acts as the information layer and manages connections to the backend.
— Initialize OkHttp Consumer, SSE Request and EventSourceListener. These elements are used to create an EventSource manufacturing facility within the Repository constructor.

personal val sseClient = OkHttpClient.Builder()
.connectTimeout(6, TimeUnit.SECONDS)
.readTimeout(10, TimeUnit.MINUTES)
.writeTimeout(10, TimeUnit.MINUTES)
.construct()
personal val sseRequest = Request.Builder()
.url(EVENTSURL)
.header("Settle for", "utility/json")
.addHeader("Settle for", "textual content/event-stream")
.construct()


personal val sseEventSourceListener = object : EventSourceListener() {
override enjoyable onClosed(eventSource: EventSource) {}


override enjoyable onEvent(eventSource: EventSource, id: String?, kind: String?, knowledge: String) {}


override enjoyable onFailure(eventSource: EventSource, t: Throwable?, response: Response?) {}


override enjoyable onOpen(eventSource: EventSource, response: Response) {}
}


init {
initEventSource()
}


personal enjoyable initEventSource() {
EventSources.createFactory(sseClient)
.newEventSource(request = sseRequest, listener = sseEventSourceListener)
}

SSEE occasion mannequin:
— Outline an SSEEvent mannequin class to carry knowledge acquired from the server all through the appliance.

knowledge class SSEEventData(
val standing: STATUS? = null,
val picture: String? = null
)
enum class STATUS {
SUCCESS,
ERROR,
NONE,
CLOSED,
OPEN
}

Create a stream:
— Add a mutable state of SSEEvent within the repository, which might be utilized by the ViewModel.

var sseEventsFlow = MutableStateFlow(SSEEventData(STATUS.NONE))
personal set
personal val sseEventSourceListener = object : EventSourceListener() {
override enjoyable onClosed(eventSource: EventSource) {
tremendous.onClosed(eventSource)
---- do one thing ----
val occasion = SSEEventData(STATUS.CLOSED)
sseEventsFlow.tryEmit(occasion)
}


override enjoyable onEvent(eventSource: EventSource, id: String?, kind: String?, knowledge: String) {
tremendous.onEvent(eventSource, id, kind, knowledge)


---- do one thing ---- 
val occasion = SSEEventData(STATUS.SUCCESS)    
sseEventsFlow.tryEmit(occasion)
}


override enjoyable onFailure(eventSource: EventSource, t: Throwable?, response: Response?) {
tremendous.onFailure(eventSource, t, response)
t?.printStackTrace()
val occasion = SSEEventData(STATUS.ERROR)
sseEventsFlow.tryEmit(occasion)
}


override enjoyable onOpen(eventSource: EventSource, response: Response) {
tremendous.onOpen(eventSource, response)
val occasion = SSEEventData(STATUS.OPEN)
sseEventsFlow.tryEmit(occasion)
}
}

See Mannequin:
— Use a stream from the repository and map it to a LiveData object.
— By default, LiveData is lifecycle-aware, making certain seamless updates to the person interface.

var sseEvents = MutableLiveData()
personal set
enjoyable getSSEEvents() = viewModelScope.launch {
repository.sseEventsFlow
.onEach { sseEventData ->
sseEvents.postValue(sseEventData)
}
.catch {
sseEvents.postValue(SSEEventData(standing = STATUS.ERROR))
}
.launchIn(viewModelScope)
}

Exercise/piece:
— Observe the LiveData supplied by the ViewModel and replace the person interface accordingly.

viewModel?.sseEvents?.observe(this) {
it?.let { occasion ->
when(occasion.standing) {
STATUS.OPEN -> {}


STATUS.SUCCESS -> {}


STATUS.ERROR -> {}


STATUS.CLOSED -> {}


else -> {}
}
}
}

To check the SSE implementation, make an API name to the /pictures (GET) endpoint out of your Android app. This can set up a thread connection between the backend and the consumer. Everytime you ship an API request to /pictures (POST) utilizing instruments like Postman, the backend will hearth an occasion, which might be acquired by the appliance by means of the established thread connection.

Take a look at the repository for the whole code right here: https://github.com/raystatic/SSE-Android-Node

Get related right here: LinkedIn | Twitter