Use web sockets in demos (exonum#874)

examples/cryptocurrency-advanced/frontend/package.json

@@ -23,13 +23,16 @@
     "big-integer": "^1.6.27",
     "bootstrap": "^4.1.3",
     "exonum-client": "^0.15.0",
+    "express": "^4.16.3",
     "jquery": "^3.3.1",
+    "http-proxy-middleware": "^0.19.0",
     "noty": "^3.2.0-beta",
     "numeral": "^2.0.6",
     "popper.js": "^1.14.3",
     "vue": "^2.5.16",
     "vue-router": "^3.0.1",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "yargs-parser": "^9.0.2"
   },
   "devDependencies": {
     "axios-mock-adapter": "^1.15.0",
@@ -39,18 +42,14 @@
     "babel-loader": "^7.1.5",
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.7.0",
-    "body-parser": "^1.18.2",
     "css-loader": "^0.28.11",
     "eslint": "^4.19.1",
     "eslint-plugin-vue": "^4.4.0",
-    "express": "^4.16.3",
     "jest": "^23.6.0",
     "regenerator-runtime": "^0.12.1",
-    "request": "^2.85.0",
     "vue-loader": "^15.4.2",
     "vue-template-compiler": "^2.5.16",
     "webpack": "^4.20.2",
-    "webpack-cli": "^3.1.1",
-    "yargs-parser": "^9.0.2"
+    "webpack-cli": "^3.1.1"
   }
 }

examples/cryptocurrency-advanced/frontend/server.js

@@ -1,5 +1,5 @@
 var express = require('express');
-var bodyParser = require('body-parser');
+var proxy = require('http-proxy-middleware');
 
 // Initialize application
 var app = express();
@@ -17,17 +17,15 @@ if (typeof apiRoot === 'undefined') {
   throw new Error('--api-root parameter is not set.');
 }
 
-app.set('apiRoot', apiRoot);
-
-// Configure parsers
-app.use(bodyParser.json());
-app.use(bodyParser.urlencoded({extended: true}));
-
 // Set path to static files
 app.use(express.static(__dirname + '/'));
 
-// Activate routers
-var api = require('./routes/api');
-app.use('/api', api);
+// Proxy middleware options
+var apiProxy = proxy({
+  target: apiRoot,
+  ws: true
+});
+
+app.use('/api', apiProxy);
 
 app.listen(port);

examples/cryptocurrency-advanced/frontend/src/pages/Blockchain.vue

@@ -58,6 +58,8 @@
           const data = await this.$blockchain.getBlocks(latest)
           this.blocks = this.blocks.concat(data.blocks)
           this.isSpinnerVisible = false
+          this.webSocket = new WebSocket(`ws://${window.location.host}/api/explorer/v1/blocks/subscribe`)
+          this.webSocket.onmessage = this.handleNewBlock
         } catch (error) {
           this.isSpinnerVisible = false
           this.$notify('error', error.toString())
@@ -66,12 +68,19 @@
 
       loadMore() {
         this.loadBlocks(this.blocks[this.blocks.length - 1].height - 1)
+      },
+
+      handleNewBlock(event) {
+        this.blocks.unshift(JSON.parse(event.data))
       }
     },
     mounted() {
       this.$nextTick(function() {
         this.loadBlocks()
       })
+    },
+    destroyed() {
+      this.webSocket.close()
     }
   }
 </script>