Search by

georgeboot / laravel-echo-api-gateway

georgeboot

Use Laravel Echo with API Gateway Websockets

Package info

github.com/georgeboot/laravel-echo-api-gateway

pkg:composer/georgeboot/laravel-echo-api-gateway

Fund package maintenance!

georgeboot

Statistics

Installs: 50 223

Dependents: 0

Suggesters: 0

Stars: 106

Open Issues: 3

0.5.9 2026-10-11 08:10 UTC

README

CI codecov

This package enables you to use API Gateway‘s Websockets as a driver for Laravel Echo , so you don’t have to use services like Pusher or Socket.io.

It works by setting up a websocket API in API Gateway, and configure it to invoke a Lambda function, every time a message is sent to the websocket. This package includes and autoconfigures a handler to respond to these websocket messages. We also configure Laravel to use this connection as a broadcast driver.

This package currently only works with either Bref or Laravel Vapor, though the latter one involves some manual set-up.

Requirements

In order to use this package, your project needs to meet the following criteria:

  • PHP 8.x
  • Laravel 6 to 13
  • Uses either bref or Laravel Vapor to deploy to AWS
  • Has a working queue
  • Uses laravel-echo v1.10+ or v2 on the client
  • Uses Vite, Laravel Mix or any other tool to bundle your assets (or Node.js 18+ for non-browser clients)

Installation

Installation of this package is fairly simply.

First we have to install both the composer and npm package:

composer require georgeboot/laravel-echo-api-gateway

npm install --save-dev laravel-echo laravel-echo-api-gateway

laravel-echo is a peer dependency: the package works with the version your app already uses (v1.10+ or v2).

Platform-specific instructions

A. When using Bref

Next, when using Bref, we have to add some elements to our serverless.yml file. If using Vapor, these resources have to be created by hand using the AWS CLI or console.

Add a new function that will handle websocket events (messages etc):

functions:
    # Add this function
    websocket:
        handler: handlers/websocket.php
        runtime: php-83
        events:
            - websocket: $disconnect
            - websocket: $default

Add a resource to create and configure our DynamoDB table, where connections will be stored in:

resources:
    Resources:
        # Add this resource
        ConnectionsTable:
            Type: AWS::DynamoDB::Table
            Properties:
                TableName: connections
                AttributeDefinitions:
                    - AttributeName: connectionId
                      AttributeType: S
                    - AttributeName: channel
                      AttributeType: S
                KeySchema:
                    - AttributeName: connectionId
                      KeyType: HASH
                    - AttributeName: channel
                      KeyType: RANGE
                GlobalSecondaryIndexes:
                    - IndexName: lookup-by-channel
                      KeySchema:
                          - AttributeName: channel
                            KeyType: HASH
                      Projection:
                          ProjectionType: ALL
                    - IndexName: lookup-by-connection
                      KeySchema:
                          - AttributeName: connectionId
                            KeyType: HASH
                      Projection:
                          ProjectionType: ALL
                BillingMode: PAY_PER_REQUEST

Add the following iamRoleStatement to enable our Lambda function to access the table:

provider:
    name: aws

    iamRoleStatements:
        # Add this iamRoleStatement
        - Effect: Allow
          Action: [ dynamodb:Query, dynamodb:GetItem, dynamodb:PutItem, dynamodb:UpdateItem, dynamodb:DeleteItem, dynamodb:BatchWriteItem ]
          Resource:
              - !GetAtt ConnectionsTable.Arn
              - !Join [ '', [ !GetAtt ConnectionsTable.Arn, '/index/*' ] ]

Add an environment variable to autogenerate our websocket URL:

provider:
    name: aws

    environment:
        # Add these variables
        # Please note : in Laravel 11, this setting is now BROADCAST_CONNECTION
        BROADCAST_DRIVER: laravel-echo-api-gateway
        LARAVEL_ECHO_API_GATEWAY_DYNAMODB_TABLE: !Ref ConnectionsTable
        LARAVEL_ECHO_API_GATEWAY_API_ID: !Ref WebsocketsApi
        LARAVEL_ECHO_API_GATEWAY_API_STAGE: "${self:provider.stage}"
        # Optional, see "Signing secret" below
        LARAVEL_ECHO_API_GATEWAY_SECRET: ${ssm:/my-app/echo-api-gateway-secret}

Next, create the PHP handler file in handlers/websocket.php

<?php

use Georgeboot\LaravelEchoApiGateway\Handler;
use Illuminate\Foundation\Application;

require __DIR__ . '/../vendor/autoload.php';

/** @var Application $app */
$app = require __DIR__ . '/../bootstrap/app.php';

$kernel = $app->make(Illuminate\Contracts\Console\Kernel::class);
$kernel->bootstrap();

return $app->make(Handler::class);

Now, deploy your app by running serverless deploy or similar. Write down the websocket url the output gives you.

B. When using Vapor

When using Vapor, you will have to create these required resources by hand using the AWS CLI or Console:

B1. DynamoDB table for connections

Create a DynamoDB table for the connections. Use connectionId (string) as a HASH key, and channel (string) as a SORT key. Set the capacity setting to whatever you like (probably on-demand).

