SSE and websockets support about alpine-ajax HOT 3 CLOSED

@imacrayon @devrav I pulled the cache branch and added this snippet as a quick hack to get working SSE support in alpine-ajax, to see how well it would work:

Alpine.directive('sse', (el, { expression }, { cleanup }) => {
    const es = new EventSource(expression, { withCredentials: true });
    const handler = (event) => {
        const response = {
            ok: true,
            url: event.target.url,
            html: event.data,
        };

        let targets = findTargets(AjaxAttributes.get(el, 'targets', []))
        if (targets.length) {
            targets = addSyncTargets(targets)
        }
        render(response, el, targets, false, false)
    };
    es.addEventListener("html-fragment", handler);

    cleanup(() => {
        es.removeEventListener('html-fragment', handler);
        es.close();
    });
});

It works like a charm and I used it to enhance a few of my pages for a demo. It works great for my usecase for now, it increases the power-to-weight ratio of the library quite a bit since the server events pattern gets live events from a message bus, and it makes it possible write MPAs that progressively enhance to super-interactive collaborative applications where your changes show up immediately on other clients. I'm kind of tempted to implement some multiplayer games with it as well.

Feel free to use it for whatever usecase you have under the license of the original project or to make it more robust. It does suffer from the many downsides of the browser standard EventSource implementation, including not being able to pass headers and having a wonky reconnect logic, but for progressive enhancement usecases it's not a huge issue.

Alpine-Ajax is an amazing library with a great well-thought out API and great docs and I don't mind waiting for a first party implementation. The way targets are handled makes it incredibly easy to refactor an application between different ways to fetch fragments, and a non-SSE application I had basically only needed a one or two extra props to work and update on other peoples changes once the backend SSE endpoint was there, since all the ids and x-merge logic was already set up.

from alpine-ajax.

Hey, I am currently working on hx-boost style navigation, you can follow along in #65

I don’t have any immediate plans for SSE or websockets, but the refactoring I’m doing in the PR above should help generalize some of the internals of Alpine AJAX. I think that could open up the possibility of building your own Alpine plugins that can use Alpine AJAX features.

from alpine-ajax.

Thanks for the quick response. Routing feature does add more value than the sse/websockets support at this time, glad to know that you are already working on it.
Thanks for putting in the effort, looking forward to seeing how the project progresses :)

from alpine-ajax.