or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

channels.mdconnectors.mdecho-interface.mdindex.md
tile.json

tessl/npm-laravel-echo

Laravel Echo library for beautiful Pusher and Socket.IO integration

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/laravel-echo@2.2.x

To install, run

npx @tessl/cli install tessl/npm-laravel-echo@2.2.0

index.mddocs/

Laravel Echo

Laravel Echo is a TypeScript/JavaScript library that provides seamless WebSocket integration for Laravel applications, enabling real-time communication through multiple broadcasting drivers including Pusher, Socket.IO, Ably, and Reverb.

Package Information

  • Package Name: laravel-echo
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install laravel-echo

Core Imports

import Echo, { Channel, Connector, EventFormatter, type PresenceChannel } from "laravel-echo";

For CommonJS:

const { default: Echo, Channel, Connector, EventFormatter } = require("laravel-echo");

Most common usage:

import Echo from "laravel-echo";

Companion Packages

Laravel Echo includes companion packages for popular frontend frameworks:

  • @laravel/echo-react: React hooks for seamless Echo integration including useEcho, useEchoPresence, useEchoNotification, and model-specific hooks
  • @laravel/echo-vue: Vue composables providing similar functionality for Vue.js applications

Install companion packages separately:

npm install @laravel/echo-react  # For React
npm install @laravel/echo-vue    # For Vue

Basic Usage

import Echo from "laravel-echo";
import Pusher from "pusher-js";

// Initialize Echo with Pusher
const echo = new Echo({
  broadcaster: "pusher",
  key: "your-pusher-key",
  cluster: "us2",
});

// Listen to public channels
echo.channel("orders")
  .listen("OrderShipped", (e) => {
    console.log("Order shipped:", e.order);
  });

// Join presence channels
echo.join("chat.1")
  .here((users) => {
    console.log("Current users:", users);
  })
  .joining((user) => {
    console.log("User joining:", user);
  })
  .leaving((user) => {
    console.log("User leaving:", user);
  });

// Listen to private channels
echo.private("user.1")
  .listen("OrderPaid", (e) => {
    console.log("Payment received:", e.payment);
  });

Architecture

Laravel Echo is built around several key components:

  • Echo Class: Main API for managing WebSocket connections and channel subscriptions
  • Broadcasting Drivers: Support for multiple WebSocket services (Pusher, Socket.IO, Ably, Reverb)
  • Channel System: Different channel types for various use cases (public, private, encrypted, presence)
  • Connector Layer: Abstraction over WebSocket client libraries with consistent API
  • HTTP Integration: Automatic request interceptors for Vue, Axios, jQuery, and Turbo
  • Type Safety: Full TypeScript support with generic types for broadcaster-specific functionality

Capabilities

Core Echo Interface

Main Echo class providing connection management and channel access methods. Handles initialization, connection lifecycle, and channel factory methods.

export default class Echo<T extends keyof Broadcaster> {
  constructor(options: EchoOptions<T>);
  channel(channel: string): Broadcaster[T]["public"];
  private(channel: string): Broadcaster[T]["private"];
  encryptedPrivate(channel: string): Broadcaster[T]["encrypted"];
  join(channel: string): Broadcaster[T]["presence"];
  listen(channel: string, event: string, callback: CallableFunction): Broadcaster[T]["public"];
  leave(channel: string): void;
  leaveChannel(channel: string): void;
  leaveAllChannels(): void;
  connect(): void;
  disconnect(): void;
  socketId(): string | undefined;
}

Echo Interface

Channel System

Comprehensive channel system supporting public, private, encrypted private, and presence channels with event listening and broadcasting capabilities.

abstract class Channel {
  abstract listen(event: string, callback: CallableFunction): this;
  abstract stopListening(event: string, callback?: CallableFunction): this;
  abstract subscribed(callback: CallableFunction): this;
  abstract error(callback: CallableFunction): this;
  listenForWhisper(event: string, callback: CallableFunction): this;
  stopListeningForWhisper(event: string, callback?: CallableFunction): this;
  notification(callback: CallableFunction): this;
}

interface PresenceChannel extends Channel {
  here(callback: CallableFunction): this;
  joining(callback: CallableFunction): this;
  leaving(callback: CallableFunction): this;
  whisper(eventName: string, data: Record<any, any>): this;
}

Channel System

Broadcasting Connectors

WebSocket client abstractions providing consistent APIs across different broadcasting services with automatic authentication and connection management.

abstract class Connector<TBroadcastDriver, TPublic, TPrivate, TPresence> {
  constructor(options: EchoOptions<TBroadcastDriver>);
  abstract connect(): void;
  abstract disconnect(): void;
  abstract channel(channel: string): TPublic;
  abstract privateChannel(channel: string): TPrivate;
  abstract presenceChannel(channel: string): TPresence;
  abstract leave(channel: string): void;
  abstract leaveChannel(channel: string): void;
  abstract socketId(): string | undefined;
}

Broadcasting Connectors

Event Formatting Utilities

Event name formatting utilities for handling Laravel event namespacing and formatting conventions.

class EventFormatter {
  constructor(namespace: string | boolean | undefined);
  format(event: string): string;
  setNamespace(value: string | boolean): void;
}

function isConstructor(obj: unknown): obj is new (...args: any[]) => any;

Configuration Types

type BroadcastDriver = "pusher" | "reverb" | "ably" | "socket.io" | "null";

type EchoOptions<T extends keyof Broadcaster> = Broadcaster[T]["options"];

type Broadcaster = {
  reverb: {
    connector: PusherConnector<"reverb">;
    public: PusherChannel<"reverb">;
    private: PusherPrivateChannel<"reverb">;
    encrypted: PusherEncryptedPrivateChannel<"reverb">;
    presence: PusherPresenceChannel<"reverb">;
    options: GenericOptions<"reverb"> & Partial<PusherOptions<"reverb">>;
  };
  pusher: {
    connector: PusherConnector<"pusher">;
    public: PusherChannel<"pusher">;
    private: PusherPrivateChannel<"pusher">;
    encrypted: PusherEncryptedPrivateChannel<"pusher">;
    presence: PusherPresenceChannel<"pusher">;
    options: GenericOptions<"pusher"> & Partial<PusherOptions<"pusher">>;
  };
  ably: {
    connector: PusherConnector<"pusher">;
    public: PusherChannel<"pusher">;
    private: PusherPrivateChannel<"pusher">;
    encrypted: PusherEncryptedPrivateChannel<"pusher">;
    presence: PusherPresenceChannel<"pusher">;
    options: GenericOptions<"ably"> & Partial<PusherOptions<"ably">>;
  };
  "socket.io": {
    connector: SocketIoConnector;
    public: SocketIoChannel;
    private: SocketIoPrivateChannel;
    encrypted: never;
    presence: SocketIoPresenceChannel;
    options: GenericOptions<"socket.io">;
  };
  null: {
    connector: NullConnector;
    public: NullChannel;
    private: NullPrivateChannel;
    encrypted: NullEncryptedPrivateChannel;
    presence: NullPresenceChannel;
    options: GenericOptions<"null">;
  };
};

interface GenericOptions<TBroadcaster extends keyof Broadcaster> {
  broadcaster: TBroadcaster;
  auth?: { headers: Record<string, string> };
  authEndpoint?: string;
  userAuthentication?: { endpoint: string; headers: Record<string, string> };
  csrfToken?: string | null;
  bearerToken?: string | null;
  host?: string | null;
  key?: string | null;
  namespace?: string | false;
  withoutInterceptors?: boolean;
}