Skip to content

A text-based messaging app built in Laravel 7 and Vue with Pusher Channels as broadcasting driver.

License

Notifications You must be signed in to change notification settings

iqbaltaufiq/laravel-chat-app

Repository files navigation

Laravel Chat App

A realtime chatting application built in Laravel and Vue.

gif

Tech / Framework used

Built with:

My machine specification

  • PHP 7.3.2
  • npm v6.9.0
  • Composer v2.0.8

Getting started

# clone this repository
git clone https://github.com/iqbaltaufiq/laravel-chat-app.git

# change into project directory
cd laravel-chat-app

# install dependencies
composer install

# copy .env.example file and rename it to .env
cp .env.example .env

# modify the database configuration in .env file as you prefer

# generate application key
php artisan key:generate

# create a symbolic link to storage directory
php artisan storage:link

# change the BROADCAST_DRIVER value in .env file from log to pusher
BROADCAST_DRIVER=pusher

# set the PUSHER_* value in .env file (see instruction below about how to get the pusher key)
PUSHER_APP_ID=insert_app_id
PUSHER_APP_KEY=insert_app_key
PUSHER_APP_SECRET=insert_app_secret
PUSHER_APP_CLUSTER=insert_cluster

# run migration
php artisan migrate

# install node_modules
npm install

# compile assets
npm run dev || npm run watch

# run in development mode
php artisan serve  #localhost:8000

Pusher Configuration

In order to be able to send message in realtime, we need to use a two-way interactive communication tools (like pusher or socket.io). In this case, we are going to use pusher.

  1. Visit pusher.com
  2. Create an account or login with your Google/Github account.
  3. Select Channels

  1. Set the configuration like the given picture below.

    • Name doesn't have to be same as your project repository's
    • Select a cluster that is closest to your location
    • Choose vue.js as frontend and laravel as backend

  2. Click Create app

  3. Click App Keys on the sidebar.

  4. Copy and paste all the values to the PUSHER_* variables in the .env file, like the example below.

PUSHER_APP_ID=1410681
PUSHER_APP_KEY=7wg8c7b4ae4cf9ec25ta
PUSHER_APP_SECRET=5521876f8f9c1a82d496
PUSHER_APP_CLUSTER=ap1

Learn more about Pusher Channels and Laravel Broadcast here.

Features

  • Send and receive messages in realtime
  • Add and remove friends
  • Receive a friend request notification when someone added you as a friend
  • Clear one particular chat (without deleting the chatroom)
  • Delete chatroom (the chatroom and all the chats that belongs to that chatroom)
  • Delete all chatrooms
  • Change your name and profile photo

Unavailable Features

Unfortunately, this app supported text-based message only. You can neither send any attachment (e.g. file, image, video, etc.) nor make a voice/video call.

License

MIT License

Copyright © 2021 Iqbal Taufiqurrahman