Create 2 indexes:

  1. Name: lookup-by-connection, key: connectionId, no sort key, projected: ALL
  2. Name: lookup-by-channel, key: channel, no sort key, projected: ALL
B2. API Gateway

Create a new Websocket API. Enter a name and leave the route selection expression to what it is. Add a $disconnect and $default. Set both integrations to Lambda and select your CLI lambda from the list. Set the name of the stage to what you desire and create the API. Once created, write down the ID, as we'll need it later.

B3. IAM Permissions

In IAM, go to roles and open laravel-vapor-role. Open the inline policy and edit it. On the JSON tab, add "execute-api:*" to the list of actions.

Then, login to Laravel Vapor, go to team settings, AWS Accounts, click on Role next to the correct account and deselect Receive Updates.

Edit your .env:

BROADCAST_DRIVER=laravel-echo-api-gateway
LARAVEL_ECHO_API_GATEWAY_DYNAMODB_TABLE=the-table-name-you-entered-when-creating-it
LARAVEL_ECHO_API_GATEWAY_API_ID=your-websocket-api-id
LARAVEL_ECHO_API_GATEWAY_API_STAGE=your-api-stage-name
# Optional, see "Signing secret" below
LARAVEL_ECHO_API_GATEWAY_SECRET=a-long-random-string

Signing secret

Private and presence channels are authorized by your app (/broadcasting/auth), which signs the socket id and channel name. The websocket handler verifies that signature before subscribing the connection. By default both use your APP_KEY. If the websocket handler runs as a separate app, set the same LARAVEL_ECHO_API_GATEWAY_SECRET on both instead of sharing your APP_KEY.

Generate front-end code

Add to your javascript file:

import Echo from 'laravel-echo';
import { Connector } from 'laravel-echo-api-gateway';

window.Echo = new Echo({
    broadcaster: Connector,
    // replace the placeholders
    host: 'wss://{api-id}.execute-api.{region}.amazonaws.com/{stage}',
    authEndpoint: '{auth-url}/broadcasting/auth', // Optional: Use if you have a separate authentication endpoint
    bearerToken: '{token}', // Optional: Use if you need a Bearer Token for authentication
});

The broadcaster export from previous versions keeps working: new Echo({ broadcaster, ... }).

With TypeScript and laravel-echo v2, its typings do not accept custom connector classes yet, so cast the option: broadcaster: Connector as any.

Using @laravel/echo-react or @laravel/echo-vue

import { configureEcho } from '@laravel/echo-react';
import { Connector } from 'laravel-echo-api-gateway';

configureEcho({
    broadcaster: Connector as any,
    host: import.meta.env.VITE_ECHO_API_GATEWAY_HOST,
});

Using it outside the browser (Node.js, Electron)

The connector only needs the global WebSocket and fetch, available in Node.js 22+ (or 18+ with a WebSocket polyfill such as ws assigned to globalThis.WebSocket).

To authorize private channels with your own logic, pass a custom handler. It receives the socket id and channel name and must call back with the response of your /broadcasting/auth endpoint:

const echo = new Echo({
    broadcaster: Connector,
    host: 'wss://{api-id}.execute-api.{region}.amazonaws.com/{stage}',
    channelAuthorization: {
        customHandler: ({ socketId, channelName }, callback) => {
            fetch('https://my-app.test/api/broadcasting/auth', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
                body: JSON.stringify({ socket_id: socketId, channel_name: channelName }),
            })
                .then((response) => response.json())
                .then((data) => callback(null, data))
                .catch((error) => callback(error, null));
        },
    },
});

You can also pass channelAuthorization: { endpoint, headers } to only change the endpoint or add headers. Authorization failures and rejected subscriptions are reported to channel.error(callback).

Options

Option Default Description
host The websocket URL of your API Gateway stage.
authEndpoint /broadcasting/auth Endpoint used to authorize private and presence channels.
bearerToken Sent as Authorization: Bearer ... to the auth endpoint.
auth.headers {} Extra headers sent to the auth endpoint.
channelAuthorization { endpoint, headers, customHandler }, see above.
pingInterval 60000 Milliseconds between keep-alive pings. API Gateway closes idle connections after 10 minutes.
reconnectDelay 1000 Milliseconds before the first reconnect attempt. Later attempts back off exponentially.
maxReconnectDelay 30000 Upper bound for the reconnect delay.
debug false Log connection activity to the console.

API Gateway closes every websocket connection after 2 hours. The connector reconnects automatically and subscribes again to every channel you joined, so your listeners keep receiving events.

You can also enable console output by passing a debug: true option to your Echo initializer:

window.Echo = new Echo({
    broadcaster: Connector,
    host: 'wss://{api-id}.execute-api.{region}.amazonaws.com/{stage}',
    debug: true
});

Lastly, build your assets (for example with Vite or Laravel Mix). After this step, you should be up and running.

Limitations

  • Presence channels can be joined, but member tracking (here, joining, leaving) is not implemented yet.
  • Client events (whispers) can only be sent by connections subscribed to the private or presence channel, like Pusher.
  • Encrypted private channels are not supported.