Skip to content

Commit 8c8556e

Browse files
mattheworiordanmattheworiordan
committed
Step 3 - Setup server & placeholder HTML app
1 parent c971a70 commit 8c8556e

File tree

5 files changed

+117
-1
lines changed

5 files changed

+117
-1
lines changed

‎example.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,19 @@
11
const Ably = require('ably');
2+
const Express = require('express');
3+
const ServerPort = 3000;
24

35
const ApiKey = 'INSERT-YOUR-API-KEY-HERE'; /* Add your API key here */
46
if (ApiKey.indexOf('INSERT') === 0) { throw('Cannot run without an API key. Add your key to example.js'); }
57

68
/* Instance the Ably library */
79
var rest = new Ably.Rest({ key: ApiKey });
10+
11+
/* Start a web server */
12+
var express = require('express');
13+
var app = express();
14+
15+
/* Server static HTML files from /public folder */
16+
app.use(express.static('public'));
17+
app.listen(3000);
18+
19+
console.log('Web server listening on port', ServerPort);

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"start": "node ./example.js"
1212
},
1313
"dependencies": {
14-
"ably": ">=0.9.0-beta"
14+
"ably": ">=0.9.0-beta",
15+
"express": ">=4.14.0"
1516
}
1617
}

‎public/app.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
$(function() {
2+
var $askButton = $('#ask-btn');
3+
$askButton.on('click', function() {
4+
alert("Not yet implemented");
5+
});
6+
});

‎public/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<html>
2+
<head>
3+
<title>Ably Reactor Queue and Wolfram Alpha demo</title>
4+
<link rel="stylesheet" type="text/css" href="style.css">
5+
<script src="//code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
6+
<script type="text/javascript" src="app.js"></script>
7+
</head>
8+
<body>
9+
<h1>Wolfram Alpha</h1>
10+
<div class="col">
11+
<h2>Questions</h2>
12+
<textarea id="question" placeholder="Type a question such as 'How far is Venus from Earth'"></textarea>
13+
<button id="ask-btn">Ask Wolfram</button><span id="status"></span>
14+
<p>
15+
Pressing this button will publish a message to a channel, which will in turn using an <a href="https://www.ably.io/reactor">Ably Reactor Queue</a> rule to republish the message into a queue. The node.js worker server will then consume this message in real time, send the question to Wolfram Alpha using its REST API, and publish the answer back to the client using an Ably channel.
16+
</p>
17+
</div>
18+
<div class="col">
19+
<h2>Answers</h2>
20+
<div id="answer-images"></div>
21+
</div>
22+
</body>
23+
</html>

‎public/style.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
body {
2+
font-family: Arial, Helvetica, sans-serif;
3+
font-size: 0.85em;
4+
}
5+
6+
h2 {
7+
font-size: 1.2em;
8+
}
9+
10+
.col {
11+
width: 50%;
12+
float: left;
13+
box-sizing: border-box;
14+
padding: 0 1em;
15+
}
16+
17+
textarea#question {
18+
width: 100%;
19+
height: 4em;
20+
margin-bottom: 1em;
21+
}
22+
23+
img {
24+
box-shadow: 0 0 0.5em #bbb;
25+
margin-bottom: 1.5em;
26+
}
27+
28+
#status {
29+
color: orange;
30+
padding-left: 1em;
31+
}
32+
33+
button {
34+
-moz-box-shadow: 0px 1px 0px 0px #fff6af;
35+
-webkit-box-shadow: 0px 1px 0px 0px #fff6af;
36+
box-shadow: 0px 1px 0px 0px #fff6af;
37+
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
38+
background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
39+
background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
40+
background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
41+
background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
42+
background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
43+
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
44+
background-color:#ffec64;
45+
-moz-border-radius:6px;
46+
-webkit-border-radius:6px;
47+
border-radius:6px;
48+
border:1px solid #ffaa22;
49+
display:inline-block;
50+
cursor:pointer;
51+
color:#333333;
52+
font-family:Arial;
53+
font-size:15px;
54+
font-weight:bold;
55+
padding:6px 24px;
56+
text-decoration:none;
57+
text-shadow:0px 1px 0px #ffee66;
58+
}
59+
60+
button:hover {
61+
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
62+
background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
63+
background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
64+
background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
65+
background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
66+
background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
67+
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
68+
background-color:#ffab23;
69+
}
70+
71+
button:active {
72+
position:relative;
73+
top:1px;
74+
}

0 commit comments

Comments
 (0)