/
san-francisco-511.html
117 lines (92 loc) · 3.47 KB
/
san-francisco-511.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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<!-- include streamdataio library -->
<script src="https://cdn.rawgit.com/streamdataio/streamdataio-js-sdk/master/dist/bundles/streamdataio.min.js"></script>
<!-- use json-patch-duplex library for applying patches -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fast-json-patch/0.5.1/json-patch-duplex.min.js"></script>
</head>
<body>
<h1>Streamdata.io - Real Time 511 Data Prototype</h1>
<p>This is a listing of traffic events from the <a href="http://511.org/developers/list/apis/">511.org API</a>, showing real time event alerts from the San Francisco, CA / Bay Area. The 511.org API is proxied using <a href="https://streadata.io">Streamdata.io</a> which employs <a href="https://en.wikipedia.org/wiki/Server-sent_events">Server-Sent Events (SSE)</a> to push updates to the browser, which then polls the API every minute looking for updates--if any updates are received, they are delivered to the browser using <a href="https://tools.ietf.org/html/rfc6902">JSON Patch</a>, and rendered to the screen.</p>
<div id="checked" style="text-align:center;"></div>
<hr>
<div id="alerts"></div>
<hr>
<script>
function sortByKey(array, key) {
return array.sort(function(a, b) {
var x = a[key];
var y = b[key];
return ((x > y) ? -1 : ((x < y) ? 1 : 0));
});
}
function processResults(results)
{
var table = document.createElement("table");
results.forEach(function(entry) {
thisdate = entry.updated;
thisdate = new Date(thisdate);
thisdate = (thisdate.getMonth() + 1) + "/" + thisdate.getDate() + "/" + thisdate.getFullYear() + ' ' + thisdate.getHours() + ":" + thisdate.getMinutes() + ' ';
var tr = document.createElement("tr");
var td = document.createElement("tr");
var text = document.createTextNode(thisdate);
td.appendChild(text);
tr.appendChild(td);
var text = document.createTextNode(entry.headline);
td.appendChild(text);
tr.appendChild(td);
table.appendChild(tr);
});
document.getElementById('alerts').innerHTML = '';
document.getElementById("alerts").appendChild(table);
}
(function() {
var eventSource = null;
var stocks = [];
var checked = 1;
function connect() {
// REPLACE WITH YOUR OWN TOKEN HERE
var appToken = "Y2U4ZThkNmYtZDUzOS00OTE5LWE3YzQtOGNiZTk4YzRjMjhl";
// create the StreamdataEventSource Object
eventSource = streamdataio.createEventSource("http://api.511.org/Traffic/Events", appToken);
eventSource
.onOpen(function() {
console.log("streamdata Event Source connected.")
})
.onData(function(data) {
results = sortByKey(data.events, 'updated');
processResults(results);
document.getElementById('checked').innerHTML = "Updated " + checked + ' time!';
})
.onPatch(function(patch) {
// use json patch library to apply the patch (patch)
// to the original snapshot (stocks)
console.log("udate!");
results = patch.events;
if(results)
{
results = sortByKey(results, 'updated');
processResults(results);
}
checked++;
document.getElementById('checked').innerHTML = "Updated " + checked + ' times!';
})
.onError(function(error) {
// displays the error message
console.log(error.getMessage());
});
// open the data stream to the REST service through streamdata.io proxy
eventSource.open();
};
function disconnect() {
if (eventSource) {
eventSource.close();
eventSource = null;
}
};
connect();
})();
</script>
</body>
</html>