Prerequisites

Before you begin, ensure you have the following:

• A Heroku account (sign up at Heroku Sign Up).
• Heroku CLI installed (download it from Heroku CLI).
• Your Laravel application code hosted on a version control system (e.g., Git).

Deployment Steps

Follow these steps to deploy your Laravel application on Heroku:

1. Create a Heroku App: In your terminal, navigate to your Laravel project directory and run the following command to create a new Heroku app:

heroku create your-app-name

2. Configure Environment Variables: If your Laravel app uses environment variables (e.g., for database credentials), set them on Heroku:

heroku config:set APP_KEY=$(php artisan --no-ansi key:generate --show)

Replace your-app-name with your desired app name.

3. Set the Application Environment: Set the environment to production on Heroku:

heroku config:set APP_ENV=production

4. Add a Procfile: Create a file named Procfile (without any file extension) in your Laravel project root with the following content:

web: vendor/bin/heroku-php-apache2 public/

5. Commit Your Changes: Make sure your changes are committed to your version control system (e.g., Git).
6. Deploy Your Application: Deploy your Laravel application to Heroku:

git push heroku master

7. Run Migrations: Run database migrations on Heroku:

heroku run php artisan migrate

8. Open Your App: Once the deployment is complete, open your app in the browser:

heroku open

Conclusion

Congratulations! Your Laravel application is now live on Heroku. Heroku's simplicity and scalability make it an excellent choice for hosting and managing your Laravel projects in a cloud environment.

Prerequisites

Before you begin, ensure you have the following:

• A Laravel project set up and running.
• A Pusher account (sign up at Pusher).

Setting Up Pusher in Laravel

Follow these steps to integrate Pusher with your Laravel application:

1. Install the Pusher PHP Library: Run the following command in your terminal:

composer require pusher/pusher-php-server

2. Configure Pusher Credentials: Add your Pusher credentials to the .env file:

PUSHER_APP_ID=your-app-id
  PUSHER_APP_KEY=your-app-key
  PUSHER_APP_SECRET=your-app-secret
  PUSHER_APP_CLUSTER=your-app-cluster

3. Install Laravel Echo and Pusher JavaScript SDK: Run the following commands:

npm install --save laravel-echo pusher-js

4. Configure Broadcasting: Set the broadcasting driver to Pusher in the config/broadcasting.php file:

'default' => env('BROADCAST_DRIVER', 'pusher'),

5. Create an Event: Generate an event using the artisan command:

php artisan make:event YourEvent

6. Update Event Logic: Open the generated event file in app/Events/YourEvent.php and define the logic to broadcast:

public function broadcastOn()
  {
      return new Channel('your-channel');
  }

7. Broadcast the Event: Trigger the event where needed in your application:

event(new YourEvent($data));

Listening to Events with Laravel Echo

Use Laravel Echo to listen to events on the client side:

1. Install Laravel Echo and Pusher JavaScript SDK: If not done already, run the following commands:

npm install --save laravel-echo pusher-js

2. Configure Laravel Echo: In your JavaScript file (e.g., resources/js/bootstrap.js), configure Laravel Echo:

import Echo from 'laravel-echo';
  
  window.Pusher = require('pusher-js');
  
  window.Echo = new Echo({
      broadcaster: 'pusher',
      key: process.env.MIX_PUSHER_APP_KEY,
      cluster: process.env.MIX_PUSHER_APP_CLUSTER,
      forceTLS: true,
  });

3. Listen for Events: In your Vue component or JavaScript file, listen for the events:

mounted() {
      Echo.channel('your-channel')
          .listen('YourEvent', (data) => {
              console.log('Event received:', data);
              // Handle the event data as needed
          });
  }

Conclusion

Congratulations! You've successfully set up Pusher WebSocket with your Laravel application. Real-time communication opens up possibilities for interactive and dynamic user experiences in your web applications.