Connect the Web With WebSockets

3.6 Updating Like Counts

Now each user has their own random ID. Let's start giving them the ability to like messages. So we'll take our whole return statement here in our socket on messages and we'll wrap it in a form element. We'll give it a class of message, And onsubmit will return. And I'm going to name a function here, we'll define it in a minute. We'll call it likeMessage. And we'll add a second argument here after data, index. So the index value every time this function runs will be the index in the array of our piece of data. Also, we want to have our messages be on the global scope. So I'll define a variable messageCache. And leave that blank for there but then on socket.on messages, we'll make the message cache equal to the data. So now we're sort of saving the data every time it comes in for future reference. Now here in like message we can refer to a message cache. And just pass it the index. So the likeMessage function will have the correct reference to this variable. Next, let's write the likeMessage function. So we'll call likeMessage, and it takes an argument message. So what we'll do is we'll find the index if any in the likedBy array of this user's Id. And we'll write two cases. One for if the index is less than zero or undefined, and another if the index is okay. In the event that our user id isn't on this list, we haven't liked the message yet. So we'll push this user's id to the message liked by array. If on the other hand it's already there, we want to unlike the message. So we'll splice the index and one space after. Next we'll emit a new kind of socket event. This isn't a new message, we're changing an existing message. So we'll emit And we'll call it update-message and we'll just pass the message. And last but not least, we must return false, so the page doesn't refresh. And we've made a little error. This should be onsubmit, not onsumbit So we're now editing our piece of data. But the update actually isn't displaying. That's because the only place we really render our data is here inside this function here. So let's take this Var html right down to where document messages it set to that. We'll cut that and then we'll create a new function called render. And here at the top we'll just say var data = message cache. Cool. Now let's call render here where it was before in socket.on. And we'll also call render here in like message. And here's our application. You can see I like these items and they can increase or decrease. It remembers which user I am so I won't be able to like an item infinite times. Of course if I refresh the page you'll see these updated likes do not persist. That's because we're not handling our Update message event on our backend yet. However we will in the next video so stick with us.