We've now had the opportunity to mess around a little bit with our join function and our handle in function.
We're now going to kind of leave behind all this demo and exploration stuff and focus more on the real
problem at hand, which is to just load our list of comments up onto the screen.
So at this point, I'm going to find my handle in function inside the comments channel.
I'm going to clear out all this log stuff that we have because I don't like having log statements laying
around.
Okay, So now we want to focus on loading up our list of comments and somehow getting them onto the
screen.
Now, something I want to make really clear to you, just in case it's not quite clear yet, is that
we are going to use our WebSocket connection to fetch this list of comments and then we are going to
render them on the client side.
So we're not going to use an HTML template like we have previously for rendering this list of template
of this list of comments, We're going to entirely rely upon our JavaScript code to fetch the list of
comments and then render them to the screen.
So that's the plan.
Speaking of the list of comments on the screen, I want to mention one little issue that we haven't
quite addressed just yet.
As we know, the comments that we have created or the comment model that we have created is associated
with a very particular topic.
So when you leave comments, they are associated with a particular topic.
Right now on our topic show page, we know what topic we're looking at based on the URL.
So when the user goes to localhost colon 4000 slash six, that means that we want to show the topic
and comments associated with topic ID six.
So my question to you is, inside of this join function where we're saying that we're going to return
back the list of all the comments associated with this topic.
How can we figure out what topic we are trying to look at?
How can we figure out what that we want to find like topic with ID six and find all the comments associated
with that?
We need to somehow when we join a channel, indicate what topic we are trying to learn more about.
So that's our goal.
That's what we have to kind of figure out how to do.
So I've got a plan on how to do this.
So let's talk about it.
Let's talk about what the plan is, what the plan is going to be.
I do want to mention to you one quick thing before we actually talk about this plan.
I want to remind you that right now our socket file, our socket JS file, where we make some initial
contact, is all code that is instantly executed the instant that we load up our our web page.
Right?
Like just as soon as web page loads, this code is executed and there's like nothing to stop it from
running right now.
So I just want to point that out really quick.
Okay.
So here's the plan.
I'm going to suggest that we refactor all of that code that we just looked at, all that all that socket
code on the JavaScript side into a single function or object or something that we will call our app
on the JavaScript side.
Then inside of our topic show template, we will add in a script tag in that script tags purpose will
be to boot up our JavaScript app while passing in the topic ID.
So that's what's going to kind of connect the dots here between the HTML template side and our JavaScript
app.
Knowing what topic it's trying to figure out or what what topic ID it's supposed to be showing, we're
going to rely upon our template, adding a script tag that's going to start up our app and pass in the
appropriate topic ID.
Then once our client app, once our JavaScript app with ID gets booted up with a topic ID equal to one,
our JavaScript app will attempt to join channel with comments Colon one and so one here is just a total
example, right?
Like whatever the topic id might be.
One, two, three, four, five, six, whatever it might be.
We will join comments colon whatever the topic ID is.
Once we join that channel, the socket will be forwarded on to our comments channel.
We will look at the string that was used to join that channel.
We'll look at the ID on there.
We'll notice.
Okay, whatever this number is, this must be the ID of the record they were trying to fetch.
We will find all the comments associated with that topic and then we'll send them back over to our JavaScript
app.
And our JavaScript app will be responsible for rendering our list of comments to the screen.
So this is the overall plan.
This is our overall goal.
The real linchpin, the thing that makes it all work together is the fact that we are going to refactor
our JavaScript app to be a function of sorts that is going to be that is going to expect to receive
the ID of the topic that it needs to display.
So let's take a quick break and come back and start refactoring our app to meet this type of contract.