Transcription: OpenAgents Episode 052 - HTMX Server Sent Events

Source: https://twitter.com/OpenAgentsInc/status/1747430710212702706 Wiki source: https://raw.githubusercontent.com/wiki/OpenAgentsInc/openagents/Video-Series.md Media title: OpenAgents - Episode 052: HTMX Server Sent Events We learn about the new HTMX serv... Upload date: 20240117 Transcription model: mlx-whisper/mlx-community/whisper-tiny Generated at: 2026-06-01T20:13:54Z

Machine-generated transcript. Review speaker labels and wording before using this as quote-grade source material.

[00:00] Christopher David: Alright, let's continue. I forgot I had my

[00:06] Christopher David: Ecam sets only show my current tab so you didn't see this in the last video. But that's deployed now openages.com slash Bitcoin

[00:14] Christopher David: Which is cool, but if a hundred people load that then it's gonna be making a hundred different calls to the server every five seconds and

[00:22] Christopher David: also

[00:23] Christopher David: hundred different calls to

[00:25] Christopher David: the

[00:26] Christopher David: API. So we don't want that

[00:28] Christopher David: So we're gonna refactor that to maybe use a cache, but also

[00:33] Christopher David: now learn about

[00:37] Christopher David: The new way of doing server sent events with HTML. So let's read this

[00:43] Christopher David: The server sent events connects to an event source directly from HTML

[00:47] Christopher David: It manages the connections to your web server listens for server events and then swaps their contents into your HTML web page and real time

[00:55] Christopher David: SSE is a lightweight alternative to web sockets that works over existing HTTP connections

[01:00] Christopher David: So it is easy to use through proxy servers and firewalls

[01:04] Christopher David: Remember SSE is a unidirectional service so you cannot send any messages to an SSE server once the connection has been established

[01:12] Christopher David: If you need bi-directional communication then you should consider using web sockets to set that's fine for us because

[01:18] Christopher David: All of our users are gonna be communicating to the server through standard HTTP requests

[01:22] Christopher David: We just need to be notifying people of events that occur

[01:26] Christopher David: This extension replaces the experimental hx-ss

[01:31] Christopher David: E attribute built into previous versions of HTML

[01:34] Christopher David: That's what we were using previously for help migrating from older versions see the migration guide blah, blah, blah

[01:39] Christopher David: Use the following attribute to configure how SSE connections behave

[01:45] Christopher David: As I see connect equals URL

[01:49] Christopher David: As he swap equals message name the name of the message to swap into the DOM

[01:56] Christopher David: Hx trigger equals SSE colon message name

[02:00] Christopher David: As I see messages can also trigger HTTP callbacks using the hx trigger

[02:06] Christopher David: Okay, so do a stoves this section extension and

[02:08] Christopher David: And

[02:14] Christopher David: I guess we'll keep this going on our same

[02:25] Christopher David: Bitcoin page

[02:29] Christopher David: Let's drop that up there

[02:31] Christopher David: Is it

[02:37] Christopher David: I'm just past this in here

[02:48] Christopher David: Let's call this

[02:54] Christopher David: SSE

[02:58] Christopher David: And if I go to localhost no open it is.test slash Bitcoin

[03:07] Christopher David: So

[03:26] Christopher David: Whoa

[03:31] Christopher David: Oh, that's funny so

[03:37] Christopher David: It tried to fetch chat room, but redirected it to the homepage and so it loaded all of the expensive JavaScript from lots of expense just like

[03:49] Christopher David: Or navel out splash page so it needs to be okay. Okay. That's what we want to get away from all this JavaScript

[04:01] Christopher David: Let's maybe make a new

[04:07] Christopher David: Rout called Bitcoin price ticker

[04:37] Christopher David: Let's also refactor the

[04:45] Christopher David: Bitcoin controller

[04:54] Christopher David: Methods out of here

[04:58] Christopher David: I'll put them in a Bitcoin controller

[05:07] Christopher David: I'm moving from here

[05:24] Christopher David: And place them here

[05:37] Christopher David: Now we'll call this

[05:51] Christopher David: SSC

[05:56] Christopher David: And now

[06:01] Christopher David: Okay, make sure our test pass

[06:07] Christopher David: Okay, now let's see

[06:19] Christopher David: Okay, there we go. So now instead of doing a bunch of weird JS it's just hitting Bitcoin price ticker

