Morioh
Login
Jack Downson

Jack Downson

3 years ago

Simple Application to Implement WebSocket using Socket.io and Vue.js

💌 Vue Chat Room

Application snapshot

Simple application developed to learn the Web Socket with the socket.io abstraction. Completely based on Bitfumes’s video lesson available in YouTube.

Check out the application running!

🏆 Lessons Learned

  • Socket.io;
  • Real-time events listeners and emitters:

🚀 Technologies & Resources

Frontend:

  • Vue.js 2
  • Bootstrap 4
  • Font Awesome 6
  • Socket.io client

Backend:

Development:

  • Visual Studio Code
  • Nodemon & Node.js routines

🔨 Setting up the Environment

Make sure to have Node.js 10+ installed in your machine and its npm available in the command line, then use the following routines:

$ npm install     # Download dependencies
$ npm run watch   # Run development server
$ npm start       # Run production server

⚡ Features

  • [x] Join the chat room with a displayable name;
  • [x] Real-time overview on connections count;
  • [x] Send a message to the server;
  • [x] See other participants’ messages;
  • [x] See who’s typing;
  • [x] See who joined and who left the room;

Download Details:

Author: juliolmuller

Demo: https://vue-chat-room.herokuapp.com/

Source Code: https://github.com/juliolmuller/vue-chat-room

#vue #vuejs #javascript

Simple Application to Implement WebSocket using Socket.io and Vue.js
4.40 GEEK