Building an acknowledgement function to a Vue Socket.io emit method
An acknowledgement function allows the client side call to receive a server side generated response as part of the callback.
This can be useful where the client needs confirmation that the initial call has succeeded or the payload has been manipulated with Server side logic and returned back to the client.
In this lesson we enhance the previous lesson Quiz Vue component to simulate checking the answer on the server and then returning back to the client in the callback function the result of the check.
Instructor: [00:00] To add an acknowledgement function or callback function, the first thing we're going to do is update the io.js file on the socket server. Here, we're going to update our previous lessons code, which was handling a response from the client to a quiz.
[00:14] First, we added a second argument for the callback function, seen when we have a callback function. For this example, we're going to simulate as if the server is checking to see if the answer is correct. We'll add a random yes/no check.
[00:34] We then output to console the result. Finally, we call the actual passed in callback function, and we pass back the actual result we want to send to the client. In this case, we're going to send a string, which has already been constructed with a correct or incorrect answer, and this then will be displayed on the client.
[00:52] Once that's done, we can look at the client code to see how we implement the callback function.
[00:58] Opening our Vue application and looking at our quiz.vue component from the previous lesson, we're going to set a property that's going to hold the result from the server. We need to make sure it's blank every time the image is shown so that it resets the answer from the server.
[01:13] We do that within the sockets show_image event block. We also need to set this property within our data block so that we can bind the result. Again, we will set it initially to blank.
[01:28] Finally, within our method, within the $socket.emit method, we're going to add a third argument, which will be the result of our callback function. Once the server returns the result, we can set our server_result property and then bind this to our display.
[01:45] Now, within our Vue component, we can have a visual representation of the result. We're going to use [indecipherable] alert box here and within the alert box, we will bind to our server_result property. The visibility of the alert box will be based on the fact that we have a server_result value, add some styling, which you may wish to change based on whether we get an incorrect or correct result.
[02:09] We can now fire up the socket server and a couple of clients, and test this.
[02:14] I have two clients running. I send the test image. I select an answer, and the callback fires and the answer comes back correct. I select an answer, and again it comes back correct, even though I selected cat. It's because we're just using a random generator. Eventually, we get incorrect if we hit it enough times.
[02:33] I close these and we just do it again. If I keep hitting the button, we get different images each time, just like we did last time. If I selected cats, again, incorrect. Select bird, and incorrect again, because it's random.
[02:53] Clicking the button again, and we get a new image, but you noticed the server-side property has been reset, so it seems to be working fine.