All right, now that we've got some real-time communication happening from our server down to our client, let's move things over to Viewland. js, right? Okay, so let's say that I want to keep count of the number of home page visits in real time and display that count to the page. Well, the first thing I want to do is create a new view page component over here under JS and pages to display this data on.
view. I'll add in a quick template here that just has a div that says the visitCount is x. We'll make this x dynamic in just a moment. Next, I need to register a route for this view page.
Since we're using Laravel inertia, I can do that with regular old Laravel routing. php, I'll say route colon colon get. We'll make this available at slash visit dash count. And then we'll provide a callback function that just returns inertia, render, and the page we want to render.
was called visitCount. All right, over in my browser now, it looks like I have an unexpected token. That's because I failed to put the semicolon at the end of this line here. So much for jumping back and forth between PHP and JavaScript.
That really gets me sometime. Now our page is back, but more importantly, if we visit slash visitCount, we do indeed get this little message right here. The visit count is X. Let me zoom in on that just a little bit so you can see it better.
That makes the left-hand side not really that visible, but that's okay. We're more worried about this side. View, and then update some reactive data whenever the server-side event happens. js, we're already listening to the Hello World channel and the Hello World event, and then just console logging it out.
js, and then inside of visit count, we'll add a script setup section. We don't need TypeScript here. And then I'll just do the exact same thing. I'll listen to that channel to emit that event.
Instead of console logging the event, though, let's actually create some reactive data. So here I'll say const count equals ref zero. So it starts out at zero, right? We have no count to begin with.
I'll also need to import ref from view. And then down inside of the callback function, what I want to do whenever the event triggers is I want to increase the count. value++. The very last step here is simply to display that dynamic count.
Let's take a look at this now in the browser. On the right-hand side, the visit count starts off as zero, but then if I refresh the homepage here, the count is dynamically updated every time we hit refresh. This is that real-time data in action, and it is so extremely sweet.