Skip to content

Commit a7cf77b

Browse files
vvakamevvakame
committed
Merge pull request DefinitelyTyped#5907 from tkqubo/pusher-js
Add pusher-js
2 parents 7819b83 + ac220e3 commit a7cf77b

File tree

2 files changed

+584
-0
lines changed

2 files changed

+584
-0
lines changed

‎pusher-js/pusher-js-tests.ts

Lines changed: 353 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,353 @@
1+
/// <reference path="pusher-js.d.ts" />
2+
3+
import Pusher = require('pusher-js');
4+
import { PresenceChannel } from "pusher-js";
5+
6+
var API_KEY: string;
7+
var pusher: Pusher.Pusher;
8+
9+
//
10+
// Configuration
11+
//
12+
13+
pusher = new Pusher(API_KEY, {
14+
authEndpoint: "http://example.com/pusher/auth"
15+
});
16+
17+
pusher = new Pusher(API_KEY, {
18+
auth: {
19+
params: { foo: "bar" },
20+
headers: { baz: "boo" }
21+
}
22+
});
23+
24+
pusher = new Pusher(API_KEY, {
25+
auth: {
26+
params: { foo: "bar" },
27+
headers: { "X-CSRF-Token": "SOME_CSRF_TOKEN" }
28+
}
29+
});
30+
31+
pusher = new Pusher(API_KEY, { cluster: "eu" });
32+
33+
pusher = new Pusher(API_KEY, { enabledTransports: ["ws"] });
34+
35+
pusher = new Pusher(API_KEY, { disabledTransports: ["sockjs"] });
36+
37+
// will only use WebSockets
38+
pusher = new Pusher(API_KEY, {
39+
enabledTransports: ["ws", "xhr_streaming"],
40+
disabledTransports: ["xhr_streaming"]
41+
});
42+
43+
//
44+
// Connection
45+
//
46+
47+
var socket: Pusher.Pusher;
48+
var my_channel: Pusher.Channel;
49+
var channels: Pusher.Channel[];
50+
51+
socket = new Pusher(API_KEY);
52+
53+
//
54+
// Subscribing to channels
55+
//
56+
57+
my_channel = socket.subscribe('my-channel');
58+
59+
my_channel = socket.subscribe('private-my-channel');
60+
61+
channels = socket.allChannels();
62+
console.group('Pusher - subscribed to:');
63+
for (var i = 0; i < channels.length; i++) {
64+
var channel = channels[i];
65+
console.log(channel.name);
66+
}
67+
console.groupEnd();
68+
69+
my_channel = socket.subscribe('my-channel');
70+
socket.bind('new-comment',
71+
function(data: any) {
72+
// add comment into page
73+
}
74+
);
75+
76+
var channel: Pusher.Channel;
77+
78+
var context = { title: 'Pusher' };
79+
var handler = function(){
80+
console.log('My name is ' + this.title);
81+
};
82+
channel.bind('new-comment', handler, context);
83+
84+
channel.unbind('new-comment', handler); // removes just `handler` for the `new-comment` event
85+
channel.unbind('new-comment'); // removes all handlers for the `new-comment` event
86+
channel.unbind(null, handler); // removes `handler` for all events
87+
channel.unbind(null, null, context); // removes all handlers for `context`
88+
channel.unbind(); // removes all handlers on `channel`
89+
90+
91+
//
92+
//
93+
// Samples from Pusher Documentation
94+
//
95+
//
96+
97+
//
98+
// JavaScript Quick Start Guide
99+
//
100+
101+
channel.bind('my-event', function(data: any) {
102+
alert('An event was triggered with message: ' + data.message);
103+
});
104+
105+
//
106+
// Client API Overview
107+
//
108+
109+
var options: Pusher.Config;
110+
111+
var channelName: string;
112+
var privateChannelName: string;
113+
var presenceChannelName: string;
114+
var add_member: Function;
115+
var remove_member: Function;
116+
var update_member_count: Function;
117+
var eventName: string;
118+
var callback: Function;
119+
var applicationKey: string;
120+
var log: Function;
121+
var $: any;
122+
var data: any;
123+
124+
// Connecting to Pusher
125+
126+
pusher = new Pusher(applicationKey, options);
127+
128+
options = {
129+
encrypted: true, // true/false
130+
auth: {
131+
params: { // {key: value} pairs
132+
param1: 'value1',
133+
param2: 'value2'
134+
},
135+
headers: { // {key: value} pairs
136+
header1: 'value1',
137+
header2: 'value2'
138+
}
139+
}
140+
};
141+
142+
pusher = new Pusher('app_key', {
143+
auth: {
144+
params: {
145+
CSRFToken: 'some_csrf_token'
146+
}
147+
}
148+
});
149+
150+
pusher = new Pusher('app_key', {
151+
auth: {
152+
headers: {
153+
'X-CSRF-Token': 'some_csrf_token'
154+
}
155+
}
156+
});
157+
158+
pusher = new Pusher('app_key', { cluster: 'eu' });
159+
160+
pusher = new Pusher('app_key', { encrypted: true } );
161+
162+
pusher = new Pusher('app_key');
163+
pusher.connection.bind( 'error', function( err: any ) {
164+
if( err.data.code === 4004 ) {
165+
log('>>> detected limit error');
166+
}
167+
});
168+
169+
// Disconnecting from Pusher
170+
171+
pusher.disconnect();
172+
173+
// Connection States
174+
175+
pusher = new Pusher('YOUR_APP_KEY');
176+
177+
pusher.connection.bind('connected', function() {
178+
$('div#status').text('Real time is go!');
179+
});
180+
181+
pusher.connection.bind('connecting_in', function(delay: any) {
182+
alert("I haven't been able to establish a connection for this feature. " +
183+
"I will try again in " + delay + " seconds.")
184+
});
185+
186+
pusher.connection.bind('state_change', function(states: any) {
187+
// states = {previous: 'oldState', current: 'newState'}
188+
$('div#status').text("Pusher's current state is " + states.current);
189+
});
190+
191+
var connectionState: string = pusher.connection.state;
192+
193+
// Accessing channels
194+
195+
channel = pusher.channel(channelName);
196+
197+
// Public channels
198+
199+
channel = pusher.subscribe(channelName);
200+
201+
pusher.unsubscribe(channelName);
202+
203+
// Private channels
204+
205+
var privateChannel = pusher.subscribe(privateChannelName);
206+
207+
// Presence channels
208+
209+
var presenceChannel: PresenceChannel<any> = <any>pusher.subscribe(presenceChannelName);
210+
211+
var count: number = presenceChannel.members.count;
212+
213+
presenceChannel.members.each(function(member: Pusher.UserInfo<any>) {
214+
var userId = member.id;
215+
var userInfo = member.info;
216+
});
217+
218+
var some_user_id: number;
219+
var user = presenceChannel.members.get(some_user_id);
220+
221+
var me = presenceChannel.members.me;
222+
223+
pusher = new Pusher('app_key');
224+
presenceChannel = <any>pusher.subscribe('presence-example');
225+
presenceChannel.bind('pusher:subscription_succeeded', function() {
226+
var me = presenceChannel.members.me;
227+
var userId = me.id;
228+
var userInfo = me.info;
229+
});
230+
231+
channel = pusher.subscribe('presence-meeting-11');
232+
233+
channel.bind('pusher:subscription_succeeded', function(members: Pusher.Members<any>) {
234+
// for example
235+
update_member_count(members.count);
236+
237+
members.each(function(member) {
238+
// for example:
239+
add_member(member.id, member.info);
240+
});
241+
});
242+
243+
channel.bind('pusher:member_added', function(member: Pusher.UserInfo<any>) {
244+
// for example:
245+
add_member(member.id, member.info);
246+
});
247+
248+
channel.bind('pusher:member_removed', function(member: Pusher.UserInfo<any>) {
249+
// for example:
250+
remove_member(member.id, member.info);
251+
});
252+
253+
// Pusher Events
254+
255+
channel.bind(eventName, callback);
256+
257+
pusher = new Pusher('APP_KEY');
258+
channel = pusher.subscribe('APPL');
259+
channel.bind('new-price',
260+
function(data: any) {
261+
// add new price into the APPL widget
262+
}
263+
);
264+
265+
var context = { title: 'Pusher' };
266+
var handler = function(){
267+
console.log('My name is ' + this.title);
268+
};
269+
channel.bind('new-comment', handler, context);
270+
271+
pusher.bind(eventName, callback);
272+
273+
pusher = new Pusher('APP_KEY');
274+
var channel1 = pusher.subscribe('test_channel_1');
275+
var channel2 = pusher.subscribe('test_channel_2');
276+
var channel3 = pusher.subscribe('test_channel_3');
277+
278+
var eventName = 'new-comment';
279+
callback = function(data: any) {
280+
// add comment into page
281+
};
282+
283+
// listen for 'new-comment' event on channel 1, 2 and 3
284+
pusher.bind(eventName, callback);
285+
286+
// Unbinding from Events
287+
288+
channel.unbind(eventName, callback);
289+
290+
pusher = new Pusher('APP_KEY');
291+
channel = pusher.subscribe('APPL');
292+
callback = function(data: any) {};
293+
channel.bind('new-price', callback);
294+
295+
channel.unbind('new-price', callback);
296+
297+
// Pusher channel events
298+
299+
channel.bind('pusher:subscription_succeeded', function() {
300+
});
301+
302+
pusher = new Pusher('APP_KEY');
303+
channel = pusher.subscribe('private-channel');
304+
channel.bind('pusher:subscription_error', function(status: number) {
305+
if(status == 408 || status == 503){
306+
// retry?
307+
}
308+
});
309+
310+
// Triggering Client Events
311+
312+
var triggered = channel.trigger(eventName, data);
313+
pusher = new Pusher('YOUR_APP_KEY');
314+
channel = pusher.subscribe('private-channel');
315+
channel.bind('pusher:subscription_succeeded', function() {
316+
var triggered = channel.trigger('client-someeventname', { your: data });
317+
});
318+
319+
// Best practice when sending client events
320+
321+
var outputEl = document.getElementById('client_event_example_log');
322+
var state: any = {
323+
currentX: 0,
324+
currentY: 0,
325+
lastX: undefined,
326+
lastY: undefined
327+
};
328+
329+
pusher = new Pusher("YOUR_APP_KEY");
330+
channel = pusher.subscribe("private-mousemoves");
331+
332+
// this method should be bound as a 'mousemove' event listener
333+
document.body.addEventListener('mousemove', onMouseMove, false);
334+
function onMouseMove(ev: any){
335+
ev = ev || window.event;
336+
state.currentX = ev.pageX || ev.clientX;
337+
state.currentY = ev.pageY || ev.clientY;
338+
}
339+
340+
setInterval(function(){
341+
if(state.currentX !== state.lastX || state.currentY !== state.lastY){
342+
state.lastX = state.currentX;
343+
state.lastY = state.currentY;
344+
345+
var text = document.createTextNode(
346+
'Triggering event due to state change: x: ' + state.currentX + ', y: ' + state.currentY
347+
);
348+
outputEl.replaceChild( text, outputEl.firstChild );
349+
350+
channel.trigger("client-mouse-moved", {x:state.currentX, y: state.currentY});
351+
}
352+
}, 300); // send every 300 milliseconds if position has changed
353+

0 commit comments

Comments
 (0)