# Guide
The goal of InfyChat is to give an easy way for everyone can chat using web browser at an affordable price.
# Technologies Used
This system uses multiple technologies to give the best possible experience.
- PHP with Laravel Framework
- MySQL
- JQuery
- AJAX
# Installation Guide
We tried our best to make the installation of the system as easy as possible. System Requirements It is assumed that you have primary knowledge Laravel installation knowledge since this application is built on Laravel.
# System Requirement
It is assumed that you have primary knowledge Laravel and JS application installation knowledge since this application is built on Laravel with JS.
You can read about server Requirements here
You need to enable curl extension.
You need to add cacert.pem certificate path in your php.ini file. Click here to see how to set it.
You need update below variables in php.ini file if you want to send bigger files (Optional).
upload_max_filesize = 50M
max_file_uploads = 50
post_max_size = 100M
# Setup InfyChat System
If you have purchased the InfyChat system then you will be able to find 2 different zip files into it.
- dist.zip - For Non-Technical Users
- src.zip - For Technical Users
# Setup InfyChat into Local Environment
You can setup InfyChat into your local by using both zip files, but we recommend to use dist file so you have to perform minimal steps.
Here are some steps to setup InfyChat into your local environment :
1. Install xampp/wamp (if you don't have it).
2. Create folder InfyChat
- if you are using wamp then create InfyChat folder under you_path_to_wamp/www/
- if you are using xamp then create InfyChat folder under you_path_to_xamp/htdocs/
3. Unzip dist/src zip to InfyChat folder
4. Point the domain to the uploaded folder
You need to create virtual host first to setup InfyChat. You can find steps here to create virtual host.
- You can find steps here
to create virtual host on
XAMPP
. - You can find steps here
to create virtual host on
WAMP
.
Point your domain or subdomain to the public directory inside the InfyChat folder.
Please note that, InfyChat must be installed on a primary domain or subdomain. Installing on a sub-folder will not work, for example:
example.com/InfyChat (Invalid)
localhost/InfyChat (Invalid) if you are putting it in sub folder or root website)
example.com (Valid)
local.InfyChat.com (Valid)
InfyChat.test (Valid)
5. Open the link
Open the link to the domain in the browser (Example: https://local.InfyChat.com).
# Non-Technical Users
If you are non-technical person and want to set up InfyChat on your server then you can directly copy the dist.zip folder to your web root directory on server and the following steps:
# 1. Copy files to web server
Upload dist.zip to your web server's root (public_html) and extract it there.
# 2. Setup Default DB
- Open PHPMyAdmin on your server and do a login.
- Click on the Databases tab.
- Create a new database and specify a Database name of your choice and Click Create button.
- Now on the left, select the database (chat) OR the one that you have created.
- Click Import in the top menu
- Under Import, choose the default sql file from dist/database/chat.sql and click button Go.
# 3. Setup environment .env file
- Open .env file from your server's root folder.
- Update your .env file
You can find here which env you need to replace
You can also use your choice of storage driver to store your media assets if you want. All of your attachments will be placed into that. And you should be ready to go.
# 4. Update Pusher Configuration
Go to pusher website and do sign up and if you have an account you can login.
- After Login you will get below screen.
- Click on “Create new app” button. After clicking this button you get below screen.
- Now give your app name, select your cluster, select “JS” from front-end tech, “laravel” from back-end tech and click on “create my app” button. As shown in below image.
- After creating app yow will redirect to below screen. After that click on “App settings” menu as pointed in below screen.
- After clicking on “App Settings” you will redirect to below screen. From there select “Enable client events” checkbox and click on “Update” button.
- Now click on “App Keys” menu and you will get below screen.
Now add this values in you env file.
- PUSHER_APP_ID - Your pusher app id - PUSHER_APP_KEY - Your pusher app key - PUSHER_APP_SECRET - Your pusher app secret - PUSHER_APP_CLUSTER - Your pusher app cluster
# 5. Admin login
You can login as admin using below credentials.
email: admin@gmail.com
password: admin
# 6. Landing page
You can access InfyChat app url by YOUR_APP_URL. Now you can see below landing page.
Click on the Register button and do register using you email.
Now check your email you will get below activation mail.
Now click on this “Activate your account” button and you will be redirected to the login page as shown in below image and login using your email & password.
# Technical Users
If you are a developer and have a sound knowledge of installing the Laravel on the server then you can get started with the src.zip folder by following the below steps.
# 1. Setup environment .env file
You need to change the following information into your environment (.env) file.
- APP_NAME - Name of your Application/Library System
- APP_URL - Change this URL with your server URL (including trailing path if you are putting it in sub folder or root website)
- DB_HOST - Put your database hostname here
- DB_PORT - Put your database port here if it does not default to 3306
- DB_DATABASE - Change it to your database name
- DB_USERNAME - Name of your database user
- DB_PASSWORD - Password of your database user
You will also need to set up mail configuration, you can read more about here for that setup based on mail service that you use.
- MAIL_DRIVER
- MAIL_HOST
- MAIL_PORT
- MAIL_USERNAME
- MAIL_PASSWORD
- MAIL_ENCRYPTION
- MAIL_FROM_ADDRESS
- MAIL_FROM_NAME
You have to add One Signal configuration, you can find steps here to configure one signal notification :
- ONE_SIGNAL_APP_ID=
- ONE_SIGNAL_API_KEY=
Add Google & Facebook Auth Configuration :
You can find steps here to setup google auth.
You can find steps here to setup facebook auth.
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GOOGLE_REDIRECT="YOUR_APP_URL/login/google/callback"
FACEBOOK_APP_ID=
FACEBOOK_APP_SECRET=
FACEBOOK_REDIRECT="YOUR_APP_URL/login/facebook/callback"
Note: replace YOUR_APP_URL by your domain.
You will also need to set up pusher configurations.
- PUSHER_APP_ID - Your pusher app id
- PUSHER_APP_KEY - Your pusher app key
- PUSHER_APP_SECRET - Your pusher app secret
- PUSHER_APP_CLUSTER - Your pusher app cluster
You can also use your choice of storage driver to store your media assets if you want. All of your attachments will be placed into that. And you should be ready to go.
# 2. Composer install (For Laravel)
You need to install all laravel dependencies with the following command.
composer install
Once the composer installation is completed, run a command to set up a key.
php artisan key:generate
# 3. Install npm Dependencies
Install node modules,
npm install
# 4. Run migrations
Run migrations and seeders for creating a database and fill default data
php artisan migrate --seed
# 5. Install Passport
Install passport for authentication
php artisan passport:install
# 6. Import default DB (Optional)
If you are not able to run migrations for some reason. for e.g. if using shared or FTP Hosting then you can import a pre-populated database file from dist folder to your database.
# 7. Build the Project
Build a project with a laravel mix. If you are running in dev mode then run,
npm run dev
Or if you are planning to use in production then run,
npm run prod
That's it and you are ready to go.
# Key Features and Concepts
Here are the Key Features and Concepts that InfyChat provides.
# Conversations
When you start chatting with any user you can see that conversation as opened and also on the conversations list as well. You can also chat with some other user by opening a new conversation popup and select the specific user to start to chat with him/her.
Also, Users can get a list of active chats with real-time unlimited chatting.
# Read receipt
Users can get real-time delivery and read receipt updates of chat messages on both sides.
# Files Upload
You are allowed to Multiple upload two-way file sharing like images, videos and some supporting documents e.g docs, Xls, pdf files, etc. And Light-box for getting a full-screen preview for images.
# Youtube Video Integration
In this feature, when a user sends any youtube video links to any user, the system will automatic detects it as a youtube video and it displays its thumbnail on chat.
# Current Status Indication
Online/Offline and Last seen status indication on the top of the chat and profile drawer as well.
When a user is typing something to another user then Typing
status is indicating to
opposition user.
# Emoji 😄 💥 💖
You'll find all current smileys and people emojis in our chat app. Have fun with diving into the colorful world of emojis! ☺️
# Delete Conversation
By using this feature you can delete conversation with specific people.
# Draft Message
This feature is pretty cool, when you are sending message to someone and you have type lots of lines and your tab is closed, so don't worry you don't need to write all of that lines again, just go to that users conversation, and all your lines are there.
# Incoming message Notification
Users can get message notification for new messages with labels and counts on the conversations list.
# Member Profile
You can see detailed information of the user including user photo, current status, phone number, and his/her bio as well.
# User Profile
By using this feature, Logged in user can Customize his/her avatars. In the sense of updating his/her photo, mobile number and bio as well.
# Users and Roles Management
Admin can manage all users from the admin panel. By creating users, admin can provide username and password to new users and also user can register on his own. There are system default roles like Admin and Member. But admin can redefine as per his own choice and can create a new one as well.
# Optimizations for Animation
Many optimizations used for better UX such as smart caching or GPU powered animations.
# Use Initials
When people don't upload their profile photo we are rending user initials from people's name.
# Security
we are providing security from XSS by encoding user inputs so there is no possibility for xss. We also provide security from SQL Injection, so if any user will give any vulnerable input it will not affect our system.