0
# Echo Interface
1

2
Main Echo class providing connection management and channel access methods for WebSocket broadcasting services.
3

4
## Capabilities
5

6
### Echo Constructor
7

8
Creates new Echo instance with broadcaster-specific configuration.
9

10
```typescript { .api }
11
/**
12
 * Create a new Echo instance
13
 * @param options - Configuration options for the specific broadcaster
14
 */
15
constructor(options: EchoOptions<T>);
16
```
17

18
**Usage Examples:**
19

20
```typescript
21
import Echo from "laravel-echo";
22

23
// Pusher configuration
24
const echo = new Echo({
25
  broadcaster: "pusher",
26
  key: "your-pusher-key",
27
  cluster: "us2",
28
  authEndpoint: "/broadcasting/auth",
29
});
30

31
// Socket.IO configuration
32
const echo = new Echo({
33
  broadcaster: "socket.io",
34
  host: window.location.hostname + ":6001",
35
});
36

37
// Reverb configuration
38
const echo = new Echo({
39
  broadcaster: "reverb",
40
  key: "your-reverb-key",
41
  wsHost: "localhost",
42
  wsPort: 8080,
43
});
44
```
45

46
### Channel Access Methods
47

48
Get channel instances for different channel types.
49

50
```typescript { .api }
51
/**
52
 * Get a public channel instance by name
53
 * @param channel - Channel name
54
 * @returns Public channel instance
55
 */
56
channel(channel: string): Broadcaster[T]["public"];
57

58
/**
59
 * Get a private channel instance by name
60
 * @param channel - Channel name
61
 * @returns Private channel instance
62
 */
63
private(channel: string): Broadcaster[T]["private"];
64

65
/**
66
 * Get an encrypted private channel instance by name
67
 * @param channel - Channel name
68
 * @returns Encrypted private channel instance
69
 * @throws Error if broadcaster doesn't support encrypted channels
70
 */
71
encryptedPrivate(channel: string): Broadcaster[T]["encrypted"];
72

73
/**
74
 * Get a presence channel instance by name
75
 * @param channel - Channel name
76
 * @returns Presence channel instance
77
 */
78
join(channel: string): Broadcaster[T]["presence"];
79
```
80

81
**Usage Examples:**
82

83
```typescript
84
// Public channel
85
echo.channel("orders").listen("OrderShipped", (e) => {
86
  console.log(e.order);
87
});
88

89
// Private channel
90
echo.private("user.1").listen("MessageSent", (e) => {
91
  console.log(e.message);
92
});
93

94
// Encrypted private channel (Pusher/Reverb only)
95
echo.encryptedPrivate("sensitive-data").listen("DataUpdate", (e) => {
96
  console.log(e.data);
97
});
98

99
// Presence channel
100
echo.join("chat.1")
101
  .here((users) => console.log("Current users:", users))
102
  .joining((user) => console.log("User joined:", user))
103
  .leaving((user) => console.log("User left:", user));
104
```
105

106
### Event Listening
107

108
Listen for events on channels with callback functions.
109

110
```typescript { .api }
111
/**
112
 * Listen for an event on a channel instance
113
 * @param channel - Channel name
114
 * @param event - Event name to listen for
115
 * @param callback - Function to call when event is received
116
 * @returns The channel instance for chaining
117
 */
118
listen(channel: string, event: string, callback: CallableFunction): Broadcaster[T]["public"];
119
```
120

121
**Usage Examples:**
122

123
```typescript
124
// Listen for specific events
125
echo.listen("orders", "OrderShipped", (e) => {
126
  console.log("Order shipped:", e.order.id);
127
});
128

129
// Listen for Laravel notifications
130
echo.private("App.Models.User.1").notification((notification) => {
131
  console.log("Notification:", notification.type);
132
});
133
```
134

135
### Channel Management
136

137
Methods for managing channel subscriptions and connections.
138