[06:27] Christopher David: All right events sources response has a mime type text hmall that is not text event stream

[06:44] Christopher David: See if we can do this

[06:47] Christopher David: Return a text

[06:49] Christopher David: Event stream

[06:52] Christopher David: Well

[07:15] Christopher David: That's interesting

[07:17] Christopher David: I am probably don't want to do that but

[07:22] Christopher David: Yeah

[07:34] Christopher David: Oh, yeah

[07:42] Christopher David: So check this out what I can do now is remove our old

[07:48] Christopher David: Let's do this first

[07:50] Christopher David: Bitcoin price ticker returns price

[08:09] Christopher David: Let's remove this

[08:21] Christopher David: I still don't know what those console errors are

[08:28] Christopher David: Let's make it big still

[08:37] Christopher David: Each one

[08:42] Christopher David: Can I do the vats

[08:50] Christopher David: Well, the price is ticking up isn't that nice

[09:07] Christopher David: Contents of this box will be updated in real time with every SSE message received

[09:20] Christopher David: Okay

[09:27] Christopher David: Okay, it's cool that this is being done through SSC however

[09:45] Christopher David: This is still we haven't like reduced the number of calls because this is still just

[09:49] Christopher David: Calling it for every person I'm pretty sure

[10:00] Christopher David: Like if I open this up in a different browser

[10:06] Christopher David: It's not like they would be ticking the same will be on different texts because they're making two different calls

[10:14] Christopher David: Which we don't want

[10:18] Christopher David: I'm not going to do it

[10:37] Christopher David: Now this is working

[10:43] Christopher David: But it is fetching the API

[10:46] Christopher David: the price via API

[10:50] Christopher David: Every five seconds for every user connected

[10:54] Christopher David: Instead of that I want the server to fetch the price once every five seconds and broadcast

[11:02] Christopher David: to all connected clients via SSE the price

[11:07] Christopher David: Please suggest

[11:10] Christopher David: How to refactor accordingly

[11:16] Christopher David: You

[11:46] Christopher David: You

[12:16] Christopher David: You

[12:40] Christopher David: Maybe a cash is all we need maybe we don't need broadcasting here because

[12:46] Christopher David: And that would actually be better so so

[12:53] Christopher David: If we're doing the broadcasting method we don't have a way of like

[12:57] Christopher David: Like I don't want the server to be fetching the Bitcoin price if no one's looking at the site

[13:02] Christopher David: That's just a waste

[13:05] Christopher David: Because we don't need it for any other process. This is just information only

[13:10] Christopher David: But there's 10 people on the site. I don't want it fetching 10 number times

[13:16] Christopher David: But if what you're saying is

[13:24] Christopher David: Damn

[13:27] Christopher David: Please confirm

[13:29] Christopher David: Okay, I don't know how terrible cash is work

[13:34] Christopher David: Can you confirm

[13:37] Christopher David: That the cash

[13:41] Christopher David: Value works across all users

[13:46] Christopher David: Yeah, I'm never used before

[13:59] Christopher David: What is the cash

[14:16] Christopher David: Okay, let's try it

[14:34] Christopher David: modify this

[14:38] Christopher David: to use the cash

[14:46] Christopher David: It doesn't like that

[14:58] Christopher David: Why doesn't like that

[15:07] Christopher David: Stupid

[15:11] Christopher David: Except that I want that together

[15:13] Christopher David: Yeah

[15:15] Christopher David: Yeah

[15:17] Christopher David: Yeah

[15:38] Christopher David: modify the SSC to use the cash price

[15:47] Christopher David: I

[15:49] Christopher David: don't see that anything needs to be different there

[15:59] Christopher David: Okay, what is that? Let's try it here and

[16:04] Christopher David: a new browser

[16:09] Christopher David: 56263

[16:13] Christopher David: Holy shit

[16:17] Christopher David: Okay, that's really great so we've eliminated the main problem which is

[16:31] Christopher David: us

[16:33] Christopher David: hitting the API

[16:35] Christopher David: The external API more than needed this is awesome

[16:39] Christopher David: conceivably there's a concern that

[16:43] Christopher David: every time

[16:47] Christopher David: The clients hit the

[16:49] Christopher David: Our server couldn't we remove that via broadcasting?

[16:56] Christopher David: But is that even like worth caring about?

[17:02] Christopher David: Let's see, so use cash

