Sending an Image from Express to a Vue Component using Socket.io

Instructor: [00:00] In this lesson, we'll update our Socket server to respond to a URL being called to load a random image from the filesystem. This image will then be sent over the socket to two connected clients. These clients will have a new view component to display these images, as well as the ability to select what the image is and send this answer back to the server, again using the socket.

[00:24] To start with, we've copied in some example images into the server's filesystem in preparation for the quiz. The next thing we're going to do is update our simple index.html file. We're going to add a button to this page, which will then start the quiz, which in turn will send an image to the connected clients over the socket.

[00:45] We already have the [inaudible] library added for doing an HTTP get to our server. We now add an HTML button with an on-click event handler, which in turn will call a new JavaScript function called send_image.

[00:59] The function will send the [inaudible] library to call a new route on the server called send_image. We'll quickly fire up a server and have a look and see what it looks like. Here, we have the browser open. If I click the button, we can see that it does a get call to send_image.

[01:18] Next, we'll add the route to the server.js file. The first thing we're going to need is the FS package, as we'll be dealing with files from the filesystem. Don't forget to install that using NPM. We'll now add the route handler for send_image.

[01:33] We'll add a logger statement to indicate that we're actually calling this function, just to help out in the console. Next, we need to get a handle on the image file name.

[01:43] We're going to do that by using a combination of Node.js property, which is a __dirname, which gives you the directory name of the current module, and a new function, which we're going to create in a second, which will return a random image file name.

[01:59] We'll then log the file name that's been generated. We use the FS readFile method, which is an asynchronous method. We pass it the generated file name, including the file path, and it's going to return us either an error or the raw data.

[02:15] We then use the socket to emit, using our new custom event, which is called show_image, where our socket payload is going to include a property to indicate it's an image. We'll set that to true and have a buffer property, which will the base 64-encoded raw data.

[02:31] We'll also use the response.send method to the test client. It doesn't actually hang while clicking the button. Our getRandomImage function will return a random number between one and six, as we have six images, which are called image one, two, three, four, five, six.

[02:52] We will then return the full file name, including the file path. We'll use the path.normalize method so that it's operating system-independent.

[03:01] One last thing to do while we're in the server side. We're going to add to the io.js file a new event listener for our socket. We're going to add a new custom event, and it's going to be called quiz_response.

[03:14] This will be when the user has answered the quiz. In other words, identified what the image is. The payload will be returned to us. We're going to also try and work out who the user is, using our IDs map, and pass it the socket ID.

[03:30] If we have a user, we will then output to the logger their answer and their name. On the view side, we're now going to create a new component, and it's going to be called quiz. Within the view component, we'll scaffold out the template and script blocks.

[03:48] We're then going to copy in some preexisting markup. This is a Vuetify dialog, which is bound to a property called dialog. We have our title and Vuetify image tag, which is bound to the imageData property.

[04:03] We have an ability for the user to select an answer describing what the image actually is, and then we have a method called sendResponse, which we're going to write in a second. This will send the answer back to the server via the socket.

[04:17] We also have a close button, which just sets the dialog property to false to close the dialog. We're just going to now initialize our data properties so that they have default values. We're going to set our dialog property to false, so the Vuetify dialog is initially hidden.

[04:32] We're going to have a blank answer initially, the image property also will be set to blank. Then going to populate the sockets block, starting with the show_image, which is the custom event being sent via the socket from our socket server.

[04:48] It's going to be passed some socket data. We'll set our image property to be a specific syntax. It's the buffer data. Then set the dialog property to true to show the Vuetify dialog. We blank the answer again, just to make sure we reset it, in case this is the second time the dialog's been displayed.

[05:07] We will now add our method, which is send_response. This method will send the data back to the server over the socket. The first thing we're going to do is construct a message_data object. That will be the payload we'll send over the socket.

[05:23] We're going to set a property on there called response, and that will contain or be bound to the answer that the user selected. We'll then use the $socketEmit method, and we'll use our custom event, quiz_response to actually send to the socket.

[05:42] We will then pass the payload, which is message_data. Now, we can see it in action. Here, we have two clients connected and open. I'm going to bring up my button to send and trigger the image sending.

[05:59] The clients have both received the image at the same time, which is a cat in this case. I'm going to select an answer and send it the dog and cat. If we look at the server console, we can see where updateUser is called, where the image was called, and we can see the fact that the, "Judy Mason has pressed dog," and, "John Adams has pressed cat."

[06:21] Clicking the close button. If I click the button again, we get a different picture. I can keep clicking it, and the picture will change.