Skip to content

Instantly share code, notes, and snippets.

@pgjones

pgjones/app.py

Last active January 15, 2020 15:00
Show Gist options
  • Save pgjones/eb64cc1cc18f51c2a7df to your computer and use it in GitHub Desktop.
Save pgjones/eb64cc1cc18f51c2a7df to your computer and use it in GitHub Desktop.
Download ZIP
flask-sockets example requires: Flask, Flask-Sockets, Flask-SocketIO
Raw
app.py
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer
from flask import Flask, request, render_template_string
from flask_sockets import Sockets
import json
app = Flask(__name__)
sockets = Sockets(app)
template = """
<html><body><table>
{% for key, value in appliances.iteritems() %}
<tr><td>{{ key }}</td><td>{{ value }}</td></tr>
{% endfor %}
</table>
<form>
<input type="text" id="device">
<input type="number" id="capacity" step="1" pattern="\d*">
<input type="submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var socket = new WebSocket("ws://" + document.domain + ":5000/api");
socket.onmessage = function(message) {
var data = JSON.parse(message.data);
$("table").append("<tr><td>" + data.device + "</td><td>" + data.capacity + "</td></tr>");
};
$("form").submit(function(event) {
var data = {"device" : $("#device").val(), "capacity" : parseInt($("#capacity").val(), 10)};
socket.send(JSON.stringify(data));
event.preventDefault();
});
});
</script>
</body></html>
"""
@app.route('/')
def index():
with open('appliances.json', 'r') as json_file:
appliances = json.load(json_file)
return render_template_string(template, appliances=appliances)
@sockets.route('/api')
def api(socket):
while True:
message = socket.receive()
socket.send(message)
data = json.loads(message)
with open('appliances.json', 'r') as json_file:
appliances = json.load(json_file)
appliances[data['device']] = data['capacity']
with open('appliances.json', 'w') as json_file:
json.dump(appliances, json_file)
if __name__ == '__main__':
http_server = WSGIServer(('',5000), app, handler_class=WebSocketHandler)
http_server.serve_forever()
Raw
app2.py
from flask.ext.socketio import SocketIO, emit
from flask import Flask, render_template_string
import json
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)
app.config['DEBUG'] = True
template = """
<html><body><table>
{% for key, value in appliances.iteritems() %}
<tr><td>{{ key }}</td><td>{{ value }}</td></tr>
{% endfor %}
</table>
<form>
<input type="text" id="device">
<input type="number" id="capacity" step="1" pattern="\d*">
<input type="submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>
<script type="text/javascript">
$(function() {
var socket = io.connect('http://' + document.domain + ':' + location.port);
socket.on('update', function(message) {
var data = JSON.parse(message);
$("table").append("<tr><td>" + data.device + "</td><td>" + data.capacity + "</td></tr>");
});
$("form").submit(function(event) {
var data = {"device" : $("#device").val(), "capacity" : parseInt($("#capacity").val(), 10)};
socket.emit('update', JSON.stringify(data));
event.preventDefault();
});
});
</script>
</body></html>
"""
@app.route('/')
def index():
with open('appliances.json', 'r') as json_file:
appliances = json.load(json_file)
return render_template_string(template, appliances=appliances)
@socketio.on('update')
def api(message):
emit('update', message, broadcast=True)
data = json.loads(message)
with open('appliances.json', 'r') as json_file:
appliances = json.load(json_file)
appliances[data['device']] = data['capacity']
with open('appliances.json', 'w') as json_file:
json.dump(appliances, json_file)
if __name__ == '__main__':
socketio.run(app)
@Nadav-Ruskin
Copy link

Nadav-Ruskin commented Jul 4, 2018 •
edited
Loading

Great example. I managed to make example 1 work in python3 by replacing iteritems() with items() and manually creating a file named appliances.json with an object in it.

Another edit in the file is adding a try-except clause here:

@sockets.route('/api')
def api(socket):
	while True:
		try:
			message = socket.receive()
			socket.send(message)
			data = json.loads(message)
			with open('appliances.json', 'r') as json_file:
				appliances = json.load(json_file)
			appliances[data['device']] = data['capacity']
			with open('appliances.json', 'w') as json_file:
				json.dump(appliances, json_file)
		except geventwebsocket.exceptions.WebSocketError as e:
			print("Connection closed. Message: " + e.__class__.__name__ + ": " + str(e))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment