Chat-app Creation Using Vue.js, Nuxt.js, Node.js, Socket.IO, Vue-Socket.IO, Vuetify.js Technologies
Hello everybody. Recently I’ve got a desire to master the Socket.IO library and create a chat application, to strengthen theoretical knowledge with practice, so to say.
I actively use the technological stack which is implemented in the application in my work on commercial projects, but for Socket.IO.
It’s easy to inject the above-mentioned library into the already working project, but today I am going to speak about creating an app from scratch.
Let’s proceed, I do not like long forewords myself.
Setting up and installation of the Nuxt.js generic template.
- You need to have Node.js installed, otherwise — install it.
- If your NPM version is under 5.2 — install npx globally, using the rights of admin $sudo npm install -g npx.
- After that create a project with the help of the following command:
$npx create-nuxt-app <project-name>
(here you will find more information on project creation).
- Then a project configuration menu will appear (I used my project details):
- Project name — “Nuxt-chat-app”
- Description — “Simple chat with Nuxt.js”
- Author’s name — “Petr Borul”
- Package manager — “NPM”
- UI framework — “Vuetify.js”
- Server Framework — “Express”
- Nuxt.js modules — “PWA”
- Linting tools — “ESLint”
- Test framework — “none”
- Rendering mode — “Universal”
Let’s install SOCKET.IO: $npm install socket.io — save
I also used a wrapper for SOCKET.IO — Vue.SOCKET.IO.
In this library, you can call the websocket events and subscribe to them through the Vuex store, but for the hands-on review of the library, it is too implicit. That’s why I implemented the logic at the component level (here is a description of the two possible ways of its implementation).
$npm install vue-socket.io — save
The full information on Nuxt.js folders’ structure you can find here.
The main points:
- The folder pages contains views and routes. The framework reads all .vue files inside the folder and creates a router for the application.
- The folder middleware contains the intermediate processing functions (the named ones are created in this folder, and if you want to specify the anonymous ones — you can declare them inside the component).
- The file nuxt.config.js contains Nuxt.js user configuration.
- The folder store contains the files of Vuex container. After index.js file creation in this folder, the container is activated automatically.
So, we have dealt with the main notions, let’s proceed to the app development itself.
The folder contains the file index.js — we’ll change it a bit and take the server configuration to a separate file app.js.
We’ll add server configuration to index.js:
Then we’ll order Node.js to listen to the server configured:
Further on we create the file socket.client.js and add it to the folder plugins, we indicated the file extension ‘client’, because we need it only on the client-side (Here you can find all the info as to the plugin’s adjustments).
Now we’ll register it in the nuxt.config.js file:
From this point on you can refer to it in any component, using only the name of the file this.$socket.emit().
In the app.js file we’ll create two models of working with the data:
We have finished with the server at this point and now we’ll proceed to the client side.
In the folder store we’ll create index.js file and add the store index.js:
Further on we’ll add a layout to the file index.js in folder layouts (I use UI library Vuetify.js because of the Material Design, which I like very much).
When the submit () method is called, the form is validated, and in case of success, we send the event to the server this.$socket.emit().
We send a String with the name of the event to the server, and a callback function, after the fulfillment of which we get an ID and assign it to the user’s object, then we write it down to the state and send it to the chat page.
Let’s describe the event processing on the server:
- The event “connection” is called when the user gets the connection with the server.
- Then we subscribe to the event received from the client with the help of socket.on().
- This function accepts the String <event-name> and the callback function.
- We add a new user to the users’ list and assign ID the corresponding ID socket for connection.
- We pass the ID on to the client’s side.
Now we’ll create the layout of the default.vue file in the layouts folder, it’s set by default for all the components in the folder pages if the layout is not indicated (here you’ll find the detailed information).
The tag <nuxt /> is responsible for views on various routes (read more detailed info about the views in Nuxt.js here).
The object sockets is responsible for the processing of the events, which are called on the server side.
Let’s add subscription for 2 events “updateUsers” and “newMessage”.
Then we’ll add the method exit(), which will be called with an exit button click and in which we will send the event “leftChat” to the server. Then the user will be redirected to the registration form from the query on the route for message display in the snackbar.
Let’s process this event on the server:
Now we’ll create a file auth.js in the middleware folder and add an intermediate processing function to the component so that only an authorized user could get on the chat page.
auth.js (open and close on a click on the file name):
Also, with the initialization of the component we send the event “joinRoom” to the server and send the user data as a payload into the feedback function.
Let’s process this event on the server:
- We add the user to the room, which he indicated during the authorization;
- then we call the event “updateUsers” for all the users of the room;
- and call the event “newMessage” only for the user, who has called the event “joinRoom”;
- We call the event “newMessage” for all the users, except for the current user ( notify the other users about the new user, who joined).
Further on we’ll add the chat layout.
I have omitted the section with styles, for you to concentrate on the logic.
The component, which is responsible for message rendering is Message.vue
The styles are adjusted in the same way as the previous component.
The component for message realization and sending is ChatForm.vue
When a form is verified — we send an event “createMessage” to the server, send the message text and the user ID, after the feedback function, we clear the field.
Now we’ll process this event on the server:
We’ll add the subscription in case the connection fails and it will be possible to add the reconnect possibility later on.
By now it’s the final part of the app.
You can launch the local server with the help of the command:
$npm run dev
As you can see the Socket.IO library is very simple and easy to use.
After the development had been finished I had a desire to deploy the app and share the demo version of it with you. I spent some time on the search of the suitable free service, which supports WebSockets. Finally, I chose Heroku. Nuxt.js manuals have a detailed guide about how to deploy an app onto this service.
Originally published in Stfalcon.com