htmx-haskell

HTMX Haskell examples

I am trying to learn htmx. I like to see the bits. So I thought I would write some examples and see what is really going back and forth between the browser and the server. Here are some of the examples, with both the html and server code exposed. (You can get and compile the code for yourself here)

A Counter with websockets

This counter should increment every 3 seconds.

Counter here

Here is what the html above looks like:

And here is the haskell code that generates the response:

Here are some things to notice. The websocket connection is made immediately after the page loads. Every time the page is reloaded, the counter starts up again at 0. The first response sent through the websocket appears below, and is wrapped in

After that, every 3 seconds we send:

through the socket, which replaces the counter with an incrementing integer.

And here is the response from the server after the Websocket open request to counter

Send htmx over websocket

You can reuse your websocket to do other things. For example by sending a normal http request to the "/htmx-over-websocket" endpoint, the server responds with a websocket message on the socket created above.

This will be swapped when button above is clicked. The haskell code that makes this happen is below. The response from the server that was received will be displayed.

You should notice that every time you click on the button above, the counter in the response increases, so you know that in fact a message was received from the server.

Trigger example

I found the description of hx-trigger attribute, described here, confusing so I wanted to see if I could implement it myself and watch the interaction. The idea is that the client (browser) listens for a custom event by incuding an element with an "hx-trigger" attribute. The contents of the attribute is the name of your custom event, followed by the text "from:body" as a CSS selector. The server must put the event name in a custom header, whose format is "hx-trigger: myEvent" Here is the html we will be using.

Here is the code which is executed by the two requests

Request to "trigger" when the button is pressed
Request to "after-trigger" after "myEvent" is received

This will change after myEvent triggers to "after trigger response"

The actual response from the server will replace this text. You should notice that near the bottom of the response is the line: "hx-trigger: myEvent"