Close Menu
    Check BMI
    Technology

    htmx: Server Sent Event (SSE) Extension

    TechAiVerseBy No Comments7 Mins Read1 Views

    htmx: Server Sent Event (SSE) Extension

    The Server Sent Events extension connects to
    an EventSource directly
    from HTML. It manages the connections to your web server, listens for server events, and then swaps their contents into
    your htmx webpage in real-time.

    SSE is a lightweight alternative to WebSockets that works over existing HTTP connections, so it is easy to use through
    proxy servers and firewalls. Remember, SSE is a uni-directional service, so you cannot send any messages to an SSE
    server once the connection has been established. If you need bi-directional communication, then you should consider
    using WebSockets instead.

    This extension replaces the experimental hx-sse attribute built into previous versions of htmx. For help migrating
    from older versions, see the migration guide at the bottom of this page.

    Use the following attributes to configure how SSE connections behave:

    • sse-connect="" – The URL of the SSE server.
    • sse-swap="" – The name of the message to swap into the DOM.
    • hx-trigger="sse:" – SSE messages can also trigger HTTP callbacks using
      the hx-trigger attribute.
    • sse-close= – To close the EventStream gracefully when that message is received. This might be helpful
      if you want to send information to a client that will eventually stop.

    Installing

    The fastest way to install sse is to load it via a CDN. Remember to always include the core htmx library before the extension and enable the extension.

    <head>
    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js" integrity="sha384-/TgkGk7p307TH7EXJDuUlgG3Ce1UVolAOFopFekQkkXihi5u/6OCvVKyz1W+idaz" crossorigin="anonymous">script>
    <script src="https://cdn.jsdelivr.net/npm/htmx-ext-sse@2.2.4" integrity="sha384-A986SAtodyH8eg8x8irJnYUk7i9inVQqYigD6qZ9evobksGNIXfeFvDwLSHcp31N" crossorigin="anonymous">script>
head>
<body hx-ext="sse">

    An unminified version is also available at https://cdn.jsdelivr.net/npm/htmx-ext-sse/dist/sse.js.

    While the CDN approach is simple, you may want to consider not using CDNs in production. The next easiest way to install sse is to simply copy it into your project. Download the extension from https://cdn.jsdelivr.net/npm/htmx-ext-sse, add it to the appropriate directory in your project and include it where necessary with a