-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathpareto-socket-client.html
207 lines (200 loc) · 11.2 KB
/
pareto-socket-client.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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE HTML>
<html>
<head>
<title>Connect a websocket client to Pareto | diyActive</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="How to connect a websocket client to Pareto to access the real-time contextual data feed on your own server or PC.">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.slim.js"></script>
<script type="text/javascript" src="js/beaver.js"></script>
<script type="text/javascript" src="js/pareto-client.js"></script>
</head>
<body ng-app="websocket">
<div ng-controller="ServiceCtrl">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
ng-init="navCollapsed = true"
ng-click="navCollapsed = !navCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://www.reelyactive.com">
<strong>reely</strong>Active
</a>
</div>
<div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'"
ng-click="navCollapsed = true">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="/"> diyActive </a></li>
<li class="dropdown" uib-dropdown on-toggle="toggled(open)">
<a href class="dropdown-toggle" uib-dropdown-toggle role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Quick links <span class="caret"></span>
</a>
<ul class="dropdown-menu" uib-dropdown-menu role="menu">
<li role="menuitem">
<a href="https://github.com/reelyactive/" target="_blank">
reelyActive on GitHub
</a>
</li>
<li role="menuitem">
<a href="https://www.npmjs.com/~reelyactive" target="_blank">
reelyActive on npmjs
</a>
</li>
<li role="separator" class="divider"></li>
<li role="menuitem">
<a href="https://www.reelyactive.com" target="_blank">
reelyActive website
</a>
</li>
<li role="menuitem">
<a href="https://getpareto.com" target="_blank">
Pareto by reelyActive
</a>
</li>
<li role="separator" class="divider"></li>
<li role="menuitem">
<a href="https://shop.reelyactive.com" target="_blank">
Our online store
</a>
</li>
<li role="menuitem">
<a href="https://reelyactive.com/blog/" target="_blank">
Our blog
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
<h1>
Connect a websocket client to Pareto <br>
<small> Access the real-time contextual data feed on your own server or PC </small>
</h1>
<p> Have a Pareto account and want to access the real-time contextual data feed on your own server or PC to build your own application? You're in the right place. Here we'll show you how to generate an API token and connect a socket.io client to Pareto. We'll also show how you can feed the data into a local instance of our open source hlc-server which provides additional features and APIs. </p>
<h2> Wait, what's Pareto? </h2>
<img src="images/pareto-by-reelyactive.jpg"
class="img-responsive center-block"><br>
<p> Pareto is our enterprise cloud platform which provides the convenience and scalability of SaaS. </p>
<p class="text-center">
<a class="btn btn-primary" href="https://getpareto.com"
target="_blank" role="button"> Visit getpareto.com </a>
<a class="btn btn-default" href="https://pareto.reelyactive.com"
target="_blank" role="button"> Log in to your account </a>
</p>
<h2> Generate an API token </h2>
<p> From your Pareto dashboard, navigate to the Accounts page which will include the option to generate an API token, as shown below. You'll need this token in the next step. And remember to protect your API token — <i>it's private!</i> </p>
<img src="images/pareto-apiToken.png" class="img-responsive">
<h2> Test your token right here and now </h2>
<p> This webpage includes a Javascript websocket client which will connect to Pareto and display the real-time events below when you connect with your API token. </p>
<form class="form-inline">
<div class="form-group">
<label for="token"> Token:</label>
<input type="text" class="form-control" id="token" size="32"
ng-model="token" placeholder="{{placeholder}}">
</div>
<button type="submit" class="btn btn-warning"
ng-click="connect(token)">Connect</button>
<button ng-show="connected" ng-click="toggle()"
ng-class="paused ? 'btn btn-success' : 'btn btn-primary'">
{{paused ? 'Resume' : 'Pause'}}
</button>
</form>
<div ng-if="connected">
<p> </p>
<table class="table table-hover">
<caption> MOST RECENT EVENT </caption>
<thead>
<tr>
<th> Property </th>
<th> Value </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(property, value) in currentEvent">
<td>{{property}}</td>
<td><tt>{{value}}</tt></td>
</tr>
</tbody>
</table>
</div>
<h2> Create and run a socket.io client </h2>
<p> You can create a socket.io client in a few lines of code using Node.js (which if you don't have installed, you can <a href="https://nodejs.org" target="_blank">download here</a>). Create a file called <b>server.js</b> and paste in the following code, inserting the API token you generated in the previous step: </p>
<pre>
var socketioClient = require('socket.io-client');
var PARETO_TOKEN = 'paste_your_API_token_here';
var PARETO_URL = 'https://pareto.reelyactive.com';
process.env.PARETO_TOKEN = PARETO_TOKEN;
var socket = socketioClient(PARETO_URL, { query: { token: PARETO_TOKEN } });
socket.on('keep-alive', function(event) {
console.log(JSON.stringify(event, null, 2)); // Do something useful here
});
</pre>
<p> From the command line, in the same directory as the <b>server.js</b> file you just created, install the <a href="https://www.npmjs.com/package/socket.io-client" target="_blank">socket.io-client package</a> by running <code>npm install socket.io-client</code>. </p>
<p> Once the installation completes, you can run your code by entering <code>node server.js</code> and should see events output to the console. </p>
<p> In many cases, that might be all you need! Don't forget that you can listen for <i>appearance</i>, <i>displacement</i> and <i>disappearance</i> events in addition to the <i>keep-alive</i> specified in the code above. </p>
<h2> Run a local hlc-server instance </h2>
<p> Our open source hlc-server can ingest the event feed which can in turn be consumed via: </p>
<ul>
<li> REST APIs
<li> a socket.io client — without requiring an API token
<li> visualisations such as the bubblescape
</ul>
<p> Integration is just as easy. Copy the following code into your <b>server.js</b> file, again inserting the API token you generated in the first step: </p>
<pre>
var server = require('hlc-server');
var socketioClient = require('socket.io-client');
var PARETO_TOKEN = 'paste_your_API_token_here';
var PARETO_URL = 'https://pareto.reelyactive.com';
process.env.PARETO_TOKEN = PARETO_TOKEN;
var socket = socketioClient(PARETO_URL, { query: { token: PARETO_TOKEN } });
var app = new server({
barnacles: {
delayMilliseconds: 1, // Respond immediately
historyMilliseconds: 10000, // Add 5 seconds to both to compensate
disappearanceMilliseconds: 15000 // for potential lag between servers
}
});
app.bind( { websocket: socket } );
</pre>
<p> From the command line, in the same directory as the <b>server.js</b> file you just created, install the <a href="https://www.npmjs.com/package/hlc-server" target="_blank">hlc-server package</a> by running <code>npm install hlc-server</code> and the <a href="https://www.npmjs.com/package/socket.io-client" target="_blank">socket.io-client package</a> by running <code>npm install socket.io-client</code>. </p>
<p> Once the installation completes, you can run your code by entering <code>node server.js</code> and then point your browser to <a href="http://localhost:3001" target="_blank">localhost:3001</a>. </p>
<p> The hlc-server will provide a socket.io feed on localhost:3001 which can be consumed by <a href="build-web-apps-with-beaver.html">beaver.js</a> to build custom web applications. </p>
<h2> What's next? </h2>
<p> Learn more about events, build web apps with beaver.js, or return to the diyActive home page. </p>
<p class="text-center">
<a class="btn btn-default" href="event-overview.html"
role="button"> Event data overview </a>
<a class="btn btn-default" href="build-web-apps-with-beaver.html"
role="button"> Build web apps with beaver.js </a>
<a class="btn btn-success" href="/"
role="button"> Return to diyActive </a>
</p>
</div>
</div>
</div>
<footer class="footer">
<a href="/"
uib-tooltip="Do-it-yourself with reelyActive"
tooltip-placement="left"> diyActive </a> |
<a href="https://www.reelyactive.com"
uib-tooltip="We believe in an open Internet of Things"
tooltip-placement="right">
© reelyActive 2017-2018
</a>
</footer>
</div>
</body>
</html>