From b84678a8ab186e7b6038a74f14b7f993369a693f Mon Sep 17 00:00:00 2001
From: Minhao Qiu <minhao.qiu@fau.de>
Date: Tue, 24 Sep 2019 17:29:44 +0200
Subject: [PATCH] add web socket io demo

---
 app_9/__pycache__/app.cpython-36.pyc | Bin 0 -> 782 bytes
 app_9/app.py                         |  26 ++++++++++++++++++++++++++
 app_9/static/js/index.js             |  26 ++++++++++++++++++++++++++
 app_9/templates/index.html           |  16 ++++++++++++++++
 4 files changed, 68 insertions(+)
 create mode 100644 app_9/__pycache__/app.cpython-36.pyc
 create mode 100644 app_9/app.py
 create mode 100644 app_9/static/js/index.js
 create mode 100644 app_9/templates/index.html

diff --git a/app_9/__pycache__/app.cpython-36.pyc b/app_9/__pycache__/app.cpython-36.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..36157c048ca7cee25fb7a9fac47caf3e442510db
GIT binary patch
literal 782
zcmXr!<>i_x-5L9ik%8ec0}^0nU|?`yU|=Yo#K6Fi!jQt4!w?0b8KW3e7*d#Wm~xq;
zm~&a8SaMmTSaaE;*cd_b%sK4298ny(oKc*N45`eiT+NJ8+^Gy%JSi;AjH%pNyeTX;
z45=Kc+|7(pe5u@7{3)!>j45m>>@5t<j8Ouqd|84i9L<a=oGDyj5usGB6z*)MqP|qV
zEMbr?Murr|U<OT|mmtUbX|mj6b<0UC&c4N-Rh*xfnO1p=zbG{?CABENBsI4nC$S{;
z7JE@@VQFe{i6+x6j^O;{?9>uZ|644nxtS%mxPo1sgIq)6y<H=JG3qCSjD%q(1_lOa
zPylc+Fff!bq%byvtYz}6;>yfRNv+V!D9O#yWGrG~U|?9uP{hT+03m+q=x5~Trt0Tr
z=4B-2>$~J9m*%GCl@#kI7n>UBmZv7^Cl(aMTY^Zvg34R0V8ggU_JAy8U@GEaU|^`?
zE-p>V%`8zU%P&byW`sHkq<|IXDmexQh8l(xMoETR#uA1UrWD2+#!SW(<`kA*W>7=~
zGib8<-Qp}x%}Grz$;{8I;!VuU%P-AKP6ZnpqRDuRGpQ&)F(o;%xI~k&h@F9fL6hkg
zOG;u%Vi7OQHxPe;oOg=_<Q9IALqT3<VB%mb5@29pxWy44pPQJO7ay-Fa*HXyIEn)r
z+Qqk6(?AhZ1afu}C^><{stDwRC_b=Md@(pSGV_brKo)|W05UEwF*h|n{uXm$LBTDy
z^wg5nys}$t$@zI{ndwm+FfF%Oi}FiLQo+G>izz=3;uz+l(maTp;So{<c0GqpZhlH>
iPO2R!FpEVP7#KJhIhZ6E1(-M(1sFM)gjj@FIT!&DSi8Rf

literal 0
HcmV?d00001

diff --git a/app_9/app.py b/app_9/app.py
new file mode 100644
index 0000000..74ada1a
--- /dev/null
+++ b/app_9/app.py
@@ -0,0 +1,26 @@
+import os
+import requests
+
+from flask import Flask, jsonify, render_template, request
+from flask_socketio import SocketIO, emit
+
+app = Flask(__name__)
+app.config["SECRET_KEY"] = os.getenv("SECRET_KEY")
+socketio = SocketIO(app)
+
+# A list which is used to save the history vote
+history = []
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+@socketio.on('submit vote')
+def vote(data):
+    selection = data["selection"]
+    history.append("selection: " + selection)
+    emit('announce vote', {"selection": selection}, broadcast=True)
+    print(history)
+
+if __name__ == '__main__':
+    socketio.run(app)
\ No newline at end of file
diff --git a/app_9/static/js/index.js b/app_9/static/js/index.js
new file mode 100644
index 0000000..3f403d9
--- /dev/null
+++ b/app_9/static/js/index.js
@@ -0,0 +1,26 @@
+ 
+document.addEventListener('DOMContentLoaded', () => {
+
+    // Connect to websocket
+    var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);
+
+    // When connected, configure buttons
+    socket.on('connect', () => {
+
+        // Each button should emit a "submit vote" event
+        document.querySelectorAll('button').forEach(button => {
+            button.onclick = () => {
+                const selection = button.dataset.vote;
+                socket.emit('submit vote', {'selection': selection});
+            };
+        });
+    });
+
+    // When a new vote is announced, add to the unordered list
+    socket.on('announce vote', data => {
+        const li = document.createElement('li');
+        li.innerHTML = `Vote recorded: ${data.selection}`;
+        document.querySelector('#votes').append(li);
+    });
+
+});
\ No newline at end of file
diff --git a/app_9/templates/index.html b/app_9/templates/index.html
new file mode 100644
index 0000000..09b764c
--- /dev/null
+++ b/app_9/templates/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
+        <script src="{{ url_for('static', filename='js/index.js') }}"></script>
+        <title>Vote</title>
+    </head>
+    <body>
+        <ul id="votes">
+        </ul>
+        <hr>
+        <button data-vote="yes">Yes</button>
+        <button data-vote="no">No</button>
+        <button data-vote="maybe">Maybe</button>
+    </body>
+</html>
\ No newline at end of file
-- 
GitLab