[17:08] Christopher David: I don't know why we're getting these events

[17:14] Christopher David: event here, I mean it's all working

[17:16] Christopher David: just that I don't know what to do

[17:39] Christopher David: Thanks that is working great

[17:48] Christopher David: But do you know why every event is generating this console air?

[18:08] Christopher David: I'm curious to see if that happens in production

[18:32] Christopher David: Okay, I would be happy to leave this there

[18:34] Christopher David: But I do let's just like see if we can learn about broadcasting a little bit more like specific event broadcasting

[18:55] Christopher David: This is cool

[19:05] Christopher David: Okay, before I do that I'm gonna first

[19:13] Christopher David: I'm curious if this air happens in production so I'm gonna deploy this

[19:20] Christopher David: Price ticker uses cash

[19:22] Christopher David: Let's make sure that all works in prod

[19:26] Christopher David: I'll let the tests run first

[19:32] Christopher David: Uh-oh

[19:35] Christopher David: Um, Bitcoin price test

[19:44] Christopher David: It only shows that after the first text so we're just gonna say

[19:51] Christopher David: Yeah, I'm just gonna skip that for now

[19:59] Christopher David: I can reach it

[19:59] Christopher David: Okay, I'm just going to skip past the waiting for that.

[20:17] Christopher David: Works locally.

[20:18] Christopher David: Okay, let's get that a second to deploy.

[20:24] Christopher David: Get check out main.

[20:28] Christopher David: Okay, it's a little bit more about this.

[20:48] Christopher David: Receiving name events.

[20:57] Christopher David: SSC messages consist of an event name and a data pocket.

[21:04] Christopher David: Where is the name of the event?

[21:17] Christopher David: Okay, let's get that.

[21:27] Christopher David: Okay, let's get that.

[21:37] Christopher David: Child elements can listen for events by using the special HX triggers syntax SSC colon event name.

[21:51] Christopher David: Okay, how do I specify names of events?

[21:58] Christopher David: Did I pass this information into here?

[22:05] Christopher David: I did not.

[22:21] Christopher David: Okay, let's see if we've got that working now in prod.

[22:33] Christopher David: Huh, what's going on here?

[22:44] Christopher David: Status pending.

[22:53] Christopher David: Okay, let's see.

[23:06] Christopher David: Okay, let's see.

[23:16] Christopher David: Okay, I'm guessing it's waiting on the cash and the cash is maybe not configured.

[23:24] Christopher David: Okay, so I had that SSC thing working locally and when I push it up, I got a weird error.

[23:34] Christopher David: So I reverted it and I think there's just more for us to figure it out.

[23:40] Christopher David: I don't know why it's working locally, but not in prod.

[23:48] Christopher David: So I have this Lair of L wave broadcasting thing and I have inertia and so that could be conflicting.

[23:55] Christopher David: So I don't know there's more to research there.

[23:58] Christopher David: But I want to get at least the cash pushed up.

[24:04] Christopher David: So let's just do that and then we'll tackle broad casting in the future video.

[24:34] Christopher David: Okay, can I redo here?

[24:55] Christopher David: Let me grab that commit from here.

[25:17] Christopher David: I don't want to do that.

[25:27] Christopher David: I want to get the cash working.

[25:30] Christopher David: That's in services.

[25:44] Christopher David: That should work regardless of whether it's the SSC since we're using that to power the.

[25:51] Christopher David: Let's make sure this is working locally.

[25:59] Christopher David: Okay, so I'm going to do that.

[26:09] Christopher David: Okay, so I'm going to do that.

[26:14] Christopher David: Okay, so I'm going to do that.

[26:23] Christopher David: Okay, so I'm going to do that.

[26:33] Christopher David: Okay, so I'm going to do that.

[26:38] Christopher David: Okay, so I'm going to do that.

[26:43] Christopher David: Okay, so I'm going to do that.

[26:47] Christopher David: So what I'm going to do is we're able to get the ex-tism.

[26:54] Christopher David: PHP SDK working lives.

[26:57] Christopher David: This is an example of a wasom plugin being pulled in.

[27:01] Christopher David: So the kind of stuff that we had done previously with the wasom plugin registry, the separate

[27:05] Christopher David: Rust app.

[27:08] Christopher David: We're going to be able to pull that into the Lairbell.

[27:12] Christopher David: So we're going to do that.