first commit

Bacto · Bacto · commit f49b95665ac4 · 2018-12-17T11:12:22.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,7 @@
+.DS_Store
+*.log
+node_modules/
+yarn.lock
+package-lock.json
+tests/
+.env
diff --git a/README.md b/README.md
@@ -0,0 +1,26 @@
+# Mercure Hub: getting started
+
+![Screenshot](./screenshot.png)
+
+First you have to create a Mercure Hub service on Stackhero.
+
+In Stackhero's configuration, allow "anonymous subscribers" to let the client connect to topics without authentication.
+
+
+## Back end
+
+Fill the configuration informations in `backend/.env-example` and rename the file to `.env`.
+Then start the server with `npm run start`.
+
+
+## Front end
+
+In `frontend/susbcriber.html`, fill the `endpoint` (domain name of Stackhero's service).
+
+Then open the file `susbcriber.html` in your browser.
+
+The back end code will send datas every seconds to the Mercure Hub, on a the topic `/books/1`.
+The frond end will listen datas from the topic `/books/1` and display them.
+
+
+Congratulations, you have a Mercure Hub up and running! 🎉
diff --git a/backend/.env-example b/backend/.env-example
@@ -0,0 +1,2 @@
+MERCURE_SERVER=XXXXX.stackhero-network.com
+MERCURE_PUBLISHER_JWT_KEY=XXXXXXXXXXXXXXX
diff --git a/backend/app.js b/backend/app.js
@@ -0,0 +1,51 @@
+require('dotenv').config()
+const jwt = require('jsonwebtoken');
+const request = require('request-promise-native');
+const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+if (!process.env.MERCURE_PUBLISHER_JWT_KEY) {
+  throw Error('You should first fill the .env-example file and the rename it to .env');
+}
+
+console.log('You should open the file subscriber.html to see the datas being dispatched.');
+
+const endpoint = process.env.MERCURE_SERVER;
+const publisherJwtKey = process.env.MERCURE_PUBLISHER_JWT_KEY;
+
+(async () => {
+  while (true) {
+    // Defining the topic where we want to dispatch the new data
+    const topic = `https://${endpoint}` + '/books/1';
+
+    // Defining a random stock count and prepare the data
+    const stockCount = Math.floor(Math.random() * (100 - 1) + 1);
+    const data = { topic, stockCount, available: true };
+
+
+    // Generating the bearer (JWT)
+    const bearer = jwt.sign(
+      { mercure: { publish: [ topic ] } },
+      publisherJwtKey,
+      { expiresIn: 60 } // Bearer expiring in one minute
+    );
+
+
+    // Sending the datas to Mercure Hub that will dispatch them to clients
+    console.log(`Sending datas: ${JSON.stringify(data)}`);
+    await request.post(
+      {
+        url: `https://${endpoint}/hub`,
+        auth: { bearer },
+        form: { topic, data: JSON.stringify(data) },
+        agentOptions: { rejectUnauthorized: false } // Just for debug, should always be set to true or commented!
+      }
+    );
+
+    await delay(1000);
+  }
+})().catch(error => {
+  console.error('');
+  console.error('🐞 An error occurred!');
+  console.error(error);
+  process.exit(1);
+});
diff --git a/backend/package.json b/backend/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "code-examples",
+  "version": "1.0.0",
+  "main": "app.js",
+  "license": "MIT",
+  "dependencies": {
+    "dotenv": "^6.2.0",
+    "jsonwebtoken": "^8.4.0",
+    "request": "^2.88.0",
+    "request-promise-native": "^1.0.5"
+  },
+  "scripts": {
+    "start": "node app.js"
+  }
+}
diff --git a/frontend/book.jpg b/frontend/book.jpg
diff --git a/frontend/subscriber.html b/frontend/subscriber.html
@@ -0,0 +1,36 @@
+<html>
+<head>
+  <title>Mercure Hub subscriber example on Stackhero.io</title>
+</head>
+<body>
+  <div id="main" style="font-size: 30px; text-align: center;">Connection...</div>
+
+  <script type="application/javascript">
+    const endpoint = 'XXXXXX.stackhero-network.com'; // PUT YOUR SERVER URL
+
+    const url = new URL('https://' + endpoint + '/hub');
+    const main = document.getElementById('main');
+
+    // Add topics to listen to
+    url.searchParams.append('topic', `https://${endpoint}` + '/users/1234');
+    url.searchParams.append('topic', `https://${endpoint}` + '/books/1');
+
+    // Start SSE
+    const eventSource = new EventSource(url);
+
+    eventSource.onerror = e => {
+      console.error(e);
+      main.innerHTML = 'Error when connecting to Mercure Hub ' + endpoint + '. Did you allowed anonymous subscribers on Stackhero\'s console?';
+    }
+
+    eventSource.onopen = () => main.innerHTML = 'Waiting for datas... You should start the Node.js script (npm run start)';
+
+    // The callback will be called every time an update is published
+    eventSource.onmessage = e => {
+      const data = JSON.parse(e.data);
+      console.log(data);
+      main.innerHTML = '<img src="book.jpg" style="height: 200px"><br /><br />Current stock: ' + data.stockCount + ' books';
+    }
+  </script>
+</body>
+</html>
diff --git a/screenshot.png b/screenshot.png

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+MERCURE_SERVER=XXXXX.stackhero-network.com`
	`2`	`+MERCURE_PUBLISHER_JWT_KEY=XXXXXXXXXXXXXXX`