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