139
```typescript { .api }
140
/**
141
 * Leave the given channel, as well as its private and presence variants
142
 * @param channel - Channel name to leave
143
 */
144
leave(channel: string): void;
145

146
/**
147
 * Leave the given channel specifically
148
 * @param channel - Channel name to leave
149
 */
150
leaveChannel(channel: string): void;
151

152
/**
153
 * Leave all subscribed channels
154
 */
155
leaveAllChannels(): void;
156
```
157

158
**Usage Examples:**
159

160
```typescript
161
// Leave specific channel and its variants
162
echo.leave("chat.1"); // Leaves chat.1, private-chat.1, presence-chat.1
163

164
// Leave specific channel only
165
echo.leaveChannel("presence-chat.1");
166

167
// Leave all channels
168
echo.leaveAllChannels();
169
```
170

171
### Connection Management
172

173
Control WebSocket connection lifecycle.
174

175
```typescript { .api }
176
/**
177
 * Create a new connection to the WebSocket service
178
 */
179
connect(): void;
180

181
/**
182
 * Disconnect from the Echo server
183
 */
184
disconnect(): void;
185

186
/**
187
 * Get the Socket ID for the current connection
188
 * @returns Socket ID string or undefined if not connected
189
 */
190
socketId(): string | undefined;
191
```
192

193
**Usage Examples:**
194

195
```typescript
196
// Manual connection control
197
echo.connect();
198

199
// Get socket ID for API requests
200
const socketId = echo.socketId();
201
if (socketId) {
202
  // Include in API requests for event tracking
203
  fetch("/api/data", {
204
    headers: {
205
      "X-Socket-ID": socketId,
206
    },
207
  });
208
}
209

210
// Disconnect when done
211
echo.disconnect();
212
```
213

214
### HTTP Interceptors
215

216
Automatic HTTP request interceptor registration for popular libraries.
217

218
```typescript { .api }
219
/**
220
 * Register all available HTTP interceptors
221
 */
222
registerInterceptors(): void;
223

224
/**
225
 * Register Vue.js HTTP interceptor to add X-Socket-ID header
226
 */
227
registerVueRequestInterceptor(): void;
228

229
/**
230
 * Register Axios HTTP interceptor to add X-Socket-ID header
231
 */
232
registerAxiosRequestInterceptor(): void;
233

234
/**
235
 * Register jQuery AJAX interceptor to add X-Socket-ID header
236
 */
237
registerjQueryAjaxSetup(): void;
238

239
/**
240
 * Register Turbo request interceptor to add X-Socket-ID header
241
 */
242
registerTurboRequestInterceptor(): void;
243
```
244

245
**Usage Examples:**
246

247
```typescript
248
// Disable automatic interceptors
249
const echo = new Echo({
250
  broadcaster: "pusher",
251
  key: "your-key",
252
  withoutInterceptors: true,
253
});
254

255
// Register specific interceptors manually
256
echo.registerAxiosRequestInterceptor();
257

258
// All interceptors are automatically registered by default
259
// They add X-Socket-ID header to HTTP requests for Laravel integration
260
```
261

262
## Configuration Options
263

264
Each broadcaster has specific configuration requirements:
265

266
### Pusher/Reverb Configuration
267

268
```typescript
269
interface PusherOptions {
270
  broadcaster: "pusher" | "reverb";
271
  key: string;
272
  cluster?: string;
273
  wsHost?: string;
274
  wsPort?: number;
275
  wssPort?: number;
276
  forceTLS?: boolean;
277
  enabledTransports?: string[];
278
  disabledTransports?: string[];
279
}
280
```
281

282
### Socket.IO Configuration
283

284
```typescript
285
interface SocketIoOptions {
286
  broadcaster: "socket.io";
287
  host?: string;
288
  namespace?: string;
289
}
290
```
291

292
### Ably Configuration
293

294
```typescript
295
interface AblyOptions {
296
  broadcaster: "ably";
297
  key: string;
298
  clientId?: string;
299
}
300
```