Menu

Create a Realtime Chatroom with Laravel, VueJS and Pusher

November 10th, 2017

  • Start by creating a new function function chatPage()    {        $users = view(‘chat’,[‘users’= final version of ChatController.php will look like App\Http\Controllers;  use Illuminate\Http\Request; use App\User; use Auth; use App\Events\ChatMessage;  class ChatController extends Controller {    /**     * Create a new controller instance.
  • *     * @return void     */    public function Send chat message     * @param $request     * @return void     */    public function sendMessage(Request $request)    {        $message = [            “id” = = = = “true”;    }    public function chatPage()    {        $users = view(‘chat’,[‘users’= controller is ready for use.
  • This code is a mixture of VueJS and class=”row”    div class=”col-md-2″        ul as $chatuser)            li v-on:click=”getUserId” class=”list-group-item” id=”{{ $chatuser-id }}” value=”{{ $chatuser-name }}”{{ $chatuser-name class=”col-md-10″ div class=”row”    div class=”col-md-4″ v-for=”(chatWindow,index) in chatWindows” v-bind:sendid=”index.senderid” class=”panel panel-primary”            div class=”panel-heading” class=”glyphicon glyphicon-comment”/span class=”panel-collapse” class=”chat” class=”left clearfix” v-for=”chat in chats[chatWindow.senderid]” v-bind:message=”chat.message” class=”chat-img alt=”User Avatar” class=”chat-body class=”primary-font” :id=”chatWindow.senderid” type=”text” class=”form-control input-md”…
  • class=”col-md-4″ v-for=”(chatWindow,index) in chatWindows” v-bind:sendid=”index.senderid” class=”panel panel-primary”            div class=”panel-heading” class=”glyphicon glyphicon-comment”/span class=”panel-collapse” class=”chat” class=”left clearfix” v-for=”chat in chats[chatWindow.senderid]” v-bind:message=”chat.message” class=”chat-img alt=”User Avatar” class=”chat-body class=”primary-font” :id=”chatWindow.senderid” v-on:keyup.enter=”sendMessage” type=”text” class=”form-control input-md” placeholder=”Type your message here…” /                        span class=”input-group-btn”button :id=”chatWindow.senderid” class=”btn btn-warning btn-md” have also binded chatMessage function.
  • Next, I defined the variables which I will use in this app = new Vue({    el: ‘#app’,    data: {        chatMessage : [],        userId : null,        chats : [],        chatWindows : [],        chatStatus : 0,        chatWindowStatus : [],        chatCount : I added Laravel Echo to listen for broadcast events in created() method (which will work when the Vue app is…

Read this detailed tutorial on how you could easily create a realtime chatroom application using Laravel 5.4, VueJS and Pusher.

In today’s article, I am going to create a chatroom using Laravel 5.4, Pusher and VueJs. Since these tools are popular and almost every developer has heard of them, I will skip the theoretical introductions and discussions and go straight to the fun part.

Here is a list of components that I will use for this application:

Laravel Auth

Laravel Mix

Laravel Broadcast

Pusher for Laravel and VueJS

Bootstrap

I recommend that you launch a Cloudways hosted Laravel application for testing the code. If you do not have an account, to sign up for a trial account.

(Note: You may use promo code: PHP15 to get FREE Cloudways hosting credit of $15 on signup.)

Check out the following GIF for server and application launch.

The complete for this application code can be found in the github repo and the live demo can be found here.

Setup User Authentication

The first step is the migration of the existing user table through the following command:

Next, create a basic auth by running the following command:

Create a factory for creating a few users. For this, head to database/factories and open