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 thecheckAuthUser
action from the store object. - The
checkAuthUser
receives theuser_auth
item as a paramiter from ourlocalStorage
. This equivalate to null if theuser_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 theChatComponent
, this allowsfuntions
andmethod
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 theInputComponent
. 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 thegetUserConversations
action from the store with aauth_user_id
anduser_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 theMessageComponent
, allow us capture the user new messages. - The
sockets
method listen to events on the socket connection within theMessageComponent
. new_chat_sent
event updates the store conversations with a direct message.- the store
conversation
is only updated if theauth_user_id
anduser_id
are the same, this means the direct message is for the user. sendChat
method dispatch thesendPrivateMessage
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
4 comments
Nice post! The information you provided is very helpful if someone is planning to develop the Website. I think Digitalopment is a better way to get all the information about laravel development services.
I’ve been looking for this kind of article, glad i found it 🙂
I’m wondering what would be inside the NODE_APP_PORT, where did you get it, and does it do something from the backend?
I hope I’ll get a reply from you?
Hi ichu, thanks for the comments
NODE_APP_PORT represents the port the node service is running on
Great Article, I get almost everything.
One thing that I didn’t get is where is the action “sendPrivateMessage”. I couldn’t find it in any store.