pingerchips-js 1.0.0-a → 1.0.0
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 +38 -38
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Pusher Channels Javascript Client
|
|
2
2
|
|
|
3
3
|

|
|
4
4
|
|
|
5
|
-
This
|
|
5
|
+
This Pusher Channels client library supports web browsers, web workers and Node.js
|
|
6
6
|
|
|
7
|
-
If you're looking for the
|
|
7
|
+
If you're looking for the Pusher Channels server library for Node.js, use
|
|
8
8
|
[pusher-http-node](https://github.com/pusher/pusher-http-node) instead.
|
|
9
9
|
|
|
10
|
-
For tutorials and more in-depth information about
|
|
10
|
+
For tutorials and more in-depth information about Pusher Channels, visit
|
|
11
11
|
our [official docs](https://pusher.com/docs/javascript_quick_start).
|
|
12
12
|
|
|
13
13
|
## Usage Overview
|
|
@@ -54,7 +54,7 @@ The following topics are covered:
|
|
|
54
54
|
|
|
55
55
|
### Web
|
|
56
56
|
|
|
57
|
-
If you're using
|
|
57
|
+
If you're using Pusher Channels on a web page, you can install the library via:
|
|
58
58
|
|
|
59
59
|
#### Encrypted Channel Support
|
|
60
60
|
|
|
@@ -78,25 +78,25 @@ yarn add pusher-js
|
|
|
78
78
|
Then:
|
|
79
79
|
|
|
80
80
|
```javascript
|
|
81
|
-
import
|
|
81
|
+
import Pusher from 'pusher-js';
|
|
82
82
|
```
|
|
83
83
|
|
|
84
84
|
If you'd like to use encrypted channels:
|
|
85
85
|
|
|
86
86
|
```javascript
|
|
87
|
-
import
|
|
87
|
+
import Pusher from 'pusher-js/with-encryption';
|
|
88
88
|
```
|
|
89
89
|
|
|
90
90
|
Or, if you're not using ES6 modules:
|
|
91
91
|
|
|
92
92
|
```javascript
|
|
93
|
-
const
|
|
93
|
+
const Pusher = require('pusher-js');
|
|
94
94
|
```
|
|
95
95
|
|
|
96
96
|
If you'd like to use encrypted channels:
|
|
97
97
|
|
|
98
98
|
```javascript
|
|
99
|
-
const
|
|
99
|
+
const Pusher = require('pusher-js/with-encryption');
|
|
100
100
|
```
|
|
101
101
|
|
|
102
102
|
#### CDN
|
|
@@ -135,10 +135,10 @@ out of the box but if you need access to specific types you can import them
|
|
|
135
135
|
like so:
|
|
136
136
|
|
|
137
137
|
```
|
|
138
|
-
import
|
|
139
|
-
import * as
|
|
138
|
+
import Pusher from 'pusher-js';
|
|
139
|
+
import * as PusherTypes from 'pusher-js';
|
|
140
140
|
|
|
141
|
-
var presenceChannel:
|
|
141
|
+
var presenceChannel: PusherTypes.PresenceChannel;
|
|
142
142
|
...
|
|
143
143
|
```
|
|
144
144
|
|
|
@@ -167,13 +167,13 @@ importScripts('https://js.pusher.com/7.0/pusher-with-encryption.worker.min.js');
|
|
|
167
167
|
If you're building your worker with a bundler, you can import the worker entrypoint
|
|
168
168
|
|
|
169
169
|
```
|
|
170
|
-
import
|
|
170
|
+
import Pusher from 'pusher-js/worker'
|
|
171
171
|
```
|
|
172
172
|
|
|
173
173
|
If you'd like to use encrypted channels:
|
|
174
174
|
|
|
175
175
|
```
|
|
176
|
-
import
|
|
176
|
+
import Pusher from 'pusher-js/worker/with-encryption'
|
|
177
177
|
```
|
|
178
178
|
|
|
179
179
|
### Node.js
|
|
@@ -181,7 +181,7 @@ import Pingerchips from 'pusher-js/worker/with-encryption'
|
|
|
181
181
|
Having installed `pusher-js` via an NPM-compatible package manager, run:
|
|
182
182
|
|
|
183
183
|
```javascript
|
|
184
|
-
import
|
|
184
|
+
import Pusher from 'pusher-js';
|
|
185
185
|
```
|
|
186
186
|
|
|
187
187
|
Notes:
|
|
@@ -192,19 +192,19 @@ Notes:
|
|
|
192
192
|
## Initialization
|
|
193
193
|
|
|
194
194
|
```js
|
|
195
|
-
const pusher = new
|
|
195
|
+
const pusher = new Pusher(APP_KEY, {
|
|
196
196
|
cluster: APP_CLUSTER,
|
|
197
197
|
});
|
|
198
198
|
```
|
|
199
199
|
|
|
200
|
-
You can get your `APP_KEY` and `APP_CLUSTER` from the [
|
|
200
|
+
You can get your `APP_KEY` and `APP_CLUSTER` from the [Pusher Channels dashboard](https://dashboard.pusher.com/).
|
|
201
201
|
|
|
202
202
|
## Configuration
|
|
203
203
|
|
|
204
|
-
There are a number of configuration parameters which can be set for the client, which can be passed as an object to the
|
|
204
|
+
There are a number of configuration parameters which can be set for the client, which can be passed as an object to the Pusher constructor, i.e.:
|
|
205
205
|
|
|
206
206
|
```js
|
|
207
|
-
const pusher = new
|
|
207
|
+
const pusher = new Pusher(APP_KEY, {
|
|
208
208
|
cluster: APP_CLUSTER,
|
|
209
209
|
channelAuthorization: {
|
|
210
210
|
endpoint: 'http://example.com/pusher/auth'
|
|
@@ -271,19 +271,19 @@ For more information see [authorizing users](https://pusher.com/docs/channels/se
|
|
|
271
271
|
Specifies the cluster that pusher-js should connect to. [If you'd like to see a full list of our clusters, click here](https://pusher.com/docs/clusters). If you do not specify a cluster, `mt1` will be used by default.
|
|
272
272
|
|
|
273
273
|
```js
|
|
274
|
-
const pusher = new
|
|
274
|
+
const pusher = new Pusher(APP_KEY, {
|
|
275
275
|
cluster: APP_CLUSTER,
|
|
276
276
|
});
|
|
277
277
|
```
|
|
278
278
|
|
|
279
279
|
#### `disableStats` (deprecated) (Boolean)
|
|
280
280
|
|
|
281
|
-
Disables stats collection, so that connection metrics are not submitted to
|
|
281
|
+
Disables stats collection, so that connection metrics are not submitted to Pusher’s servers. These stats are used for internal monitoring only and they do not affect the account stats.
|
|
282
282
|
*This option is deprecated since stats collection is now disabled by default*
|
|
283
283
|
|
|
284
284
|
#### `enableStats` (Boolean)
|
|
285
285
|
|
|
286
|
-
Enables stats collection, so that connection metrics are submitted to
|
|
286
|
+
Enables stats collection, so that connection metrics are submitted to Pusher’s servers. These stats can help pusher engineers debug connection issues.
|
|
287
287
|
|
|
288
288
|
#### `enabledTransports` (Array)
|
|
289
289
|
|
|
@@ -291,7 +291,7 @@ Specifies which transports should be used by pusher-js to establish a connection
|
|
|
291
291
|
|
|
292
292
|
```js
|
|
293
293
|
// Only use WebSockets
|
|
294
|
-
const pusher = new
|
|
294
|
+
const pusher = new Pusher(APP_KEY, {
|
|
295
295
|
cluster: APP_CLUSTER,
|
|
296
296
|
enabledTransports: ['ws']
|
|
297
297
|
});
|
|
@@ -301,7 +301,7 @@ Note: if you intend to use secure websockets, or `wss`, you can not simply speci
|
|
|
301
301
|
|
|
302
302
|
```js
|
|
303
303
|
// Only use secure WebSockets
|
|
304
|
-
const pusher = new
|
|
304
|
+
const pusher = new Pusher(APP_KEY, {
|
|
305
305
|
cluster: APP_CLUSTER,
|
|
306
306
|
enabledTransports: ['ws'],
|
|
307
307
|
forceTLS: true
|
|
@@ -314,13 +314,13 @@ Specifies which transports must not be used by pusher-js to establish a connecti
|
|
|
314
314
|
|
|
315
315
|
```js
|
|
316
316
|
// Use all transports except for sockjs
|
|
317
|
-
const pusher = new
|
|
317
|
+
const pusher = new Pusher(APP_KEY, {
|
|
318
318
|
cluster: APP_CLUSTER,
|
|
319
319
|
disabledTransports: ['sockjs']
|
|
320
320
|
});
|
|
321
321
|
|
|
322
322
|
// Only use WebSockets
|
|
323
|
-
const pusher = new
|
|
323
|
+
const pusher = new Pusher(APP_KEY, {
|
|
324
324
|
cluster: APP_CLUSTER,
|
|
325
325
|
enabledTransports: ['ws', 'xhr_streaming'],
|
|
326
326
|
disabledTransports: ['xhr_streaming']
|
|
@@ -329,7 +329,7 @@ const pusher = new Pingerchips(APP_KEY, {
|
|
|
329
329
|
|
|
330
330
|
#### `wsHost`, `wsPort`, `wssPort`, `httpHost`, `httpPort`, `httpsPort`
|
|
331
331
|
|
|
332
|
-
These can be changed to point to alternative
|
|
332
|
+
These can be changed to point to alternative Pusher Channels URLs (used internally for our staging server).
|
|
333
333
|
|
|
334
334
|
#### `wsPath`
|
|
335
335
|
|
|
@@ -349,28 +349,28 @@ Time before the connection is terminated after a ping is sent to the server. Def
|
|
|
349
349
|
|
|
350
350
|
## Global configuration
|
|
351
351
|
|
|
352
|
-
### `
|
|
352
|
+
### `Pusher.logToConsole` (Boolean)
|
|
353
353
|
|
|
354
354
|
Enables logging to the browser console via calls to `console.log`.
|
|
355
355
|
|
|
356
|
-
### `
|
|
356
|
+
### `Pusher.log` (Function)
|
|
357
357
|
|
|
358
358
|
Assign a custom log handler for the pusher-js library logging. For example:
|
|
359
359
|
|
|
360
360
|
```js
|
|
361
|
-
|
|
361
|
+
Pusher.log = (msg) => {
|
|
362
362
|
console.log(msg);
|
|
363
363
|
};
|
|
364
364
|
```
|
|
365
365
|
|
|
366
|
-
By setting the `log` property you also override the use of `
|
|
366
|
+
By setting the `log` property you also override the use of `Pusher.enableLogging`.
|
|
367
367
|
|
|
368
368
|
## Connection
|
|
369
369
|
|
|
370
|
-
A connection to
|
|
370
|
+
A connection to Pusher Channels is established by providing your `APP_KEY` and `APP_CLUSTER` to the constructor function:
|
|
371
371
|
|
|
372
372
|
```js
|
|
373
|
-
const pusher = new
|
|
373
|
+
const pusher = new Pusher(APP_KEY, {
|
|
374
374
|
cluster: APP_CLUSTER,
|
|
375
375
|
});
|
|
376
376
|
```
|
|
@@ -380,7 +380,7 @@ This returns a pusher object which can then be used to subscribe to channels.
|
|
|
380
380
|
One reason this connection might fail is your account being over its' limits. You can detect this in the client by binding to the `error` event on the `pusher.connection` object. For example:
|
|
381
381
|
|
|
382
382
|
```js
|
|
383
|
-
const pusher = new
|
|
383
|
+
const pusher = new Pusher('app_key', { cluster: APP_CLUSTER });
|
|
384
384
|
pusher.connection.bind( 'error', function( err ) {
|
|
385
385
|
if( err.data.code === 4004 ) {
|
|
386
386
|
log('Over limit!');
|
|
@@ -482,12 +482,12 @@ channel.bind('new-message', function (data) {
|
|
|
482
482
|
});
|
|
483
483
|
```
|
|
484
484
|
|
|
485
|
-
We can also provide the `this` value when calling a handler as a third optional parameter. The following logs "hi
|
|
485
|
+
We can also provide the `this` value when calling a handler as a third optional parameter. The following logs "hi Pusher" when "my-event" is fired.
|
|
486
486
|
|
|
487
487
|
```js
|
|
488
488
|
channel.bind('my-event', function () {
|
|
489
489
|
console.log(`hi ${this.name}`);
|
|
490
|
-
}, { name: '
|
|
490
|
+
}, { name: 'Pusher' });
|
|
491
491
|
```
|
|
492
492
|
|
|
493
493
|
For client-events on presence channels, bound callbacks will be called with an additional argument. This argument is an object containing the `user_id` of the user who triggered the event
|
|
@@ -572,7 +572,7 @@ pusher.connection.bind('state_change', function(states) {
|
|
|
572
572
|
|
|
573
573
|
## Connection Events
|
|
574
574
|
|
|
575
|
-
To listen for when you connect to
|
|
575
|
+
To listen for when you connect to Pusher Channels:
|
|
576
576
|
|
|
577
577
|
```js
|
|
578
578
|
pusher.connection.bind('connected', callback);
|
|
@@ -608,7 +608,7 @@ Minified files should have `.min` in their names, as in the `dist/web` directory
|
|
|
608
608
|
|
|
609
609
|
## SockJS compatibility
|
|
610
610
|
|
|
611
|
-
Most browsers have a limit of 6 simultaneous connections to a single domain, but Internet Explorer 6 and 7 have a limit of just 2. This means that you can only use a single
|
|
611
|
+
Most browsers have a limit of 6 simultaneous connections to a single domain, but Internet Explorer 6 and 7 have a limit of just 2. This means that you can only use a single Pusher Channels connection in these browsers, because SockJS requires an HTTP connection for incoming data and another one for sending. Opening the second connection will break the first one as the client won't be able to respond to ping messages and get disconnected eventually.
|
|
612
612
|
|
|
613
613
|
All other browsers work fine with two or three connections.
|
|
614
614
|
|
package/package.json
CHANGED