Msg is a lightweight messaging application built with Laravel. This application leverages websockets, Pusher.io, and Laravel Echo to provide real-time messaging features. Users can send messages, favorite other users, search for users, view user profile details within chats, and more. The application also supports sharing images, private messaging, and deleting own messages in private chats.
- Real-Time Messaging: Instant messaging with real-time updates using websockets and Pusher.io.
- User Presence: See which users are online and their activity status.
- Message Status: View read and delivered timestamps for messages.
- User Profiles: Access detailed user profiles directly from the chat interface.
- Favorites: Favorite users for quick access and better organization.
- Search: Search for users to initiate new conversations easily.
- Image Sharing: Share images within your conversations.
- Private Messaging: Secure and private messaging between users.
- Delete Own Messages: Users can delete their own messages in private chats.
- Bootstrap Templates: Utilizes Bootstrap for responsive and modern UI components.
- jQuery and Custom CSS: Enhances interactivity and custom styling.
- Laravel 10: The PHP framework used for building the application.
- Websockets: For real-time communication.
- Pusher.io: A service to handle websocket connections.
- Laravel Echo: A Laravel library to work with websockets.
- Bootstrap: For responsive, mobile-first front-end design.
- jQuery: For DOM manipulation and interactivity.
- Custom CSS: For additional styling specific to the application.
Follow these steps to get a local copy of the project up and running.
-
Clone the Repository:
git clone https://github.com/prateekbhujel/msg.git cd msg -
Install Dependencies: Make sure you have Composer installed, then run:
composer install
-
Environment Configuration: Copy the example environment file and configure the environment variables.
cp .env.example .env
Update the
.envfile with your database and Pusher.io credentials. -
Generate Application Key:
php artisan key:generate
-
Run Migrations:
php artisan migrate
-
Install Frontend Dependencies: Make sure you have Node.js installed, then run:
npm install npm run dev
-
Start the Development Server:
php artisan serve //please read the note below -
Run Websockets Server:
php artisan websockets:serve
- Messaging: Start chatting with other users by searching for their profiles or selecting from your favorites.
- Favorites: Click the star icon to favorite a user and access them quickly from your favorites list.
- User Profiles: Click on a user's name in the chat to view their profile details.
- Image Sharing: Use the image upload button in the chat interface to share images.
- Private Messaging: Send secure messages that are only visible to the recipient.
- Delete Own Messages: In private chats, users can delete their own messages by clicking the delete icon next to the message.
- Bootstrap Templates: The application uses Bootstrap for its UI components. You can customize the Bootstrap templates by modifying the HTML files in the
resources/viewsdirectory. - jQuery and Custom CSS: Additional interactivity and styling can be added or modified by editing the
public/jsandpublic/cssdirectories respectively.
We welcome contributions to improve Msg. Please follow these steps to contribute:
- Fork the repository.
- Create a new branch for your feature or bugfix.
git checkout -b feature-name
- Make your changes.
- Commit your changes.
git commit -m "Description of your changes" - Push to your branch.
git push origin feature-name
- Open a pull request describing your change.
For questions, issues, or suggestions, please open an issue on the GitHub repository.
-- Note this app is desgined to run without an php artisan serve. So if you happen to use with php artisan serve, you will have to use the url provided by the server. i.e. Remove 'Public'--from related image and assets and also on user table migration remove public/ from the avatar field.