Create an AI chat bot with Livewire and ChatGPT
Playing
05. wire:stream basics

Episodes

0%
Your progress
  • Total: 29m
  • Played: 0m
  • Remaining: 29m
Join or sign in to track your progress

Transcript

00:00
Let's go off track for a little bit and talk about how wire stream works with a really simple counter example that you can find directly on the LiveWire docs and then you can refer back to it if you need to. OK, let's go ahead and create out a simple component here and test this out.
00:15
So we're going to go ahead and make out a counter component. Let's go over to our routes and let's register this out as counter. Swap this over to our counter and we should be good. OK, so let's go over to this in the browser and.
00:33
Obviously, we don't see anything just yet. So what are we going to do here? Well, we want to create out. We'll start with our counter template, a counter in here that maybe starts at five or ten and then a button to start this counter.
00:48
Now, what we want to do is see this decrement and tiller. It's going to be a countdown, but what we want to do is do this in a single network request. So if you think back to our chat bot, we're going to get this content streamed in in pieces. It will be a few words at a time.
01:04
And we want to display this on the page as that content actually rolls in. What we don't want to do is continue to send network requests over in here to LiveWire. To get these back, it's not great practice to just constantly pull this if you don't need to. And that's where wire stream comes in.
01:25
OK, so let's go ahead and build out this full example. So let's create this button to click and we'll just say start. Let's go over to our counter and we'll create out this start here and let's create a counter up here, which starts at five and then a button to start this counter. Starts at a specific value.
01:49
This is going to start the countdown. And then, of course, over here we can grab out that counter value. So at the moment looks like that when we click that invokes that method. So here's what we typically do.
02:03
Let's create out a while loop in here. And the condition of this is going to be that these counter here is greater than or equal to zero. What do we want to do? Well, we want to go ahead and sleep for a second, and then we want to set the counter to the current counter value minus one or just do minus minus and see what happens.
02:25
So let's go over, hit start. And yeah, sure enough, nothing is happening. This is happening behind the scenes. And of course, it's not updating.
02:34
So what we want to do is stream the value of counter directly to an element on the page. So to do this inside of here, we're going to say this stream. And this takes a couple of options. The first one is the element that this goes to.
02:53
So let's bring in named arguments here to make it a little bit easier. The second one is going to be the content, which is going to be the counter itself, of course, because that's what we want to see. And then we have a second option, which I think by default is true, which is replaced. Do we want to replace this or add onto it?
03:11
And actually, no, the default of this is false because we do want to append. This will append the value and this will replace the value. So let's start with replaces false because that's what we're going to be using for our chat. OK, so is this going to make any difference?
03:27
The answer is not really because we are not outputting the streamed content to the page. So let's go over to our counter component. And in here, we're going to change this over to wire stream. Now, what do we call that?
03:42
If we have a look, we call this count. So let's go and reference count here. And then we just want to output the current value of the counter. All right, let's try this out.
03:51
I'm going to hit start. And yeah, sure enough, what's happening now is that's counting down because I said replace the false. It is just appending onto this. But of course, once we change this back over, it will work.
04:02
So you can see that it's working now and we end up at minus one. But who cares? We are just looking at a simple example here. So let's go ahead and say true.
04:10
And let's actually switch this over to just greater than. And let's try this out. I'm going to hit start. And yeah, it starts counting down.
04:18
Obviously, because we've chosen a lower number, let's just wait for it to get all the way down to zero. And. There we go, perfect. So if we open up our network tab here, what you'll notice if we just look at all here, when I do click on this, you'll see that we do send a single request to live wire.
04:38
But then live wire is going to use that stream API to continue to stream this request down. So we're not making a bunch of network requests over and over again. It's also a lot more convenient to use wire stream because we don't need to set up any kind of mechanism to constantly reload this component. And if we did reload the component and there was other data in there that was being fetched, maybe from the database or even an API request that would continue to, of course, go ahead and make
05:08
requests and it would slow everything down. Okay. So now that we have looked at a really simple counter example, let's go ahead and apply this to our chat response component, because we want to take the response that we get back here. And we want to create a streamed response and then append all of them pieces of data to the chat bubble.

Episode summary

In this episode, we take a hands-on detour to explore the basics of the wire:stream feature in Livewire. To keep things super simple, we work through a basic counter example straight from the documentation, so you can easily refer back to it whenever you need a refresher.

Here’s what we do: we build a little counter component in Livewire that counts down from a given number. We set up a button so you can start the countdown, and we play around with how the value updates on the page. At first, we see that nothing is updating for the user—everything is happening behind the scenes. But when we implement wire:stream, the counter value streams in real-time right to the browser, just like how a chat message would appear piece by piece.

We also check out how Livewire sends only a single network request and then streams the updates to the frontend, rather than constantly polling the server. This not only makes things smoother but also prevents a bunch of unnecessary network requests and potential slowdowns, especially if your component relies on lots of other data.

After running through the counter example, we get ready to apply this real-time streaming setup to our chat response component. The goal: to stream each piece of chat data into the bubble as it comes in, using what we learned from the counter. This was a great warm-up for real-world streaming in your Livewire apps!

Episode discussion

No comments, yet. Be the first!