Skip to content

Instantly share code, notes, and snippets.

@wtpayne

wtpayne/HTMX SSE test

Created December 1, 2020 16:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wtpayne/0642eedcb48a496d8ddcbe3f0f80a634 to your computer and use it in GitHub Desktop.
Save wtpayne/0642eedcb48a496d8ddcbe3f0f80a634 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
HTMX SSE test
/req/testpage:
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;900&amp;display=swap" rel="stylesheet">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://unpkg.com/htmx.org@1.0.0" type="text/javascript"></script>
<script src="https://unpkg.com/hyperscript.org@0.0.2" type="text/javascript"></script>
</head>
<body>
<div class="bg-gray-50 h-screen" data-hx-sse="connect:/sub/menu-dashboard">
<div data-hx-get="/req/menu" data-hx-sse="swap:menu" data-hx-trigger="load"></div>
<div data-hx-get="/req/dashboard" data-hx-sse="swap:dashboard" data-hx-trigger="load"></div>
</div>
</body>
</html>
/req/dashboard:
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 w-30 h-30 gap-5 p-12" data-hx-sse="connect:/sub/datacard1-datacard2-datacard3">
<div data-hx-get="/req/datacard1" data-hx-sse="swap:datacard1" data-hx-trigger="load"></div>
<div data-hx-get="/req/datacard2" data-hx-sse="swap:datacard2" data-hx-trigger="load"></div>
<div data-hx-get="/req/datacard3" data-hx-sse="swap:datacard3" data-hx-trigger="load"></div>
</div>
@benpate
Copy link

benpate commented Dec 1, 2020

Hey @wtpayne -- There's obviously a lot of moving parts here that are hard to debug remotely. Here are couple of thoughts, feel free to use them or ignore them if they don't fit the rest of your system design:

  • HTMX does support multiple SSE connections, but it can be tricky to manage. For instance, each swap: only listens to the nearest connect: statement, so if you have nested your hx-sse="connect:..." statements, only the inner one will have any effect.
  • Is it possible to put all of your SSE updates into a single URL? You can separate them out pretty easily by EventName, which should be easier to manage.
  • One final thought (that I didn't put in the code below) is that you've got a lot of HTTP requests happening. If it's possible to combine some of them for the first load, you'll probably get better performance. For example, instead of using hx-trigger="load" on each of the three datacard DIVs, look into just including them in the whole /req/dashboard response the first time out. You'll still be able to have a "placeholder" on /req/testpge while the dashboard is being rendered, and you'll save a lot of network round-trips in the meantime.

Here's some (really rough) sample code that might point you in the right direction (and also might blow up your toaster, who knows)

/req/testpage

<!DOCTYPE html>
<html>
  <head>
    <title>Test Page</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;900&amp;display=swap" rel="stylesheet">
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://unpkg.com/htmx.org@1.0.0" type="text/javascript"></script>
    <script src="https://unpkg.com/hyperscript.org@0.0.2" type="text/javascript"></script>
  </head>
  <body>
    <div class="bg-gray-50 h-screen" data-hx-sse="connect:/sub/all-dashboard-stuff">
      <div data-hx-get="/req/menu" data-hx-sse="swap:menu" data-hx-trigger="load"></div>
      <div data-hx-get="/req/dashboard" data-hx-sse="swap:dashboard" data-hx-trigger="load"></div>
    </div>
  </body>
</html>

/req/dashboard

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 w-30 h-30 gap-5 p-12">
  <div data-hx-get="/req/datacard1" data-hx-sse="swap:datacard1" data-hx-trigger="load"></div>
  <div data-hx-get="/req/datacard2" data-hx-sse="swap:datacard2" data-hx-trigger="load"></div>
  <div data-hx-get="/req/datacard3" data-hx-sse="swap:datacard3" data-hx-trigger="load"></div>
</div>

What's not really visible here is that the SSE endpoint /sub/all-dashboard-stuff would respond with all of the following event types

  • menu
  • dashboard
  • datacard1
  • datacard2
  • datacard3

Does this make sense?

@wtpayne
Copy link
Author

wtpayne commented Dec 2, 2020

It all makes sense ... I just need to figure out a mechanism for the back of the back-end to tell the server what's in all-dashboard-stuff, and to keep it updated as that list changes -- but it's all solvable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment