vibitno
/
pusher-client-example
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Commiting example Pusher client with private channels

This commit is contained in:
Alex Wright 2019-09-30 15:48:55 +02:00
commit bff90358f3
1 changed files with 90 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
www/html/index.html Normal file
View File

@ -0,0 +1,90 @@
<!DOCTYPE html>
<html>
<head>
<title>Pusher Test</title>
</head>
<body>
<h1>Pusher Test</h1>
<p>
<form onSubmit="submit">
<input type="text" required name="token" placeholder="Paste your vibitno api auth token"
value="eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjFiMWY5NWE1NmZhNTQ0ZDYyODYzZWFhNmE4N2FhMDA1MjQzMzIzM2RkOGIwOTNlY2MwZTJjMDEzZmU1OTA0NTg1YjFmODRmZWE4OTY5MTRjIn0.eyJhdWQiOiI1IiwianRpIjoiMWIxZjk1YTU2ZmE1NDRkNjI4NjNlYWE2YTg3YWEwMDUyNDMzMjMzZGQ4YjA5M2VjYzBlMmMwMTNmZTU5MDQ1ODViMWY4NGZlYTg5NjkxNGMiLCJpYXQiOjE1NjkwMTYyMzksIm5iZiI6MTU2OTAxNjIzOSwiZXhwIjoxNjAwNjM4NjM5LCJzdWIiOiIyMjYiLCJzY29wZXMiOltdfQ.Z5nLzRLOXuL8A5pMGKvOoMyMmaJz4tH1rwTkopXFtREaZhRyd7gZ7tv6FyC2HFQqGleOcw023GyeyuMZHk9sK37_XxxDZRKSyKbIjHSQxuktD1HOHyN9nu38i4uSaTf5MLvbrq1ImO4JYzd2vF4nfMNM2Q-Wyc-4ctfWpIjFyn8zTxWHmlR7xrODVevxQ5VI-4YjOX-N_VaQTGC8IXvqojmbCj-hk-pu826xkIdgn_VM3N6nZWLEXppe8QXbRiVj2YSmtf__K_XJr3ESiTyzvC8U9lmIRwcrjMyWZOSR1pp0KvIVqe4BMdTkGhnzoXuJoauopICQZYxuexPOt7X59SHv5FsBWfsupahWM89avVui00oILT9f5WW_QcMsp2UFB_EWTUvTL3xxgyXcuNWt-odJFYYl3B5UeKQhhFqiqbelvvWld-vKvQfwvTQgAjRo4rB2VGdNp0RoQPuAFY6DxhJNhi3uL-yjiDKBTVXS1t7DeFTUTnf9lTN8jMwfbg8a5qDYFg67tf1ruKzEoUZj9GOwcgw7pT5ExzEzuVlvW3oVCXWrlrN2hymMg5MFJxepCTpUVxO4RlEMhdObperG4GAWmSxyTP3nZQezFY-R-PvlTqgYX3n1vZUmQDg65JiLefCS-d5OQZ5fDiCAlamw9iSJsl_feO1XN4D4l0CChYs"
/>
<button type="submit">
Connect
</button>
</form>
</p>
<script src="https://js.pusher.com/5.0/pusher.min.js"></script>
<script>
const apiServerAddr = 'api.vibitno.io';
// const apiServerAddr = 'vibitno-api.xeen.dev';
const userEndpoint = `https://${apiServerAddr}/api/user`;
const authEndpoint = `https://${apiServerAddr}/api/broadcasting/auth`;
const pusherInfo = {
appKey: 'd23c11c08060681b4785',
};
/*
()(userInfo, pusherInfo.appKey);
*/
(function (form) {
function connect(userInfo, pusherKeyId) {
// Message types
const messageAvailable = 'message-available';
const messageUpdated = 'message-updated';
const newUserOnboarded = 'new-user';
const subscriptionSucceeded = 'pusher:subscription_succeeded';
// Channel Names
const accountChannelName = `private-account-${userInfo.accountId}`;
const userChannelName = `private-user-${userInfo.userId}`;
// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;
const pusher = new Pusher(pusherKeyId, {
cluster: 'mt1',
forceTLS: true,
authEndpoint,
auth: {
headers: {
'Authorization': `Bearer ${userInfo.accessToken}`,
},
},
});
// Subscribe to account-wide events
const accountChannel = pusher.subscribe(accountChannelName);
accountChannel.bind(subscriptionSucceeded, () => console.log('account sub ok'));
accountChannel.bind(newUserOnboarded, ({ userId, userName }) => alert(`New User: ${userName}`));
// Subscribe to user-specific events
const userChannel = pusher.subscribe(userChannelName);
userChannel.bind(messageAvailable, ({ messageId }) => alert(`New message with Id: ${messageId}`));
userChannel.bind(subscriptionSucceeded, () => console.log('user sub ok'));
}
function fetchUserInfo(token) {
return fetch(userEndpoint, { headers: { 'Authorization': `Bearer ${token}` } })
.then(response => response.json())
.then(userInfo => ({
userId: userInfo.id,
accountId: userInfo.accounts[0].id,
accessToken: token,
}));
}
function submit(ev) {
ev.preventDefault();
const form = ev.target;
const token = form.querySelector('[type=text]').value;
fetchUserInfo(token)
.then(userInfo => connect(userInfo, pusherInfo.appKey));
form.parentNode.removeChild(form);
}
form.addEventListener('submit', submit);
})(document.querySelector('form'));
</script>
</body>
</html>