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.
Now let’s start a new
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.
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
vuex store and sub
mountedlifecycle method is used to dispatch the
checkAuthUseraction from the store object.
user_authitem as a paramiter from our
localStorage. This equivalate to null if the
user_authis not set or present.
This component is responsible for rendering the create
UI or the message and input components by connecting to the
userStore and checking the
chat_nameis a data property of the
ChatComponent, this allows
methodhave access to the user input.
- the computed method is used to automatically watch any changes in our
mapStatesimply maps store members, as component members for easy access.
This component is responsible for displaying the list of users online and allows you select a user to send a direct message.
friendListarray is a data property on the
filteredUserListfilter 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.
getUserMessagesmethod dispatch the
getUserConversationsaction from the store with a
user_idpayload. this method is called when the user wants to send a direct message.
This component deals with displaying the user direct messages.
messageTextis a data property of the
MessageComponent, allow us capture the user new messages.
socketsmethod listen to events on the socket connection within the
new_chat_sentevent updates the store conversations with a direct message.
- the store
conversationis only updated if the
user_idare the same, this means the direct message is for the user.
sendChatmethod dispatch the
sendPrivateMessageaction with the new message payload data
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
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.
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.
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