Skip to content
No description, website, or topics provided.
PHP Vue HTML
Branch: master
Clone or download
Pull request Compare This branch is 2 commits ahead of shyampurk:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
bootstrap
config
database
public
resources
routes
storage
tests
.editorconfig
.env
.env.example
.gitattributes
.gitignore
.styleci.yml
LICENSE
README.md
artisan
chatapp.sql
composer.json
composer.lock
package-lock.json
package.json
phpunit.xml
server.php
webpack.mix.js
yarn.lock

README.md

LaravelBasicChatApp

A realtime chat app built using Laravel framework and Vue.JS frontend, powered by PubNub.

pubnub blog

Full Tutorial for Setup

https://www.pubnub.com/blog/building-a-laravel-chat-app-with-php-vue-js-and-pubnub/?devrel_gh=shyam-LaravelBasicChatApp

Prerequisites

Before proceeding to build this application, make sure that you have the following software packages installed

  1. XAMPP - A popular Apache distribution which also contains MySql and PHP.

  2. Composer - PHP Package Manager

     Note: Mac users can install composer using homebrew.
     
     brew install composer 
    
  3. Node.js & NPM - Node.JS and Node Package Manager

  4. Laravel

    To install Laravel CLI, perform the following commands from your terminal

    Step 1: Install Laravel CLI

         composer global require "laravel/installer
    

    Step 2: Configure the path to access Laravel globally

    For Windows

             setx /M path “%path%;%appdata%Composer\vendor\bin”
    
             set PATH=%PATH%;%USERPROFILE%AppDataRoamingComposer\vendor\bin
    
             Note: USERPROFILE is the Windows user name
    

    For Unix/Linux

             export PATH="~/.config/composer/vendor/bin:$PATH"
    

Configuration

Step 1: PubNub Signup

Signup for PubNub service and get your PubNub keys (Publish key, subscribe key and secret key)

Note: One the new keys are generated, you also have to enable "Storage & Playback" and "Access manager" features for them.

Step 2: Start Apache & MySQL servers

Open the XAMPP control panel and start the Apache server and MySQL server.

Step 3: Clone the repo

Clone this repository under the web root folder of XAMPP Apache web server. The default webroot folder in XAMPP is "htdocs".

Step 4: Update configuration

In the cloned repository, update the following files with the configuration parameters as follows.

  1. Open the file PubnubConfig.php and update the following

    • Line 19: Replace the placeholder <PUBNUB_PUBLISH_KEY> with your PubNub publish key
    • Line 20: Replace the placeholder <PUBNUB_SUBSCRIBE_KEY> with your PubNub subscribe key
    • Line 21: Replace the placeholder <PUBNUB_SECRET_KEY> with your PubNub secret key
  2. Open the domainconfig.js file and update the following

    • Line 1: Replace the placeholder <HOST_OR_IP> with your web servers root address. If you are running the XAMPP locally then "localhost" is the root address.
  3. Open the pubnubconfig.js file and update the following

    • Line 3: Replace the placeholder <PUBNUB_PUBLISH_KEY> with your PubNub publish key
    • Line 4: Replace the placeholder <PUBNUB_SUBSCRIBE_KEY> with your PubNub subscribe key
    • Line 5: Replace the placeholder <PUBNUB_SECRET_KEY> with your PubNub secret key
  4. OPTIONAL- In case you are changing the default configuration for Apache and MySQL or testing on a different server instead on the local computer then open the .ENV file and update the following

    • Line 10: Set the DB_HOST value to the IP address of the database host server
    • Line 11: Set the DB_PORT value to the port number of the database
    • Line 13: Set the DB_USERNAME value to the database username. Default user name is "root"
    • Line 14: Set the DB_PASSWORD value to the database password. Default password is none so the value is left blank.

Step 5: Database setup

Open PhPMyAdmin web console and import the sql file to create a new database (named chatapp) for the application.

Installation

From the repository root path, run the following commands to install dependencies for Laravel and Vue

    composer install

    npm install

Run

  1. Generate autoload.php to aggregate all vendor dependencies

     composer dump-autoload
    
  2. Compile the run Vue application

     npm run watch
    
  3. Launch the chat app via your web browser by pointing to the URL

     http://<HOST_OR_IP>/LaravelBasicChatApp/public
    
         where <HOST_OR_IP> is your web server's root address
         
         Note: Make sure to check the XAMPP control panel and ensure that the Apache and MySQL servers are running. 
    
You can’t perform that action at this time.