-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
68 lines (65 loc) · 2.04 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<head>
<title>Pusher Test</title>
<head>
<head>
<style>
[v-cloak] {display: none}
/* [v-cloak] > * { display:none }
[v-cloak]::before { content: "loading…" } */
</style>
<body>
<div id="app">
<!--<pre><code>
{{ bin }}
</code></pre> -->
<ul>
<li v-for="(request, index) in bin.requests" v-bind:key="index" class="" v-cloak>
{{ request.id }} - {{ request.time }}
</li>
</ul>
</div>
</body>
<script src="https://js.pusher.com/4.1/pusher.min.js"></script> <!-- Pusher JS -->
<script src="https://vuejs.org/js/vue.min.js"></script> <!-- Vue Production Version -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> <!-- Vue Request Library -->
<script>
const binId = 'ynrxmll'; // TODO: Dynamically Set Bin ID based on route
const apiURL = `http://127.0.0.1:3000/api/bin/${binId}`;
var app2 = new Vue({
el: '#app',
data: {
bin: {},
binRequests: [],
},
created () {
this.subscribe(); // Subscribe to Pusher Channel
this.fetchData(); // Request Bin Data
},
methods: {
subscribe () {
// Pusher.logToConsole = true; // Enable pusher logging - don't include this in production
const pusherAppKey = 'e9a9bffb6fabc04ed457'; // TODO: insert dynamically?
const pusherCluster = 'us2'; // TODO: insert dynamically?
let pusher = new Pusher(pusherAppKey, {
cluster: pusherCluster,
encrypted: true
});
pusher.subscribe(`bin_${binId}`)
pusher.bind('bin-updated', data => {
// The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.
//this.binRequests.unshift(data.binRequest)
this.bin = data.bin;
})
},
fetchData: function() {
this.$http.get(apiURL).then(response => {
this.bin = response.body;
}, response => {
// error callback
});
}
},
})
</script>
</head>