Basic Chat Web App using Express.js, Vue.js & Socket.io

In this Express.js, Vue.js & Socket.io

In this article we will build a chat web app using Express.js, Vue.js and Socket.io. We will use Bootstrap 4 for styling.

To see how the final project looks like check github repository below:

https://github.com/jaouadballat/ChatExpress

  1. Install Vue Cli

First of all we need to setup vue project by running this commang in our terminal:

vue create chat-app

Edit App.vue:

Create Chat.Vue:

To style our compenents we need to add Boostrap resources in our index.html file or use npm to install it.

2.Create Server folder:

We need also to install express js to work with in our backend, for that we need to create a folder called server in our root directory, than initiate it by runnig:

npm init

after that we need to add Express.js in our backend folder

Run the server in your terminal by running nodemon app.js

Install socket.io package using npm install — save socket.io and require it in our app.js server file, then establish a basic connection:

Now lets switch back to the client side, in Chat.vue we need ‘socket.io-client’ npm package:

npm install --save socket.io-client

Now in terminal which we are running the server we should see the socket.id printed out in the console. This is the output you should get:

3. Implementing Send Message functionality:

In our Chat.vue component we neet to add sendMessage function where we are going to send a message to server via socket.io :

In app.js we are listening to socket message comming from Chat.vue component:

Then we emitting the data that we are receiving to all client listnenig to this server.

Back to our client folder we received the data comming from our server vie socket.io when the component mounted:

This is how our Chat.vue will looks like at the end:

And this is how our server looks like:

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.