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

Share this video with your friends

Using a HTTP POST to trigger a message which is broadcast to all connected clients via Socket.io. The message is displayed within a Vue component, which in this case is a Vuetify snackbar component.

As part of the lesson we demonstrate transmitting an object so we can dynamically change the snackbar color, as well as the message itself.

An example where this approach might be used is where you want a server monitoring system call a web hook on your server when there is an issue, this in turn pushes a message to connected clients, simultaneously and in real time.

Jon Barson

~ 5 years ago

I will from here on call 'Axios', 'Aoxis'.
Thanks for the lessons, I finally grok websockets and how to use them.

Mark Barton(instructor)

~ 5 years ago

Haha - its funny how you have in your head a certain way of calling something and it just sticks.

Glad the course helped!

Jose Alfonso

~ 4 years ago

Out of the box neither this lesson nor the previous one run after installing. The client app does not get updated. Node v12.17.0 on macos

Also on the server code you get: Papertrail connection error: Error: getaddrinfo ENOTFOUND HOST_HERE at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:66:26) { errno: 'ENOTFOUND', code: 'ENOTFOUND', syscall: 'getaddrinfo', hostname: 'HOST_HERE' }

Creeland Provinsal

~ 4 years ago

{ errno: 'ENOTFOUND', code: 'ENOTFOUND', syscall: 'getaddrinfo', hostname: 'HOST_HERE' }

If you are getting this error it means you need to set the hostname and port in your server/logger.js file. Mark goes over setting up Papertrail in this lesson https://egghead.io/lessons/javascript-nodejs-logging-using-winston-and-papertrail

I'm unsure what could be going wrong if the client isn't receiving heartbeat updates. Make sure that both the client and the server are running.