Dev Grill
  • Home
  • Remote Jobs
  • Coding Interview
  • Privacy Policy
Dev Grill
  • Home
  • Remote Jobs
  • Coding Interview
  • Privacy Policy
  • Laravel
  • PHP
  • Redis
  • Socket.io
  • Vuejs

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

  • September 2, 2019
  • 4 comments
  • 3 minute read
  • 4.3K views
  • Osuagwu Emeka
Laravel Vuejs Realtime Chat
Total
0
Shares
0
0
0
0
0
0

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.

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

Total
0
Shares
Share 0
Tweet 0
Share 0
Share 0
Share 0
Share 0
Related Topics
  • Laravel
  • nodejs
  • redis
  • socket
Previous Article
Laravel Vuejs Realtime Chat
  • Javascript
  • Laravel
  • PHP
  • Redis
  • Vuejs

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

  • September 2, 2019
  • Osuagwu Emeka
View Post
Next Article
Laravel Vuejs Realtime Chat
  • Laravel
  • Redis
  • Socket.io
  • Vuejs

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

  • September 2, 2019
  • Osuagwu Emeka
View Post
You May Also Like
View Post
  • Javascript
  • Vuejs

Vuejs show and hiding password input for users

  • October 17, 2019
  • Osuagwu Emeka
View Post
  • Javascript
  • Vuejs

Filtering Data The Vue Way

  • October 5, 2019
  • Osuagwu Emeka
Laravel Vuejs Realtime Chat
View Post
  • Laravel
  • Redis
  • Socket.io
  • Vuejs

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

  • September 2, 2019
  • Osuagwu Emeka
Laravel Vuejs Realtime Chat
View Post
  • Javascript
  • Laravel
  • PHP
  • Redis
  • Vuejs

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

  • September 2, 2019
  • Osuagwu Emeka
Helpful Laravel blade template directives
View Post
  • Laravel
  • PHP

Helpful Laravel blade template directives

  • August 24, 2019
  • Osuagwu Emeka
4 comments
  1. Avatar Laravel Development Services says:
    March 17, 2020 at 5:54 am

    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.

    Reply
  2. Avatar ichu says:
    August 5, 2020 at 9:38 am

    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?

    Reply
  3. Avatar Emeka Osuagwu says:
    August 5, 2020 at 7:30 pm

    Hi ichu, thanks for the comments

    NODE_APP_PORT represents the port the node service is running on

    Reply
  4. Avatar May says:
    December 3, 2020 at 2:17 pm

    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.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts
  • Remote Information Technology Jobs October 14, 2020
  • Remote Technical Recruiter Job October 14, 2020
  • Remote Web Design Jobs October 14, 2020
  • What Does Remote Job mean? October 14, 2020
  • How to Find Remote Jobs October 14, 2020
Looking for something
Dev Grill
  • Home
  • Remote Jobs
  • Coding Interview
  • Privacy Policy
Learn and solve practical coding challenges

Input your search keywords and press Enter.