How to use Soketi with Laravel
Tags: laravel, soketi
Published: 2022-08-24 13:49:35

---
title: How to use Soketi with Laravel
published: true
description: How to use Soketi (WebSockets server) with Laravel  
tags: laravel, soketi
---
[PART 1](https://dev.to/rabeeaali/how-to-use-soketi-with-laravel-pt1-47hd)
[PART 2](https://dev.to/rabeeaali/deploy-soketi-on-aws-ec2-28e6)
[PART 3](https://dev.to/rabeeaali/deploy-soketi-on-aws-ec2-28e6)

On today's post we will see how to use Soketi as a WebSockets server with Laravel. this post will be using all things locally and in the Pt.2 we will deploy Soketi on EC2.

### Prerequisites:

• A Laravel 9 project.
• Node js
• Python 3.x
• GIT
• The `gcc` compiler and the dependencies for build

> Make sure to have all above tools installed on your machine before move on.

NOTE: there are several ways to install Soketi check the official [docs](https://docs.soketi.app/getting-started/installation)
 
NOTE2: if you are using Mac OS like in my case use `brew` to install all three above packages:

```
brew install gcc
...
```

### Step 1: Install & Running Soketi

Now install `Soketi` globally on your machine by running:

```
npm install -g @soketi/soketi
```

After the installation is finished run:

```
soketi start
```

You should getting something like this:

![soketi running](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/psi2u38zgeumglwfjz1p.png)

### Step 2: Install Laravel Related Packages(client, server)
To use pusher driver with Laravel you should install the Pusher Channels PHP SDK using the Composer package manager:
```
composer require pusher/pusher-php-server
```
To receive the event to client side you should install these two packages throw NPM:

```
npm install --save-dev laravel-echo pusher-js
```

Last thing install `laravel/breeze`:
```
composer require laravel/breeze

php artisan breeze:install
```

### Step 3: Configure Soketi with Laravel

First open `config/broadcasting.php` file and change the `pusher` driver to the following:

```
'connections' => [
    
    // ...

    'pusher' => [
        'driver' => 'pusher',
        'key' => env('PUSHER_APP_KEY', 'app-key'),
        'secret' => env('PUSHER_APP_SECRET', 'app-secret'),
        'app_id' => env('PUSHER_APP_ID', 'app-id'),
        'options' => [
            'host' => env('PUSHER_HOST', '127.0.0.1'),
            'port' => env('PUSHER_PORT', 6001),
            'scheme' => env('PUSHER_SCHEME', 'http'),
            'encrypted' => true,
            'useTLS' => env('PUSHER_SCHEME') === 'https',
        ],
    ],
],
```

We need to update our `.env` file with the new configuration details:

```
PUSHER_APP_KEY=app-key
PUSHER_APP_ID=app-id
PUSHER_APP_SECRET=app-secret
PUSHER_HOST=127.0.0.1
PUSHER_PORT=6001

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
```
Also in the `.env` change `BROADCAST_DRIVER` to `pusher`

Now go to `resources/js/bootstrap.js` file and uncomment the last lines:

```
import Echo from "laravel-echo";

import Pusher from "pusher-js";
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: "pusher",
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    wsHost:
        import.meta.env.VITE_PUSHER_HOST ??
        `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? "https") === "https",
    enabledTransports: ["ws", "wss"],
});
```

### Step 4: Use Soketi with Laravel

Create a new event `php artisan make:event OrderStatusUpdated`

Open it and change make it like this:
```
class OrderStatusUpdated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public function __construct()
    {
    }

    public function broadcastOn()
    {
        return new Channel('orders');
    }
}

```

Then in `resources/js/bootstrap.js` at the end add this code:

```
window.Echo.channel("orders").listen("OrderStatusUpdated", (e) => {
    console.log(e);
});
```
It's simple event listener to listen `OrderStatusUpdated` once it's fire.

Now go to `web.php` and create a new route for running the event
```
Route::get('/fire', function () {
    OrderStatusUpdated::dispatch();

    return 'Event has been sent!';
});
```

### Step 5: Testing
Open two tabs in your browser:

First `soketi.test/dashboard` and open the console to just see the event.

Second Run the event by visiting `soketi.test/fire`

Once you hit the second URL you should see the event in the first tab in REAL-TIME WAY :)

========== The End =============

#### Another useful resources:

1- Laracast [course](https://laracasts.com/series/get-real-with-laravel-echo/episodes/1) that explains in details about the Broadcasting events in Laravel.

2- Always check the official [docs](https://docs.soketi.app/getting-started/installation) of Soketi for more details.

See you in PT.2 :)