reverb-ws-client 1.0.5 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +180 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
# reverb-ws-client
|
|
2
|
+
|
|
3
|
+
A lightweight WebSocket client for Laravel Reverb with support for:
|
|
4
|
+
|
|
5
|
+
- Public channels
|
|
6
|
+
- Private channels
|
|
7
|
+
- Presence channels
|
|
8
|
+
- Automatic reconnection
|
|
9
|
+
- TypeScript support
|
|
10
|
+
- Custom authorization
|
|
11
|
+
- Browser and React Native support
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install reverb-ws-client
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Quick Start
|
|
20
|
+
|
|
21
|
+
```ts
|
|
22
|
+
import { ReverbClient } from "reverb-ws-client";
|
|
23
|
+
|
|
24
|
+
const client = new ReverbClient({
|
|
25
|
+
appKey: "your-app-key",
|
|
26
|
+
host: "localhost",
|
|
27
|
+
port: 8080,
|
|
28
|
+
scheme: "ws",
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
await client.connect();
|
|
32
|
+
|
|
33
|
+
const channel = client.channel("chat");
|
|
34
|
+
|
|
35
|
+
channel.listen("MessageSent", (data) => {
|
|
36
|
+
console.log(data);
|
|
37
|
+
});
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Configuration
|
|
41
|
+
|
|
42
|
+
```ts
|
|
43
|
+
import { ReverbClient } from "reverb-ws-client";
|
|
44
|
+
|
|
45
|
+
const client = new ReverbClient({
|
|
46
|
+
appKey: "your-app-key",
|
|
47
|
+
host: "localhost",
|
|
48
|
+
port: 8080,
|
|
49
|
+
scheme: "ws",
|
|
50
|
+
debug: true,
|
|
51
|
+
|
|
52
|
+
// Required for private and presence channels
|
|
53
|
+
authorizer: async (channelName, socketId) => {
|
|
54
|
+
const response = await fetch("http://localhost:8000/broadcasting/auth", {
|
|
55
|
+
method: "POST",
|
|
56
|
+
headers: {
|
|
57
|
+
Authorization: `Bearer ${token}`,
|
|
58
|
+
"Content-Type": "application/json",
|
|
59
|
+
},
|
|
60
|
+
body: JSON.stringify({
|
|
61
|
+
socket_id: socketId,
|
|
62
|
+
channel_name: channelName,
|
|
63
|
+
}),
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
return response.json();
|
|
67
|
+
},
|
|
68
|
+
});
|
|
69
|
+
|
|
70
|
+
client.connect();
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## Configuration Options
|
|
74
|
+
|
|
75
|
+
| Option | Type | Required | Description |
|
|
76
|
+
| ---------- | ------------- | -------- | -------------------------------------- |
|
|
77
|
+
| appKey | string | Yes | Laravel Reverb application key |
|
|
78
|
+
| host | string | Yes | Reverb server host |
|
|
79
|
+
| port | number | Yes | Reverb server port |
|
|
80
|
+
| scheme | `ws` \| `wss` | No | Connection protocol |
|
|
81
|
+
| debug | boolean | No | Enable debug logging |
|
|
82
|
+
| authorizer | function | No | Used for private and presence channels |
|
|
83
|
+
|
|
84
|
+
## Public Channels
|
|
85
|
+
|
|
86
|
+
```ts
|
|
87
|
+
const channel = client.channel("chat");
|
|
88
|
+
|
|
89
|
+
channel.listen("MessageSent", (event) => {
|
|
90
|
+
console.log(event);
|
|
91
|
+
});
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## Private Channels
|
|
95
|
+
|
|
96
|
+
```ts
|
|
97
|
+
const channel = await client.private("private-chat");
|
|
98
|
+
|
|
99
|
+
channel.listen("MessageSent", (event) => {
|
|
100
|
+
console.log(event);
|
|
101
|
+
});
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## Presence Channels
|
|
105
|
+
|
|
106
|
+
```ts
|
|
107
|
+
const channel = await client.presence("chat-room");
|
|
108
|
+
|
|
109
|
+
channel.listen("MessageSent", (event) => {
|
|
110
|
+
console.log(event);
|
|
111
|
+
});
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## Stop Listening
|
|
115
|
+
|
|
116
|
+
```ts
|
|
117
|
+
channel.stopListening("MessageSent");
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
## Unsubscribe
|
|
121
|
+
|
|
122
|
+
```ts
|
|
123
|
+
channel.unsubscribe();
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
## Disconnect
|
|
127
|
+
|
|
128
|
+
```ts
|
|
129
|
+
client.disconnect();
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
## Laravel Reverb Example
|
|
133
|
+
|
|
134
|
+
### Backend Event
|
|
135
|
+
|
|
136
|
+
```php
|
|
137
|
+
use Illuminate\Broadcasting\Channel;
|
|
138
|
+
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
|
|
139
|
+
|
|
140
|
+
class MessageSent implements ShouldBroadcast
|
|
141
|
+
{
|
|
142
|
+
public function broadcastOn(): array
|
|
143
|
+
{
|
|
144
|
+
return [
|
|
145
|
+
new Channel('chat'),
|
|
146
|
+
];
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
public function broadcastAs(): string
|
|
150
|
+
{
|
|
151
|
+
return 'MessageSent';
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
### Frontend Listener
|
|
157
|
+
|
|
158
|
+
```ts
|
|
159
|
+
const channel = client.channel("chat");
|
|
160
|
+
|
|
161
|
+
channel.listen("MessageSent", (data) => {
|
|
162
|
+
console.log(data);
|
|
163
|
+
});
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
## Features
|
|
167
|
+
|
|
168
|
+
- Lightweight and dependency-free
|
|
169
|
+
- Laravel Reverb compatible
|
|
170
|
+
- Automatic reconnection
|
|
171
|
+
- Public channels
|
|
172
|
+
- Private channels
|
|
173
|
+
- Presence channels
|
|
174
|
+
- TypeScript support
|
|
175
|
+
- React Native support
|
|
176
|
+
- Custom authentication flow
|
|
177
|
+
|
|
178
|
+
## License
|
|
179
|
+
|
|
180
|
+
MIT
|