Display a broadcast message using a Vuetify snackbar component which is sent via Socket.io

Instructor: [00:01] For this lesson, we're going to simulate an external system calling a REST API on our Express server. The Express server will then the Socket.IO connection to cause a pop-up to be displayed on all the connected clients. The pop-up is going to be a view component. An example could be a server monitoring system which has triggered a webhook on your server.

[00:22] We're going to start with a server. The first thing we're going to do to simulate the external system is update our basic HTML page to allow us to trigger a notification via a normal REST API to our server, which then in turn will send out socket information.

[00:40] The first thing I'm going to do is add a script tag that's going to reference the [inaudible] library. Now we need to create a function which is going to post to our Express server with some information, which then in turn will trigger the socket message.

[00:58] Using the [inaudible] post method, we're going to create a new route on our Express server. For now, we'll just call it notification. We're going to pass a couple of values. This is going to be an object that consists of two properties, the actual message that we want to display in our pop-up. I'm going to create a form in a second. For now, I'm just going to create this in advance.

[01:28] We're also going to allow the user to select a color. The color will be on the pop-up that's displayed to the user, will change. This is to demonstrate that we don't have to just send a string via the socket. We can actually send an object.

[01:43] I'm using a query selector here because actually we're going to use a radio button in our HTML form. Now we just need to create our simple form. I've got some markup all ready to copy in from the clipboard. It's a simple form with an input field for the message and a radio button. The onclick event will call our function.

[02:00] Let's have a quick look and see what that looks like. I've started my server up. I have opened the localhost:8500. Remember, Express is serving up static web files for me. I've got my message input field. I've got a radio button for the color. I can send a message. Now we just need to update the server side to handle the post.

[02:22] Popping back into our server.js file, the first thing we need to do is install body-parser as we're doing a HTTP post to our Express server. Once that's done, we then need to make a reference to it inside our server.js file.

[02:38] Normally, you would have a separate route file in your Express application to keep things neat and tidy. For this case, we can just actually get away with putting our post or our route directly in the server.js file.

[02:52] We need to listen for a post. The route is going to be /notification. We'll have a request and a response. We don't need to worry about next. The first thing we're going to do is log out the fact that we have a message. Now we need to send the contents of the message on the socket.

[03:14] Like previously, we're going to use a socket.emit method. We need to use the global _socket because we want to do this to all connected clients. Just close that [inaudible] . Again, we need a custom event name. This time, I'm going to call it popup_notification, just to keep it fairly obvious what's going on.

[03:35] This time, instead of a string, we're going to be sending an object. The object will have two properties. One will be message. The other will be color. Lastly, we're going to return something to our response, else the client will hang in the browser. That's it for our server.

[03:51] Now we can go ahead and look at the Vue application itself. For reference, we're going to be using the Vuetify snackbar component inside our Vue application. Now we can hook it up. Coming back into our Vue application, we're going to create a new component. Within our components folder, we'll create a new file.

[04:09] We're going to call this component popup message. Within our Vue component, the template section will contain a Vuetify snackbar. The visibility of the snackbar will be bound to a property called snackbar.

[04:25] The actual color of the snackbar will be driven by what's been sent within the socket message. The contents of the snackbar will be sent via the socket. We're going to have a close button. This is simply going to set the snackbar property to false.

[04:39] Coming into our component script block, we're going to start with a data block. By default, our snackbar is going to be hidden. We'll set it to false. Our notification text is going to be blank. Our snackbar timeout will be 300 milliseconds or 3 seconds. Our default color will be success, which is a CSS class in Vuetify which makes it green.

[05:06] Now we need to include the socket information. We will use the custom sockets block. We will have a label which matches our custom event name, which was called popup_notification. That will give us access to the socket data. From that, we can set the snackbar notification text and color. Finally, we then need to display the snackbar itself.

[05:32] That's the Vue component build. The last thing we need to do before we can test this component is update our App.vue file. We need to make a reference to our new component in three different places, once to import it. We then need to export it. Finally, we need to reference it within our template. In this case, this component can sit outside of the containers.

[06:03] Now we can test it. To test this, I've got three connected clients which are connected to my socket server. They're receiving the heartbeat information from our previous lesson already. That's why they're all synchronized.

[06:16] In this corner, we have the HTML page, which is acting as our external system. If I enter a message, I'll make this info. I'll click send message. All three clients have now received the information via the socket server. If I choose error, the color will change. Now red. Notice they all appear at the same time. That seems to be working fine.