Created
October 11, 2019 06:53
-
-
Save huangsam/d7d3953a9f6b2108a95417cc75af2635 to your computer and use it in GitHub Desktop.
Long polling demo with Flask + axios
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| from datetime import datetime | |
| from random import randint | |
| from time import sleep | |
| from flask import Flask, jsonify, render_template | |
| app = Flask(__name__) | |
| @app.route("/poll") | |
| def poll(): | |
| sleep(10.0) | |
| # Fetch from https://randomwordgenerator.com/phrase.php | |
| arr = [ | |
| "Let Her Rip", | |
| "A Dime a Dozen", | |
| "Quick and Dirty", | |
| "Two Down, One to Go", | |
| "Head Over Heels", | |
| "Under the Weather", | |
| "Long In The Tooth", | |
| "Hit Below The Belt", | |
| "Cry Over Spilt Milk", | |
| "Put a Sock In It", | |
| "Poke Fun At", | |
| "Down For The Count", | |
| "Goody Two-Shoes", | |
| "Drive Me Nuts", | |
| ] | |
| choice = randint(0, len(arr) - 1) | |
| # Return JSON data | |
| return jsonify( | |
| { | |
| "user": "johndoe", | |
| "message": arr[choice], | |
| "category": "phrases", | |
| "timestamp": datetime.now(), | |
| } | |
| ) | |
| @app.route("/") | |
| def home(): | |
| return render_template("index.html") | |
| if __name__ == "__main__": | |
| app.run(debug=True) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // initial fn | |
| function initialize() { | |
| // https://developer.mozilla.org/en-US/docs/Web/API/Notification/permission | |
| if (!("Notification" in window)) { | |
| return; | |
| } else if (Notification.permission === "granted") { | |
| subscribe(); | |
| } else if (Notification.permission === "denied") { | |
| Notification.requestPermission().then((permission) => { | |
| if (permission === "granted") { | |
| subscribe(); | |
| } | |
| }); | |
| } | |
| } | |
| // subscribe fn | |
| function subscribe() { | |
| axios.get('/poll') | |
| .then((r) => { | |
| let pollEl = document.getElementById("poll-count"); | |
| const pollCount = parseInt(pollEl.innerText) + 1; | |
| pollEl.innerText = pollCount; | |
| const title = `Message ${pollEl.innerText} polled`; | |
| const {user, message, category, timestamp} = r.data; | |
| const body = `${user} says: "${message}"`; | |
| const options = { | |
| body: body, | |
| icon: "/static/img/hiking.png", | |
| timestamp: new Date(timestamp) | |
| }; | |
| const notify = new Notification(title, options); | |
| console.log(notify); | |
| }) | |
| .catch((r) => { | |
| console.warn("Network failure. Trying again..."); | |
| }) | |
| .finally(() => { | |
| // https://javascript.info/long-polling | |
| subscribe(); | |
| }); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Long polling example</title> | |
| </head> | |
| <body onload="initialize()"> | |
| <h1>Long polling example</h1> | |
| <p>This page demonstrates what long polling could look like.</p> | |
| <p>Poll count: <span id="poll-count">0</span></p> | |
| </body> | |
| <!-- Enable HTTP fetching with promises --> | |
| <script src="https://unpkg.com/axios/dist/axios.min.js"></script> | |
| <!-- https://flask.palletsprojects.com/en/1.1.x/tutorial/static/ --> | |
| <script src="{{ url_for('static', filename='js/demo.js') }}"></script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment