About Web Chat Application

This application is use for creating chatting web application in realtime. Instead using JQuery for set interval to get data on database chat, this application using web socket technology.

You can test by log in on two or more account which open in different browser (eg: Google Chrome and Mozilla Firefox).

This application is develop using Laravel 5.5 Dev. So, you have to install PHP 7.x

Prerequisites

This application was build using :

• Pusher API Key
• Node JS
• NPM
• Composer (absolutely require since you create Laravel Project)
• Git (if you want to clone / fork this project)

Installation Guide

Step 1 - Configure Web Application

• Clone this repository to your htdoc directory. Run git clone https://github.com/fendiseptiawan0709/laravel-chat.git.
• Once you've clone this repository, you will get laravel-chat folder on your htdoc directory.
• Change your directory to application folder or laravel-chat
• If you are using Linux OS, you have to change ownership and permission of bootstrap/, public/, and storage/ directory. You only need to run this following command
  
  • sudo chown www-data -R bootstrap/ public/ storage/
  • sudo chmod 775 -R bootstrap/ public/ storage/
• To get updated vendor package, you need to run composer update. This will take several minutes depending on your internet connection.
  Make sure you've installed composer package
• Create .env file from .env.example to root directory of your application.
  If you are using Linux OS, you can run cp .env.example .env
• Check artisan command by running php artisan.
  If you get list of artisan command, then you ready to go
• Run php artisan key:generate to generate your application key.
• Open .env file, and edit database configuration correspond to your machine.
  
  • DB_DATABASE=<your database name, create first if you don't have>
  • DB_USERNAME=<your mysql username, by default root>
  • DB_PASSWORD=<your mysql password, by default is empty>
• Create table into your new database by running php artisan migrate.
  Make sure you've been create new database on your machine and set database name to DB_DATABASE on .env file

  This application have been create authentication scaffolding, so you don't have to run php artisan make:auth.

• To get updated Node JS package, run npm update
  This process take several minutes depending on your internet connection.
  Make sure you've installed NPM and Node JS
• And finally, visit http://localhost/laravel-chat/public on your web browser
• Optional, you can run web application on your php server. Run php artisan serve. Visit localhost:8000 on your web browser

Step 2 - Configure Web Socket

You have been configure basic application. Now, you need to configure web socket for enable realtime feature on your application.
You can select one of two method below. If you beginner, I'd recommend you to use Pusher

1. Pusher

This method require internet connection. So you need to connect on internet while running this application.
Folow this step :

• Login into pusher. If you don't have Pusher Account, you can register here. It's FREE.
• Create new application
  • Give a name of your application
  • Select a cluster (Closest cluster to your location is better)
• After you create application, click App Keys tab.
• Now copy your credential information to :
  • .env file.
    • BROADCAST_DRIVER=pusher
    • PUSHER_APP_ID=<pusher app id>
    • PUSHER_APP_KEY=<pusher app key>
    • PUSHER_APP_SECRET=<pusher app secret>
    • PUSHER_APP_CLUSTER=<pusher app cluster>
    • PUSHER_APP_ENCRYPTION=true
  • resources/assets/js/bootstrap.js file.
    • pusherKey = <pusher app key>
    • pusherCluster = <pusher app cluster>
• Don't forget to comment / remark the Laravel Echo Server Configuration code
• Now, you need to create webpack of your new configuration. Run npm run dev
• Finally. Test your application. Visit http://localhost:8000 on your web browser.

2. Socket IO

This method doesn't need internet connection. But you need to run Laravel Echo Server, close or stop process will shut down realtime feature. Follow this step :

• Open .env file, edit some value on :
  • BROADCAST_DRIVER=redis
  • CACHE_DRIVER=redis
  • SESSION_DRIVER=redis
• Record your IP address, cause we will need this to set as Server IP.
• Open laravel-echo-server.json file
• Edit authHost value corespond to your IP Address / Server IP.
  e.g authHost : "http://192.168.7.238/laravel-chat/public"
  Don't forget to save the file.
• Now open the resources/assets/js/bootstrap.js file. Set the value of some variables.
  • socketPort = <laravel echo server port, get it from port variable on laravel-echo-server.json >
    e.g. : socketPort = '6001';
  • serverIP = <your Server IP Address>
    e.g. : serverIp = '192.168.7.238'
• Don't forget to comment / remark the Pusher Configuration code
• Now, you need to create webpack of your new configuration. Run npm run dev
• Start Laravel Echo Server service, run laravel-echo-server start
• Finally. Test your application, visit http://<Server IP Address>/laravel-chat/public.
  e.g. : http://192.168.7.238/laravel-chat/public

You can also change the IP address to localhost, so you can access using localhost (http://localhost/laravel-chat/public).
But I'm not recommend this way...
Why? Because if you set to localhost you can only access it from your PC. You can't access it from other PC from the same network. Your configuration will authenticate to localhost which is your PC, not the server.

Note

If you edit resources/assets/js/bootstrap.js, you have to run npm run dev after you save the file.
If you want to easier way, you can set NPM to automatically watch the change on bootstrap.js after you save the file by running npm run watch --dev

Contact

If you have any trouble while installing or using this application, feel free to get in touch with me on :

• Email : Fendi Septiawan