91 lines
4.1 KiB
HTML
91 lines
4.1 KiB
HTML
|
<!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>
|