JonnoFTW/_Running.md

## _Running.md

      
    Raw
  

              _Running.md
            
          
Make a folder for the app
Put app.py in the folder
Make a static folder and put index.html in it
Should look like:

lamp/
  app.py
  static/
    index.html


Run:

pip install flask flask-sockets
python app.py

  
## app.py
from flask import Flask
from flask_sockets import Sockets

app = Flask(__name__)
sockets = Sockets(app)

clients = set()


@sockets.route('/echo')
def echo_socket(ws):
    clients.add(ws)
    print("Connection from: ", ws.origin, ws.environ['HTTP_USER_AGENT'])
    while not ws.closed:
        message = ws.receive()
        for w in clients:
            try:
                w.send(message)
            except:
                pass
    clients.remove(ws)


@app.route('/')
def index():
    return app.send_static_file('index.html')


if __name__ == '__main__':
    from gevent import pywsgi
    from geventwebsocket.handler import WebSocketHandler
    server = pywsgi.WSGIServer(('localhost', 5000), app, handler_class=WebSocketHandler)
    server.serve_forever()

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"
          integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
            integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"
            integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em"
            crossorigin="anonymous"></script>
    <title>
        Lamp
    </title>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%
        }
        header {
            height: 100%;
        }
        .invis{visibility: hidden}
    </style>
</head>
<body>

<header class="masthead text-center d-flex">
    <div class="container my-auto">
        <div class="row">
            <div class="col-12 mx-auto my-5">
                <button id="btn" role="button" class="btn btn-lg btn-primary">Click Here</button>
            </div>
            <div class="col-12">
                <img id="img" class="invis" src="http://placekitten.com/200/300" class="img-rounded">
            </div>
        </div>
    </div>
</header>
</body>

<script type="text/javascript">

    $(document).ready(function () {
        ws = new WebSocket('ws://' + document.domain + ':5000/echo');
        ws.onmessage = function (event) {
            var data = event.data;
            console.log(data);
            var $img = $('img');
            if (data === "stop") {
                $img.addClass('invis');
            } else {
                $img.removeClass('invis');
            }
        };
        $('#btn').on({
            'touchstart mousedown': function (e) {
                console.log("Press down");
                e.stopPropagation();
                e.preventDefault();
                ws.send("start");
            },
            'touchend mouseup': function (e) {
                console.log("Press up");
                $(this).find('i').removeClass('active');
                e.stopPropagation();
                e.preventDefault();
                ws.send("stop");
            }
        });
    });
</script>
</html>
	from flask import Flask
	from flask_sockets import Sockets

	app = Flask(__name__)
	sockets = Sockets(app)

	clients = set()


	@sockets.route('/echo')
	def echo_socket(ws):
	clients.add(ws)
	print("Connection from: ", ws.origin, ws.environ['HTTP_USER_AGENT'])
	while not ws.closed:
	message = ws.receive()
	for w in clients:
	try:
	w.send(message)
	except:
	pass
	clients.remove(ws)


	@app.route('/')
	def index():
	return app.send_static_file('index.html')


	if __name__ == '__main__':
	from gevent import pywsgi
	from geventwebsocket.handler import WebSocketHandler
	server = pywsgi.WSGIServer(('localhost', 5000), app, handler_class=WebSocketHandler)
	server.serve_forever()
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"
	integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
	integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
	crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
	integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
	crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"
	integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em"
	crossorigin="anonymous"></script>
	<title>
	Lamp
	</title>
	<style type="text/css">
	body, html {
	width: 100%;
	height: 100%
	}
	header {
	height: 100%;
	}
	.invis{visibility: hidden}
	</style>
	</head>
	<body>

	<header class="masthead text-center d-flex">
	<div class="container my-auto">
	<div class="row">
	<div class="col-12 mx-auto my-5">
	<button id="btn" role="button" class="btn btn-lg btn-primary">Click Here</button>
	</div>
	<div class="col-12">
	<img id="img" class="invis" src="http://placekitten.com/200/300" class="img-rounded">
	</div>
	</div>
	</div>
	</header>
	</body>

	<script type="text/javascript">

	$(document).ready(function () {
	ws = new WebSocket('ws://' + document.domain + ':5000/echo');
	ws.onmessage = function (event) {
	var data = event.data;
	console.log(data);
	var $img = $('img');
	if (data === "stop") {
	$img.addClass('invis');
	} else {
	$img.removeClass('invis');
	}
	};
	$('#btn').on({
	'touchstart mousedown': function (e) {
	console.log("Press down");
	e.stopPropagation();
	e.preventDefault();
	ws.send("start");
	},
	'touchend mouseup': function (e) {
	console.log("Press up");
	$(this).find('i').removeClass('active');
	e.stopPropagation();
	e.preventDefault();
	ws.send("stop");
	}
	});
	});
	</script>
	</html>