tessl/npm-laravel-echo

Laravel Echo library for beautiful Pusher and Socket.IO integration

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Laravel Echo

Name: tessl/npm-laravel-echo
Author: tessl

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;
}

Workspace: tessl
Visibility: Public
Created: 7 months ago
Last updated: 3 months ago
Describes: pkg:npm/laravel-echo@2.2.x
Publish Source: CLI
Badge