Real-time (one to one) Chat App with Vuejs and Laravel – Part 2

VueJs

I think it safe to assume that if you’re reading this post you at least have a basic understanding of Vuejs and its capability.

In this post, we would focus 100% on the Vuejs side of things and properly answer any question from part 1 of this series, if you haven’t seen that I suggest you start from there. Here is a link.

Vuejs Architecture 

Now let’s start a new Laravel project

I know I said this post is about Vuejs and that’s true, but Vuejs also comes out of the box with Laravel and what we are building is a Laravel Fullstack application. So relax I got you.

Please keep in mind that you can choose to have a standalone VueJs and Laravel setup, everything would still work the same way reguralers.

Laravel installation

Dependencies

Index.js

The index.js file is the default entry point for our Vue application, and where we get to register modules that would be present globally in the application Eg socket.io, vuex store and sub vue components.

• The mounted lifecycle method is used to dispatch the checkAuthUser action from the store object.
• The checkAuthUser receives the user_auth item as a paramiter from our localStorage. This equivalate to null if the user_auth is not set or present.

ChatComponent.js

This component is responsible for rendering the create user form UI or the message and input components by connecting to the userStore and checking the userAuth status.

• the chat_name is a data property of the ChatComponent, this allows funtions and method have access to the user input.
• the computed method is used to automatically watch any changes in our mapState.
• mapState simply maps store members, as component members for easy access.

InputComponent.js

This component is responsible for displaying the list of users online and allows you select a user to send a direct message.

• the friendList array is a data property on the InputComponent.
• filteredUserList filter through the online users and remove the auth user (our user) from the friend list. This prevents us from sending our self a direct message.
• getUserMessages method dispatch the getUserConversations action from the store with a auth_user_id and user_id payload. this method is called when the user wants to send a direct message.

MessageComonent.js

This component deals with displaying the user direct messages.

• the messageText is a data property of the MessageComponent, allow us capture the user new messages.
• The sockets method listen to events on the socket connection within the MessageComponent.
• new_chat_sent event updates the store conversations with a direct message.
• the store conversation is only updated if the auth_user_id and user_id are the same, this means the direct message is for the user.
• sendChat method dispatch the sendPrivateMessage action with the new message payload data

Stores

Vuex uses a single state tree – that is, this single object contains all your application-level state and serves as the “single source of truth”. This also means usually you will have only one store for each application. A single state tree makes it straightforward to locate a specific piece of state and allows us to easily take snapshots of the current app state for debugging purposes. read more

helpers

Here we have a list of helpers functions that can be used in multiple files in our Vuejs application, this allows us to avoid repeating our selves.

UserStore

MessageStore

Server.js

The server.js file start a node application with connection to socket.io and a Redis client, this allows our Vuejs app to listen to the event.

Welcome.blade.php

Big thanks to Sunil Rajput for the amazing HTML template, here we can see how the welcome blade file looks like.

We are all set here, time to see what’s on the other side, let get ready for Laravel. View Part 3