Event Source doesn't represent an information at each client/session

Question

I have a python server-side which sends a request using SSE.

Here the example of python code. It sends an 'action-status' and data which JS has to handle (to do):

async def sse_updates(request):
    loop = request.app.loop
    async with sse_response(request) as resp:
        while True:

            # Sending request for queue' token remove when it's been removed on server.
            if request.app['sse_requests']['update_queue_vis_remove']:
                await resp.send("update-remove")
                request.app['sse_requests']['update_queue_vis_remove'] = False

            # Sending request for queue' token adding up when it's been added on server.
            if request.app['sse_requests']['update_queue_vis_append'][0]:
                await resp.send(f"update-append {request.app['sse_requests']['update_queue_vis_append'][1]} {request.app['sse_requests']['update_queue_vis_append'][2]}")
                request.app['sse_requests']['update_queue_vis_append'][0] = False

            # Sending request for redundant token's list rewrite (on client side ofc)
            if request.app['sse_requests']['redundant_tokens_vis'][0]:
                await resp.send('update-redtokens ' + ''.join(token + ' ' for token in request.app['sse_requests']['redundant_tokens_vis'][1]))
                request.app['sse_requests']['redundant_tokens_vis'][0] = False

            await asyncio.sleep(0.1, loop=loop)
    return resp

And the JS script which handles a response:

evtSource = new EventSource("http://" + window.location.host + "/update")

evtSource.onmessage = function(e) {
    // Data from server is fetching as "<server-event-name> <data1> <data2> <data3> ..."
    let fetched_data = e.data.split(' ');

    // First option is when a token has been removed from server this event has to be represented on a client-side.
    if(fetched_data[0] === "update-remove")
        displayQueueRemove();

    // The second option is when a token appended on server and also it should be represented to a user
    else if(fetched_data[0] === "update-append")

        // fetched_data[1] - token
        // fetched_data[2] - it's (token's) position
        displayQueueAdd(fetched_data[1], parseInt(fetched_data[2]));

    // The last possible options is that if the web-page will has refreshed a data in redundant_tokens should be rewritten
    else if (fetched_data[0] === "update-redtokens"){

        fetched_data.shift();

        // Creating variables for token' wrapping
        let tag;
        let text;

        // Wrapping tokens and store it into the array.
        for(let i = 0; i < fetched_data.length - 1; i++) {
            tag = document.createElement("div");
            text = document.createTextNode(fetched_data[i]);
            tag.appendChild(text);
            tag.setAttribute("class", "token-field");
            redundant_tokens[i] = tag;
        }
    }
}

The problem is that if I open two or more browser windows (sessions), the only one of them catches a response and represents it. Moreover there were the cases when I send a request from one session, however obtain a response to another one. Is there an option to fix it using SSE (I mean, I was considering some other methods but I'd like to try with SSE)?

Ionut Ticus · Accepted Answer · 2020-05-04T09:48:30.507

I think your problem is synchronizing the data (app["sse_requests"]).
Depending on how you modify the data and who needs to be notified you might need to keep a list of clients (sessions).

For example if all clients need to be notified of all events then keep a list (or even better a set) of connected clients and create a periodic function (using create_task) in which to notify all of them.

If a client needs to only be notified of certain events then you need to identify that client using some sort of key in the request object.

Event Source doesn't represent an information at each client/session

1 Answers1