├── .gitignore
├── LICENSE
├── README.md
├── audio
    ├── __init__.py
    ├── audio.py
    ├── static
    │   ├── _files
    │   │   └── README.md
    │   └── audio
    │   │   ├── main.js
    │   │   ├── mic128.png
    │   │   └── styles.css
    └── templates
    │   └── audio
    │       └── main.html
├── chat
    ├── __init__.py
    ├── chat.py
    ├── static
    │   └── chat
    │   │   ├── main.js
    │   │   └── styles.css
    └── templates
    │   └── chat
    │       └── main.html
├── polls
    ├── __init__.py
    ├── polls.py
    ├── static
    │   └── polls
    │   │   ├── main.js
    │   │   ├── styles.css
    │   │   └── vote.js
    └── templates
    │   └── polls
    │       ├── main.html
    │       └── vote.html
├── requirements.txt
├── socketio_examples.py
├── static
    └── _files
    │   └── README.md
├── templates
    └── index.html
├── uploads
    ├── __init__.py
    ├── static
    │   ├── _files
    │   │   └── README.md
    │   └── uploads
    │   │   ├── main.js
    │   │   └── styles.css
    ├── templates
    │   └── uploads
    │   │   └── main.html
    └── uploads.py
└── where
    ├── __init__.py
    ├── static
        └── where
        │   ├── drop_pin.js
        │   ├── main.js
        │   └── styles.css
    ├── templates
        └── where
        │   ├── drop_pin.html
        │   └── main.html
    └── where.py


/.gitignore:
--------------------------------------------------------------------------------
  1 | # Byte-compiled / optimized / DLL files
  2 | __pycache__/
  3 | *.py[cod]
  4 | *$py.class
  5 | 
  6 | # C extensions
  7 | *.so
  8 | 
  9 | # Distribution / packaging
 10 | .Python
 11 | env/
 12 | build/
 13 | develop-eggs/
 14 | dist/
 15 | downloads/
 16 | eggs/
 17 | .eggs/
 18 | lib/
 19 | lib64/
 20 | parts/
 21 | sdist/
 22 | var/
 23 | wheels/
 24 | *.egg-info/
 25 | .installed.cfg
 26 | *.egg
 27 | 
 28 | # PyInstaller
 29 | #  Usually these files are written by a python script from a template
 30 | #  before PyInstaller builds the exe, so as to inject date/other infos into it.
 31 | *.manifest
 32 | *.spec
 33 | 
 34 | # Installer logs
 35 | pip-log.txt
 36 | pip-delete-this-directory.txt
 37 | 
 38 | # Unit test / coverage reports
 39 | htmlcov/
 40 | .tox/
 41 | .coverage
 42 | .coverage.*
 43 | .cache
 44 | nosetests.xml
 45 | coverage.xml
 46 | *.cover
 47 | .hypothesis/
 48 | 
 49 | # Translations
 50 | *.mo
 51 | *.pot
 52 | 
 53 | # Django stuff:
 54 | *.log
 55 | local_settings.py
 56 | 
 57 | # Flask stuff:
 58 | instance/
 59 | .webassets-cache
 60 | 
 61 | # Scrapy stuff:
 62 | .scrapy
 63 | 
 64 | # Sphinx documentation
 65 | docs/_build/
 66 | 
 67 | # PyBuilder
 68 | target/
 69 | 
 70 | # Jupyter Notebook
 71 | .ipynb_checkpoints
 72 | 
 73 | # pyenv
 74 | .python-version
 75 | 
 76 | # celery beat schedule file
 77 | celerybeat-schedule
 78 | 
 79 | # SageMath parsed files
 80 | *.sage.py
 81 | 
 82 | # dotenv
 83 | .env
 84 | 
 85 | # virtualenv
 86 | .venv
 87 | venv/
 88 | ENV/
 89 | 
 90 | # Spyder project settings
 91 | .spyderproject
 92 | .spyproject
 93 | 
 94 | # Rope project settings
 95 | .ropeproject
 96 | 
 97 | # mkdocs documentation
 98 | /site
 99 | 
100 | # mypy
101 | .mypy_cache/
102 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Miguel Grinberg
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Socket.IO Examples
 2 | 
 3 | This repository contains a few examples that demonstrate the features of the
 4 | Python Socket.IO server in combination with Flask.
 5 | 
 6 | ## How to Run
 7 | 
 8 | First create a virtual environment and import the requirements.
 9 | 
10 | One of the demos uses the Google Maps API. For that demo to work you need to
11 | request a Google Maps API key from Google, as described
12 | [here](https://developers.google.com/maps/documentation/javascript/get-api-key).
13 | 
14 | To start the server, run:
15 | 
16 | ```
17 | (venv) $ export GOOGLE_MAPS_KEY=<your-google-maps-key>
18 | (venv) $ export FLASK_APP=socketio_examples.py
19 | (venv) $ flask run
20 | ```
21 | 
22 | Finally, open _http://localhost:5000_ on your web browser to access the
23 | application.
24 | 
25 | Note: You can run the application without a Google Maps key. All the demos
26 | except "Where do you live?" will work just fine.
27 | 


--------------------------------------------------------------------------------
/audio/__init__.py:
--------------------------------------------------------------------------------
1 | from .audio import bp
2 | 


--------------------------------------------------------------------------------
/audio/audio.py:
--------------------------------------------------------------------------------
 1 | """Audio Recording Socket.IO Example
 2 | 
 3 | Implements server-side audio recording.
 4 | """
 5 | import os
 6 | import uuid
 7 | import wave
 8 | from flask import Blueprint, current_app, session, url_for, render_template
 9 | from flask_socketio import emit
10 | from socketio_examples import socketio
11 | 
12 | bp = Blueprint('audio', __name__, static_folder='static',
13 |                template_folder='templates')
14 | 
15 | 
16 | @bp.route('/')
17 | def index():
18 |     """Return the client application."""
19 |     return render_template('audio/main.html')
20 | 
21 | 
22 | @socketio.on('start-recording', namespace='/audio')
23 | def start_recording(options):
24 |     """Start recording audio from the client."""
25 |     id = uuid.uuid4().hex  # server-side filename
26 |     session['wavename'] = id + '.wav'
27 |     wf = wave.open(current_app.config['FILEDIR'] + session['wavename'], 'wb')
28 |     wf.setnchannels(options.get('numChannels', 1))
29 |     wf.setsampwidth(options.get('bps', 16) // 8)
30 |     wf.setframerate(options.get('fps', 44100))
31 |     session['wavefile'] = wf
32 | 
33 | 
34 | @socketio.on('write-audio', namespace='/audio')
35 | def write_audio(data):
36 |     """Write a chunk of audio from the client."""
37 |     session['wavefile'].writeframes(data)
38 | 
39 | 
40 | @socketio.on('end-recording', namespace='/audio')
41 | def end_recording():
42 |     """Stop recording audio from the client."""
43 |     emit('add-wavefile', url_for('static',
44 |                                  filename='_files/' + session['wavename']))
45 |     session['wavefile'].close()
46 |     del session['wavefile']
47 |     del session['wavename']
48 | 


--------------------------------------------------------------------------------
/audio/static/_files/README.md:
--------------------------------------------------------------------------------
1 | File uploads are stored in this directory.
2 | 


--------------------------------------------------------------------------------
/audio/static/audio/main.js:
--------------------------------------------------------------------------------
  1 | /* Audio recording and streaming demo by Miguel Grinberg.
  2 | 
  3 |    Adapted from https://webaudiodemos.appspot.com/AudioRecorder
  4 |    Copyright 2013 Chris Wilson
  5 | 
  6 |    Licensed under the Apache License, Version 2.0 (the "License");
  7 |    you may not use this file except in compliance with the License.
  8 |    You may obtain a copy of the License at
  9 | 
 10 |        http://www.apache.org/licenses/LICENSE-2.0
 11 | 
 12 |    Unless required by applicable law or agreed to in writing, software
 13 |    distributed under the License is distributed on an "AS IS" BASIS,
 14 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 15 |    See the License for the specific language governing permissions and
 16 |    limitations under the License.
 17 | */
 18 | 
 19 | window.AudioContext = window.AudioContext || window.webkitAudioContext;
 20 | 
 21 | var audioContext = new AudioContext();
 22 | var audioInput = null,
 23 |     realAudioInput = null,
 24 |     inputPoint = null,
 25 |     recording = false;
 26 | var rafID = null;
 27 | var analyserContext = null;
 28 | var canvasWidth, canvasHeight;
 29 | var socketio = io.connect(location.origin + '/audio', {transports: ['websocket']});
 30 | 
 31 | socketio.on('add-wavefile', function(url) {
 32 |     // add new recording to page
 33 |     audio = document.createElement('p');
 34 |     audio.innerHTML = '<audio src="' + url + '" controls>';
 35 |     document.getElementById('wavefiles').appendChild(audio);
 36 | });
 37 | 
 38 | function toggleRecording( e ) {
 39 |     if (e.classList.contains('recording')) {
 40 |         // stop recording
 41 |         e.classList.remove('recording');
 42 |         recording = false;
 43 |         socketio.emit('end-recording');
 44 |     } else {
 45 |         // start recording
 46 |         e.classList.add('recording');
 47 |         recording = true;
 48 |         socketio.emit('start-recording', {numChannels: 1, bps: 16, fps: parseInt(audioContext.sampleRate)});
 49 |     }
 50 | }
 51 | 
 52 | function convertToMono( input ) {
 53 |     var splitter = audioContext.createChannelSplitter(2);
 54 |     var merger = audioContext.createChannelMerger(2);
 55 | 
 56 |     input.connect( splitter );
 57 |     splitter.connect( merger, 0, 0 );
 58 |     splitter.connect( merger, 0, 1 );
 59 |     return merger;
 60 | }
 61 | 
 62 | function cancelAnalyserUpdates() {
 63 |     window.cancelAnimationFrame( rafID );
 64 |     rafID = null;
 65 | }
 66 | 
 67 | function updateAnalysers(time) {
 68 |     if (!analyserContext) {
 69 |         var canvas = document.getElementById('analyser');
 70 |         canvasWidth = canvas.width;
 71 |         canvasHeight = canvas.height;
 72 |         analyserContext = canvas.getContext('2d');
 73 |     }
 74 | 
 75 |     // analyzer draw code here
 76 |     {
 77 |         var SPACING = 3;
 78 |         var BAR_WIDTH = 1;
 79 |         var numBars = Math.round(canvasWidth / SPACING);
 80 |         var freqByteData = new Uint8Array(analyserNode.frequencyBinCount);
 81 | 
 82 |         analyserNode.getByteFrequencyData(freqByteData); 
 83 | 
 84 |         analyserContext.clearRect(0, 0, canvasWidth, canvasHeight);
 85 |         analyserContext.fillStyle = '#F6D565';
 86 |         analyserContext.lineCap = 'round';
 87 |         var multiplier = analyserNode.frequencyBinCount / numBars;
 88 | 
 89 |         // Draw rectangle for each frequency bin.
 90 |         for (var i = 0; i < numBars; ++i) {
 91 |             var magnitude = 0;
 92 |             var offset = Math.floor( i * multiplier );
 93 |             // gotta sum/average the block, or we miss narrow-bandwidth spikes
 94 |             for (var j = 0; j< multiplier; j++)
 95 |                 magnitude += freqByteData[offset + j];
 96 |             magnitude = magnitude / multiplier;
 97 |             var magnitude2 = freqByteData[i * multiplier];
 98 |             analyserContext.fillStyle = "hsl( " + Math.round((i*360)/numBars) + ", 100%, 50%)";
 99 |             analyserContext.fillRect(i * SPACING, canvasHeight, BAR_WIDTH, -magnitude);
100 |         }
101 |     }
102 |     
103 |     rafID = window.requestAnimationFrame( updateAnalysers );
104 | }
105 | 
106 | function toggleMono() {
107 |     if (audioInput != realAudioInput) {
108 |         audioInput.disconnect();
109 |         realAudioInput.disconnect();
110 |         audioInput = realAudioInput;
111 |     } else {
112 |         realAudioInput.disconnect();
113 |         audioInput = convertToMono( realAudioInput );
114 |     }
115 | 
116 |     audioInput.connect(inputPoint);
117 | }
118 | 
119 | function gotStream(stream) {
120 |     inputPoint = audioContext.createGain();
121 | 
122 |     // Create an AudioNode from the stream.
123 |     realAudioInput = audioContext.createMediaStreamSource(stream);
124 |     audioInput = realAudioInput;
125 | 
126 |     audioInput = convertToMono( audioInput );
127 |     audioInput.connect(inputPoint);
128 | 
129 |     analyserNode = audioContext.createAnalyser();
130 |     analyserNode.fftSize = 2048;
131 |     inputPoint.connect( analyserNode );
132 | 
133 |     scriptNode = (audioContext.createScriptProcessor || audioContext.createJavaScriptNode).call(audioContext, 1024, 1, 1);
134 |     scriptNode.onaudioprocess = function (audioEvent) {
135 |         if (recording) {
136 |             input = audioEvent.inputBuffer.getChannelData(0);
137 | 
138 |             // convert float audio data to 16-bit PCM
139 |             var buffer = new ArrayBuffer(input.length * 2)
140 |             var output = new DataView(buffer);
141 |             for (var i = 0, offset = 0; i < input.length; i++, offset += 2) {
142 |                 var s = Math.max(-1, Math.min(1, input[i]));
143 |                 output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
144 |             }
145 |             socketio.emit('write-audio', buffer);
146 |         }
147 |     }
148 |     inputPoint.connect(scriptNode);
149 |     scriptNode.connect(audioContext.destination);
150 | 
151 |     zeroGain = audioContext.createGain();
152 |     zeroGain.gain.value = 0.0;
153 |     inputPoint.connect( zeroGain );
154 |     zeroGain.connect( audioContext.destination );
155 |     updateAnalysers();
156 | }
157 | 
158 | function initAudio() {
159 |     if (!navigator.getUserMedia)
160 |         navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
161 |     if (!navigator.cancelAnimationFrame)
162 |         navigator.cancelAnimationFrame = navigator.webkitCancelAnimationFrame || navigator.mozCancelAnimationFrame;
163 |     if (!navigator.requestAnimationFrame)
164 |         navigator.requestAnimationFrame = navigator.webkitRequestAnimationFrame || navigator.mozRequestAnimationFrame;
165 | 
166 |     navigator.getUserMedia({audio: true}, gotStream, function(e) {
167 |         alert('Error getting audio');
168 |         console.log(e);
169 |     });
170 | }
171 | 
172 | window.addEventListener('load', initAudio );
173 | 


--------------------------------------------------------------------------------
/audio/static/audio/mic128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/miguelgrinberg/socketio-examples/8281e127cf0d2228e793594527d7d19e8138a62e/audio/static/audio/mic128.png


--------------------------------------------------------------------------------
/audio/static/audio/styles.css:
--------------------------------------------------------------------------------
 1 | html { overflow: hidden; }
 2 | body { 
 3 |     font: 14pt Arial, sans-serif; 
 4 |     background: lightgrey;
 5 |     display: flex;
 6 |     flex-direction: column;
 7 |     height: 100vh;
 8 |     width: 100%;
 9 |     margin: 0 0;
10 | }
11 | p {
12 |     margin: 2px;
13 | }
14 | #analyser { 
15 |     display: inline-block; 
16 |     background: #202020; 
17 |     width: 95%;
18 |     height: 45%;
19 |     box-shadow: 0px 0px 10px blue;
20 | }
21 | #wavedisplay { 
22 |     display: inline-block; 
23 |     background: #ffffff;
24 |     overflow-y: scroll;
25 |     width: 95%;
26 |     height: 45%;
27 |     box-shadow: 0px 0px 10px blue;
28 | }
29 | #controls {
30 |     display: flex;
31 |     flex-direction: row;
32 |     align-items: center;
33 |     justify-content: space-around;
34 |     height: 20%;
35 |     width: 100%;
36 | }
37 | #record { height: 15vh; }
38 | #record.recording { 
39 |     background: red;
40 |     background: -webkit-radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); 
41 |     background: -moz-radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); 
42 |     background: radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); 
43 | }
44 | #save, #save img { height: 10vh; }
45 | #save { opacity: 0.25;}
46 | #save[download] { opacity: 1;}
47 | #viz {
48 |     height: 80%;
49 |     width: 100%;
50 |     display: flex;
51 |     flex-direction: column;
52 |     justify-content: space-around;
53 |     align-items: center;
54 | }
55 | @media (orientation: landscape) {
56 |     body { flex-direction: row;}
57 |     #controls { flex-direction: column; height: 100%; width: 10%;}
58 |     #viz { height: 100%; width: 90%;}
59 | }
60 | 


--------------------------------------------------------------------------------
/audio/templates/audio/main.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 5 |         <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 6 |         <link rel="stylesheet" href="{{ url_for('audio.static', filename='audio/styles.css') }}">
 7 |     </head>
 8 |     <body>
 9 |         <div id="viz">
10 |             <canvas id="analyser" width="1024" height="500"></canvas>
11 |             <div id="wavedisplay">
12 |                 <div id="wavefiles">
13 |                 </div>
14 |             </div>
15 |         </div>
16 |         <div id="controls">
17 |             <img id="record" src="{{ url_for('audio.static', filename='audio/mic128.png') }}" onclick="toggleRecording(this);">
18 |         </div>
19 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.slim.js"></script>
20 |         <script src="{{ url_for('audio.static', filename='audio/main.js') }}"></script>
21 |     </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/chat/__init__.py:
--------------------------------------------------------------------------------
1 | from .chat import bp
2 | 


--------------------------------------------------------------------------------
/chat/chat.py:
--------------------------------------------------------------------------------
 1 | """Chat Socket.IO Example
 2 | 
 3 | Implements a simple chat server.
 4 | """
 5 | from flask import Blueprint, render_template, request, session, url_for, \
 6 |     current_app
 7 | from flask_socketio import emit
 8 | from socketio_examples import socketio
 9 | 
10 | bp = Blueprint('chat', __name__, static_folder='static',
11 |                template_folder='templates')
12 | 
13 | 
14 | @bp.route('/')
15 | def index():
16 |     """Return the client application."""
17 |     chat_url = current_app.config.get('CHAT_URL') or \
18 |         url_for('chat.index', _external=True)
19 |     return render_template('chat/main.html', chat_url=chat_url)
20 | 
21 | 
22 | @socketio.on('connect', namespace='/chat')
23 | def on_connect():
24 |     """A new user connects to the chat."""
25 |     if request.args.get('username') is None:
26 |         return False
27 |     session['username'] = request.args['username']
28 |     emit('message', {'message': session['username'] + ' has joined.'},
29 |          broadcast=True)
30 | 
31 | 
32 | @socketio.on('disconnect', namespace='/chat')
33 | def on_disconnect():
34 |     """A user disconnected from the chat."""
35 |     emit('message', {'message': session['username'] + ' has left.'},
36 |          broadcast=True)
37 | 
38 | 
39 | @socketio.on('post-message', namespace='/chat')
40 | def on_post_message(message):
41 |     """A user posted a message to the chat."""
42 |     emit('message', {'user': session['username'],
43 |                      'message': message['message']},
44 |          broadcast=True)
45 | 


--------------------------------------------------------------------------------
/chat/static/chat/main.js:
--------------------------------------------------------------------------------
 1 | var input_field = document.getElementById('message');
 2 | var chat_field = document.getElementById('chat');
 3 | 
 4 | // create a random username
 5 | var username = 'user' + parseInt(Math.random() * 10000);
 6 | 
 7 | var socketio = io.connect(location.origin + '/chat',
 8 |     {query: 'username=' + username, 'transports': ['websocket']});
 9 | 
10 | // event handler when ENTER is pressed on the chat input field
11 | input_field.onchange = function() {
12 |     socketio.emit('post-message', { message: this.value });
13 |     this.value = '';
14 | }
15 | 
16 | // the server is sending a message to display in the chat window
17 | socketio.on('message', function(message) {
18 |     msg = document.createElement('p');
19 |     if (message.user) {
20 |         // this is a message written by a user
21 |         msg.innerHTML = '<span class="user">' + message.user + '</span>: ' +
22 |             '<span class="message">' + message.message + "</span>";
23 |     }
24 |     else {
25 |         // this is a control message that comes from the server itself
26 |         msg.innerHTML = '<span class="control-message">' + message.message + '</span>';
27 |     }
28 |     chat_field.appendChild(msg);
29 |     chat_field.scrollTop = chat.scrollHeight; // scroll to bottom
30 | });
31 | 
32 | input_field.focus();


--------------------------------------------------------------------------------
/chat/static/chat/styles.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 |     height: 100%;
 3 | }
 4 | 
 5 | body {
 6 |     font-family: 'Roboto', sans-serif;
 7 |     font-size: 120%;
 8 | }
 9 | 
10 | #chat {
11 |     height: calc(100% - 300px);
12 |     padding: 10px;
13 |     line-height: 1em;
14 |     overflow-y: scroll; 
15 | }
16 | 
17 | #chat p {
18 |     margin: 5px 0px;
19 | }
20 | 
21 | #chat p .user {
22 |     color: #22f;
23 | }
24 | 
25 | #chat p .control-message {
26 |     font-style: italic;
27 |     color: #888;
28 | }
29 | 
30 | #message-panel {
31 |     margin: 10px;
32 |     padding: 0;
33 |     position: absolute;
34 |     bottom: 0px;
35 |     width: 95%;
36 | }
37 | 
38 | #message {
39 |     margin-top: 10px;
40 |     width: 95%;
41 |     font-size: 100%;
42 | }
43 | 


--------------------------------------------------------------------------------
/chat/templates/chat/main.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 5 |         <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 6 |         <link rel="stylesheet" href="{{ url_for('chat.static', filename='chat/styles.css') }}">
 7 |     </head>
 8 |     <body>
 9 |         <h1>Socket.IO Chat</h1>
10 |         <h2>Join the chat at <a href="{{ chat_url }}">{{ chat_url }}</a></h2>
11 |         <div id="chat">
12 |         </div>
13 |         <div id="message-panel">
14 |             <hr>
15 |             <p>
16 |                 Type your message below. Press ENTER to submit.<br>
17 |                 <input type="text" id="message">
18 |             </p>
19 |         </div>
20 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.slim.js"></script>
21 |         <script src="{{ url_for('chat.static', filename='chat/main.js') }}"></script>
22 |     </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/polls/__init__.py:
--------------------------------------------------------------------------------
1 | from .polls import bp
2 | 


--------------------------------------------------------------------------------
/polls/polls.py:
--------------------------------------------------------------------------------
  1 | """Polls Socket.IO Example
  2 | 
  3 | Live polling of an audience.
  4 | """
  5 | import json
  6 | import os
  7 | import uuid
  8 | from flask import Blueprint, current_app, render_template, url_for, session
  9 | from flask_socketio import emit
 10 | from socketio_examples import socketio
 11 | 
 12 | bp = Blueprint('polls', __name__, static_folder='static',
 13 |                template_folder='templates')
 14 | 
 15 | 
 16 | class PollTracker(object):
 17 |     """This class keeps track of the total votes for all the questions."""
 18 |     def __init__(self):
 19 |         self.polls = {'q1': [0, 0, 0],
 20 |                       'q2': [0, 0, 0, 0],
 21 |                       'q3': [0, 0, 0],
 22 |                       'q4': [0, 0, 0, 0, 0]}
 23 |         self.dirty = False
 24 |     
 25 |     def add_vote(self, question, answer):
 26 |         """Register a new vote."""
 27 |         self.polls[question][answer] += 1
 28 |         self.dirty = True
 29 | 
 30 |     def remove_vote(self, question, answer):
 31 |         """Remove a vote."""
 32 |         self.polls[question][answer] -= 1
 33 |         self.dirty = True
 34 | 
 35 |     def get_tally(self):
 36 |         """Return the updated totals if they changed, else return None."""
 37 |         if self.dirty:
 38 |             self.dirty = False
 39 |             return self.polls
 40 | 
 41 |     def set_dirty(self):
 42 |         """Force an update by setting the dirty flag."""
 43 |         self.dirty = True
 44 | 
 45 | tally = PollTracker()
 46 | 
 47 | 
 48 | @bp.route('/')
 49 | def index():
 50 |     """Return the poll administrator client application."""
 51 |     vote_url = current_app.config.get('POLLS_VOTE_URL') or \
 52 |         url_for('polls.vote', _external=True)
 53 |     return render_template('polls/main.html', vote_url=vote_url)
 54 | 
 55 | 
 56 | @bp.route('/vote')
 57 | def vote():
 58 |     """Return the poll participant client application."""
 59 |     return render_template('polls/vote.html')
 60 | 
 61 | 
 62 | @socketio.on('connect', namespace='/polls')
 63 | def on_voter_connect():
 64 |     """A new voter connected."""
 65 |     # initialize the votes for this participant
 66 |     session['votes'] = {}
 67 | 
 68 | 
 69 | @socketio.on('disconnect', namespace='/polls')
 70 | def on_voter_disconnect():
 71 |     """A voter disconnected."""
 72 |     # remove the votes from this participant
 73 |     for question, answer in session['votes'].items():
 74 |         tally.remove_vote(question, answer)
 75 | 
 76 | 
 77 | @socketio.on('vote', namespace='/polls')
 78 | def on_voter_vote(question, answer):
 79 |     """A new vote has been made."""
 80 |     if question in session['votes']:
 81 |         if session['votes'][question] == answer:
 82 |             # this is the same vote as before, so it can be ignored
 83 |             return
 84 |         # remove the previous vote on this question
 85 |         tally.remove_vote(question, session['votes'][question])
 86 |     # register the new vote
 87 |     session['votes'][question] = answer
 88 |     tally.add_vote(question, answer)
 89 | 
 90 | 
 91 | @socketio.on('votes', namespace='/polls')
 92 | def votes(votes):
 93 |     """The participant is sending all their votes."""
 94 |     # remove any previous votes stored in the participant's session
 95 |     for question, answer in session['votes'].items():
 96 |         tally.remove_vote(question, answer)
 97 |     # register the new votes
 98 |     for question, answer in votes.items():        
 99 |         tally.add_vote(question, answer)
100 |     session['votes'] = votes
101 | 
102 | 
103 | @socketio.on('connect', namespace='/polls-admin')
104 | def on_admin_connect():
105 |     """A poll administrator has connected."""
106 |     # send the current tally
107 |     emit('update-charts', tally.polls)
108 | 
109 | 
110 | def update_task():
111 |     """Background task to refresh charts when votes change."""
112 |     while True:
113 |         results = tally.get_tally()
114 |         if results:
115 |             # broadcast the results to all connected admins
116 |             socketio.emit('update-charts', results, namespace='/polls-admin')
117 |         socketio.sleep(5)
118 | 
119 | socketio.start_background_task(update_task)
120 | 


--------------------------------------------------------------------------------
/polls/static/polls/main.js:
--------------------------------------------------------------------------------
  1 | var charts = [];
  2 | var socketio = io.connect(location.origin + '/polls-admin');
  3 | 
  4 | // the server sends new results, so refresh all charts with them
  5 | socketio.on('update-charts', function(results) {
  6 |     for (var question in results) {
  7 |         for (var i = 0; i < charts.length; i++) {
  8 |             if (question == charts[i].canvas.id) {
  9 |                 charts[i].data.datasets[0].data = results[question];
 10 |                 charts[i].update();
 11 |                 sum = results[question].reduce(function(a, b) { return a + b }, 0);
 12 |                 document.getElementById('s' + (i + 1)).innerHTML = sum;
 13 |                 break;
 14 |             }
 15 |         }                    
 16 |     }
 17 | });
 18 | 
 19 | // chart.js plugin to provide labels at the top of each bar
 20 | // from http://www.chartjs.org/samples/latest/advanced/data-labelling.html
 21 | Chart.plugins.register({
 22 |     afterDatasetsDraw: function(chart, easing) {
 23 |         var ctx = chart.ctx;
 24 |         chart.data.datasets.forEach(function (dataset, i) {
 25 |             var meta = chart.getDatasetMeta(i);
 26 |             if (!meta.hidden) {
 27 |                 meta.data.forEach(function(element, index) {
 28 |                     if (dataset.data[index] > 0) {
 29 |                         // Draw the text in black, with the specified font
 30 |                         ctx.fillStyle = 'rgb(0, 0, 0)';
 31 | 
 32 |                         var fontSize = 16;
 33 |                         var fontStyle = 'normal';
 34 |                         var fontFamily = 'Helvetica Neue';
 35 |                         ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
 36 | 
 37 |                         // Just naively convert to string for now
 38 |                         var dataString = dataset.data[index].toString();
 39 | 
 40 |                         // Make sure alignment settings are correct
 41 |                         ctx.textAlign = 'center';
 42 |                         ctx.textBaseline = 'middle';
 43 | 
 44 |                         var padding = 5;
 45 |                         var position = element.tooltipPosition();
 46 |                         ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
 47 |                     }
 48 |                 });
 49 |             }
 50 |         });
 51 |     }
 52 | });
 53 | 
 54 | // create a bar chart with the given id and bar labels
 55 | function makeChart(id, labels) {
 56 |     var ctx = document.getElementById(id).getContext("2d");
 57 |     var barChartData = {
 58 |         labels: labels,
 59 |         datasets: [
 60 |             {
 61 |                 type: 'bar',
 62 |                 data: new Array(labels.length).fill(0),
 63 |                 backgroundColor: [
 64 |                     'rgba(255, 99, 132, 0.5)',
 65 |                     'rgba(54, 162, 235, 0.5)',
 66 |                     'rgba(255, 206, 86, 0.5)',
 67 |                     'rgba(75, 192, 192, 0.5)',
 68 |                     'rgba(153, 102, 255, 0.5)',
 69 |                     'rgba(255, 159, 64, 0.5)'
 70 |                 ],
 71 |                 borderColor: [
 72 |                     'rgba(255,99,132,1)',
 73 |                     'rgba(54, 162, 235, 1)',
 74 |                     'rgba(255, 206, 86, 1)',
 75 |                     'rgba(75, 192, 192, 1)',
 76 |                     'rgba(153, 102, 255, 1)',
 77 |                     'rgba(255, 159, 64, 1)'
 78 |                 ]
 79 |             }
 80 |         ]
 81 |     };
 82 |     return new Chart(ctx, {
 83 |         type: 'bar',
 84 |         data: barChartData,
 85 |         options: {
 86 |             responsive: true,
 87 |             maintainAspectRatio: true,
 88 |             legend: {
 89 |                 display: false
 90 |             },
 91 |             scales: {
 92 |                 yAxes: [{
 93 |                     ticks: {
 94 |                         beginAtZero: true,
 95 |                         suggestedMax: 10
 96 |                     }
 97 |                 }]
 98 |             },
 99 |             layout: {
100 |                 padding: {
101 |                     top: 20
102 |                 }
103 |             }
104 |         }
105 |     });
106 | }
107 | 
108 | // create the four bar charts
109 | window.onload = function() {
110 |     charts.push(makeChart('q1', ['0-2 years', '2-4 years', '4+ years']));
111 |     charts.push(makeChart('q2', ['Python 2', 'Python 3', 'Both', 'Neither']));
112 |     charts.push(makeChart('q3', ['Django', 'Flask', 'Other']));
113 |     charts.push(makeChart('q4', ['JavaScript', 'C/C++', 'Ruby', 'Go', 'Other']));
114 | };


--------------------------------------------------------------------------------
/polls/static/polls/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: 'Roboto', sans-serif;
 3 |     height: 100%;
 4 | }
 5 | 
 6 | h1, h2, h3 {
 7 |     text-align: center;
 8 | }
 9 | 
10 | /* charts page */
11 | 
12 | #charts {
13 |     display: flex;
14 |     flex-wrap: wrap;
15 |     padding-left: 20%;
16 |     padding-right: 20%;
17 |     align-items: center;
18 |     justify-content: center;
19 | }
20 | 
21 | #charts div {
22 |     width: calc(50% - 40px);
23 |     height: 50%;
24 |     margin: 20px;
25 | }
26 | 
27 | #charts div canvas {
28 |     max-width: 100%;
29 |     height: 100%;
30 | }
31 | 
32 | /* voting page */
33 | 
34 | .poll {
35 |     display: flex;
36 |     align-items: stretch;
37 |     text-align: center;
38 |     margin-bottom: 50px;
39 | }
40 | 
41 | .poll div {
42 |     flex: 1;
43 |     display: flex;
44 |     align-items: center;
45 |     margin: 0 5px;
46 |     height: 100px;
47 |     border: 1px solid black;
48 | }
49 | 
50 | .poll div p {
51 |     width: 100%;
52 |     text-align: center;
53 |     font-size: 130%;
54 | }
55 | 
56 | .not-chosen {
57 |     background-color: #fff;
58 |     color: #000;
59 | }
60 | 
61 | .chosen {
62 |     background-color: #88f;
63 |     color: #fff;
64 | }
65 | 


--------------------------------------------------------------------------------
/polls/static/polls/vote.js:
--------------------------------------------------------------------------------
 1 | var socketio = io.connect(location.origin + '/polls');
 2 | 
 3 | // register a vote as a result of a click event
 4 | function onButtonClick() {
 5 |     q = document.getElementsByClassName(this.classList[0]);
 6 |     for (var j = 0; j < q.length; j++) {
 7 |         if (q[j] == this) {
 8 |             q[j].classList.remove('not-chosen');
 9 |             q[j].classList.add('chosen');
10 |             socketio.emit('vote', this.classList[0], j);
11 |         }
12 |         else {
13 |             q[j].classList.remove('chosen');
14 |             q[j].classList.add('not-chosen');
15 |         }
16 |     }
17 | }
18 | 
19 | // set up click event handlers
20 | window.onload = function() {
21 |     var choices = document.getElementsByClassName('choice');
22 |     for (var i = 0; i < choices.length; i++) {
23 |         choices[i].onclick = onButtonClick;
24 |     }
25 | }
26 | 
27 | // send current votes to the server
28 | // (this is useful in case the Socket.IO connection breaks and is re-established)
29 | socketio.on('connect', function() {
30 |     var choices = document.getElementsByClassName('choice');
31 |     var votes = {};
32 |     for (var i = 0; i < choices.length; i++) {
33 |         q = document.getElementsByClassName(choices[i].classList[0]);
34 |         for (var j = 0; j < q.length; j++) {
35 |             if (q[j].classList.contains('chosen')) {
36 |                 votes[choices[i].classList[0]] = j;
37 |                 break;
38 |             }
39 |         }
40 |     }
41 |     socketio.emit('votes', votes);
42 | });
43 | 


--------------------------------------------------------------------------------
/polls/templates/polls/main.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 5 |         <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 6 |         <link rel="stylesheet" href="{{ url_for('polls.static', filename='polls/styles.css') }}">
 7 |     </head>
 8 |     <body>
 9 |         <h1 id="question">Python Poll</h1>
10 |         <h2>Vote at <a href="{{ vote_url }}" target="_blank">{{ vote_url }}</a></h2>
11 |         <div id="charts">
12 |             <div>
13 |                 <h3>Python Experience (<span id="s1">0</span>)</h3>
14 |                 <canvas id="q1"></canvas>
15 |             </div>
16 |             <div>
17 |                 <h3>Python Versions (<span id="s2">0</span>)</h3>
18 |                 <canvas id="q2"></canvas>
19 |             </div>
20 |             <div>
21 |                 <h3>Web Frameworks (<span id="s3">0</span>)</h3>
22 |                 <canvas id="q3"></canvas>
23 |             </div>
24 |             <div>
25 |                 <h3>Programming Languages (<span id="s4">0</span>)</h3>
26 |                 <canvas id="q4"></canvas>
27 |             </div>
28 |         </div>
29 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script>
30 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.slim.js"></script>
31 |         <script src="{{ url_for('polls.static', filename='polls/main.js') }}"></script>
32 |     </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/polls/templates/polls/vote.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 5 |         <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 6 |         <link rel="stylesheet" href="{{ url_for('polls.static', filename='polls/styles.css') }}">
 7 |     </head>
 8 |     <body>
 9 |         <h1>Years of Python experience?</h1>
10 |         <div class="poll">
11 |             <div id="q11" class="q1 choice"><p>0-2 years</p></div>
12 |             <div id="q12" class="q1 choice"><p>2-4 years</p></div>
13 |             <div id="q13" class="q1 choice"><p>4+ years</p></div>
14 |         </div>
15 |         <h1>What version of Python do you use daily?</h1>
16 |         <div class="poll">
17 |             <div id="q21" class="q2 choice"><p>Python 2</p></div>
18 |             <div id="q22" class="q2 choice"><p>Python 3</p></div>
19 |             <div id="q23" class="q2 choice"><p>Both</p></div>
20 |             <div id="q24" class="q2 choice"><p>Neither</p></div>
21 |         </div>
22 |         <h1>Favorite Python web framework?</h1>
23 |         <div class="poll">
24 |             <div id="q31" class="q3 choice"><p>Django</p></div>
25 |             <div id="q32" class="q3 choice"><p>Flask</p></div>
26 |             <div id="q33" class="q3 choice"><p>Other</p></div>
27 |         </div>
28 |         <h1>Favorite programming language besides Python?</h1>
29 |         <div class="poll">
30 |             <div id="q41" class="q4 choice"><p>JavaScript</p></div>
31 |             <div id="q42" class="q4 choice"><p>C/C++</p></div>
32 |             <div id="q43" class="q4 choice"><p>Ruby</p></div>
33 |             <div id="q44" class="q4 choice"><p>Go</p></div>
34 |             <div id="q45" class="q4 choice"><p>Other</p></div>
35 |         </div>
36 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.slim.js"></script>
37 |         <script src="{{ url_for('polls.static', filename='polls/vote.js') }}"></script>
38 |     </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
 1 | click==6.7
 2 | enum-compat==0.0.2
 3 | eventlet==0.21.0
 4 | Flask==0.12.2
 5 | Flask-SocketIO==2.9.2
 6 | greenlet==0.4.12
 7 | itsdangerous==0.24
 8 | Jinja2==2.9.6
 9 | MarkupSafe==1.0
10 | python-engineio==1.7.0
11 | python-socketio==1.8.1
12 | six==1.11.0
13 | Werkzeug==0.12.2
14 | 


--------------------------------------------------------------------------------
/socketio_examples.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | from flask import Flask, render_template
 3 | from flask_socketio import SocketIO
 4 | 
 5 | 
 6 | app = Flask(__name__)
 7 | app.config['FILEDIR'] = 'static/_files/'
 8 | app.config['CHAT_URL'] = os.environ.get('CHAT_URL')
 9 | app.config['POLLS_VOTE_URL'] = os.environ.get('POLLS_VOTE_URL')
10 | app.config['WHERE_PIN_URL'] = os.environ.get('WHERE_PIN_URL')
11 | app.config['GOOGLE_MAPS_KEY'] = os.environ.get('GOOGLE_MAPS_KEY')
12 | socketio = SocketIO(app)
13 | 
14 | from chat import bp as chat_bp
15 | from audio import bp as audio_bp
16 | from uploads import bp as uploads_bp
17 | from polls import bp as polls_bp
18 | from where import bp as where_bp
19 | 
20 | app.register_blueprint(chat_bp, url_prefix='/chat')
21 | app.register_blueprint(audio_bp, url_prefix='/audio')
22 | app.register_blueprint(uploads_bp, url_prefix='/uploads')
23 | app.register_blueprint(polls_bp, url_prefix='/polls')
24 | app.register_blueprint(where_bp, url_prefix='/where')
25 | 
26 | 
27 | @app.route('/')
28 | def index():
29 |     return render_template('index.html')
30 | 


--------------------------------------------------------------------------------
/static/_files/README.md:
--------------------------------------------------------------------------------
1 | File uploads are stored in this directory.
2 | 


--------------------------------------------------------------------------------
/templates/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <title>SocketIO Examples</title>
 4 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 5 |         <style>
 6 |             p {
 7 |                 font-size: 150%;
 8 |             }
 9 |         </style>
10 |     </head>
11 |     <body>
12 |         <h1>Socket.IO Examples</h1>
13 |         <p><a href="{{ url_for('chat.index') }}">Chat</a></p>
14 |         <p><a href="{{ url_for('uploads.index') }}">File uploads</a></p>
15 |         <p><a href="{{ url_for('audio.index') }}">Audio recording</a></p>
16 |         <p><a href="{{ url_for('polls.index') }}">Live polls</a></p>
17 |         <p><a href="{{ url_for('where.index') }}">Where do you live?</a></p>
18 |     </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/uploads/__init__.py:
--------------------------------------------------------------------------------
1 | from .uploads import bp
2 | 


--------------------------------------------------------------------------------
/uploads/static/_files/README.md:
--------------------------------------------------------------------------------
1 | File uploads are stored in this directory.
2 | 


--------------------------------------------------------------------------------
/uploads/static/uploads/main.js:
--------------------------------------------------------------------------------
  1 | const chunk_size = 64 * 1024;
  2 | var socketio = io.connect(location.origin + '/uploads', {transports: ['websocket']});
  3 | var files = [];
  4 | 
  5 | // file drop handling
  6 | var dropzone = document.getElementById('dropzone');
  7 | dropzone.ondragover = function(e) {
  8 |     e.preventDefault();
  9 | }
 10 | dropzone.ondrop = function(e) {
 11 |     e.preventDefault();
 12 |     for(var i = 0; i < e.dataTransfer.files.length; i++) {
 13 |         filediv = document.createElement('div');
 14 |         filename = document.createElement('div');
 15 |         filename.classList.add('filename');
 16 |         filename.innerHTML = e.dataTransfer.files[i].name;
 17 |         progress = document.createElement('div');
 18 |         progress.classList.add('file-progress');
 19 |         progress.classList.add('in-progress');
 20 |         filediv.appendChild(filename);
 21 |         filediv.appendChild(progress);
 22 |         document.getElementById('filelist').appendChild(filediv);
 23 |         files.push({
 24 |             file: e.dataTransfer.files[i],
 25 |             progress: progress,
 26 |             done: false
 27 |         });
 28 |     }
 29 | }
 30 | 
 31 | // read a chunk from a file
 32 | function readFileChunk(file, offset, length, success, error) {
 33 |     end_offset = offset + length;
 34 |     if (end_offset > file.size)
 35 |         end_offset = file.size;
 36 |     var r = new FileReader();
 37 |     r.onload = function(file, offset, length, e) {
 38 |         if (e.target.error != null)
 39 |             error(file, offset, length, e.target.error);
 40 |         else
 41 |             success(file, offset, length, e.target.result);
 42 |     }.bind(r, file, offset, length);
 43 |     r.readAsArrayBuffer(file.slice(offset, end_offset));
 44 | }
 45 | 
 46 | // read success callback
 47 | function onReadSuccess(file, offset, length, data) {
 48 |     if (this.done)
 49 |         return;
 50 |     if (!socketio.connected) {
 51 |         // the WebSocket connection was lost, wait until it comes back
 52 |         setTimeout(onReadSuccess.bind(this, file, offset, length, data), 5000);
 53 |         return;
 54 |     }
 55 |     socketio.emit('write-chunk', this.server_filename, offset, data, function(offset, ack) {
 56 |         if (!ack)
 57 |             onReadError(this.file, offset, 0, 'Transfer aborted by server')
 58 |     }.bind(this, offset));
 59 |     end_offset = offset + length;
 60 |     this.progress.style.width = parseInt(300 * end_offset / file.size) + "px";
 61 |     if (end_offset < file.size)
 62 |         readFileChunk(file, end_offset, chunk_size,
 63 |             onReadSuccess.bind(this),
 64 |             onReadError.bind(this));
 65 |     else {                        
 66 |         this.progress.classList.add('complete');
 67 |         this.progress.classList.remove('in-progress');
 68 |         this.done = true;
 69 |     }
 70 | }
 71 | 
 72 | // read error callback
 73 | function onReadError(file, offset, length, error) {
 74 |     console.log('Upload error for ' + file.name + ': ' + error);
 75 |     this.progress.classList.add('error');
 76 |     this.progress.classList.remove('in-progress');    
 77 |     this.done = true;
 78 | }
 79 | 
 80 | // upload button
 81 | var upload = document.getElementById('upload');
 82 | upload.onclick = function() {
 83 |     if (files.length == 0)
 84 |         alert('Drop some files above first!');
 85 |     for (var i = 0; i < files.length; i++) {
 86 |         socketio.emit('start-transfer', files[i].file.name, files[i].file.size, function(filename) {
 87 |             if (!filename) {
 88 |                 // the server rejected the transfer
 89 |                 onReadError.call(this, this.file, 0, 0, 'Upload rejected by server')
 90 |             }
 91 |             else {
 92 |                 // the server allowed the transfer with the given filename
 93 |                 this.server_filename = filename;
 94 |                 readFileChunk(this.file, 0, chunk_size,
 95 |                     onReadSuccess.bind(this),
 96 |                     onReadError.bind(this));
 97 |             }
 98 |         }.bind(files[i]));
 99 |     }
100 |     files = [];
101 | }
102 | 


--------------------------------------------------------------------------------
/uploads/static/uploads/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: 'Roboto', sans-serif;
 3 | }
 4 | 
 5 | .container {
 6 |     margin: 10px;
 7 | }
 8 | 
 9 | #dropzone {
10 |     width: 100%;
11 |     height: 60px;
12 |     background-color: #ddd;
13 |     border: 4px dotted #888;
14 |     text-align: center;
15 |     padding-top: 40px;
16 | }
17 | 
18 | #upload {
19 |     margin: 20px 0 20px 0;
20 |     padding: 5px;
21 |     font-size: 105%;
22 | }
23 | 
24 | .filename {
25 |     display: inline-block;
26 |     width: calc(100% - 300px);
27 | }
28 | 
29 | .file-progress {
30 |     display: inline-block;
31 |     max-width: 300px;
32 |     height: 5px;
33 | }
34 | 
35 | .file-progress.in-progress {
36 |     background-color: #44c;
37 | }
38 | 
39 | .file-progress.complete {
40 |     background-color: #4c4;
41 | }
42 | 
43 | .file-progress.error {
44 |     background-color: #c44;
45 |     width: 300px;
46 | }


--------------------------------------------------------------------------------
/uploads/templates/uploads/main.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 5 |         <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 6 |         <link rel="stylesheet" href="{{ url_for('uploads.static', filename='uploads/styles.css') }}">
 7 |     </head>
 8 |     <body>
 9 |         <div class="container">
10 |             <div id="dropzone">
11 |                 Drop files here!
12 |             </div>
13 |             <button id="upload">Upload files</button>
14 |             <div id="filelist"></div>
15 | 
16 |             <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.slim.js"></script>
17 |             <script src="{{ url_for('uploads.static', filename='uploads/main.js') }}"></script>
18 |         </div>
19 |     </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/uploads/uploads.py:
--------------------------------------------------------------------------------
 1 | """Uploads Socket.IO Example
 2 | 
 3 | Implements file uploads with progress updates
 4 | """
 5 | import json
 6 | import os
 7 | import uuid
 8 | from flask import Blueprint, current_app, render_template
 9 | from socketio_examples import socketio
10 | 
11 | bp = Blueprint('uploads', __name__, static_folder='static',
12 |               template_folder='templates')
13 | 
14 | 
15 | @bp.route('/')
16 | def index():
17 |     """Return the client application."""
18 |     return render_template('uploads/main.html')
19 | 
20 | 
21 | @socketio.on('start-transfer', namespace='/uploads')
22 | def start_transfer(filename, size):
23 |     """Process an upload request from the client."""
24 |     _, ext = os.path.splitext(filename)
25 |     if ext in ['.exe', '.bin', '.js', '.sh', '.py', '.php']:
26 |         return False  # reject the upload
27 | 
28 |     id = uuid.uuid4().hex  # server-side filename
29 |     with open(current_app.config['FILEDIR'] + id + '.json', 'wt') as f:
30 |         json.dump({'filename': filename, 'size': size}, f)
31 |     with open(current_app.config['FILEDIR'] + id + ext, 'wb') as f:
32 |         pass
33 |     return id + ext  # allow the upload
34 | 
35 | 
36 | @socketio.on('write-chunk', namespace='/uploads')
37 | def write_chunk(filename, offset, data):
38 |     """Write a chunk of data sent by the client."""
39 |     if not os.path.exists(current_app.config['FILEDIR'] + filename):
40 |         return False
41 |     try:
42 |         with open(current_app.config['FILEDIR'] + filename, 'r+b') as f:
43 |             f.seek(offset)
44 |             f.write(data)
45 |     except IOError:
46 |         return False
47 |     return True
48 | 


--------------------------------------------------------------------------------
/where/__init__.py:
--------------------------------------------------------------------------------
1 | from .where import bp
2 | 


--------------------------------------------------------------------------------
/where/static/where/drop_pin.js:
--------------------------------------------------------------------------------
 1 | var map = null;
 2 | var marker = null;
 3 | var socketio = io.connect(location.origin + '/where');
 4 | 
 5 | // create a full-screen map
 6 | function initMap() {
 7 |     // instantiate the map
 8 |     map = new google.maps.Map(document.getElementById('map'), {
 9 |         zoom: 3,
10 |         center:  {lat: 0, lng: 0}
11 |     });
12 | 
13 |     // click event handler to drop the pin in a new location
14 |     google.maps.event.addListener(map, 'click', function(event) {
15 |         if (marker) {
16 |             marker.setMap(null);
17 |             marker = null;
18 |         }
19 |         marker = new google.maps.Marker({
20 |             position: event.latLng,
21 |             map: map
22 |         });
23 |         socketio.emit('drop-pin', marker.getPosition().lat(), marker.getPosition().lng())
24 |     });
25 | }
26 | 
27 | // send current pin to the server
28 | // (this is useful in case the Socket.IO connection breaks and is re-established)
29 | socketio.on('connect', function() {
30 |     if (marker != null) {
31 |         socketio.emit('drop-pin', marker.getPosition().lat(), marker.getPosition().lng())
32 |     }
33 | });
34 | 


--------------------------------------------------------------------------------
/where/static/where/main.js:
--------------------------------------------------------------------------------
 1 | var map = null;
 2 | var markers = {};
 3 | var count = 0;
 4 | var socketio = io.connect(location.origin + '/where-admin');
 5 | 
 6 | // create a full-screen map
 7 | function initMap() {
 8 |     map = new google.maps.Map(document.getElementById('map'), {
 9 |         zoom: 2,
10 |         center:  {lat: 0, lng: 0}
11 |     });
12 | }
13 | 
14 | // update a pin for "sid" on the map
15 | // if lat and lng are undefined, remove the pin for this client
16 | socketio.on('update-pin', function(sid, lat, lng) {
17 |     if (sid in markers) {
18 |         if (lat == undefined) {
19 |             markers[sid].setMap(null);
20 |             delete markers[sid];
21 |             count -= 1;
22 |         }
23 |         else {
24 |             markers[sid].setPosition({lat: lat, lng: lng});
25 |         }
26 |     }
27 |     else if (lat != undefined) {
28 |         markers[sid] = new google.maps.Marker({
29 |             position: {lat: lat, lng: lng},
30 |             map: map
31 |         });
32 |         count += 1;
33 |     }
34 |     // update pin count on page
35 |     document.getElementById('count').innerHTML = Object.keys(markers).length;
36 | });
37 | 
38 | // refresh the complete list of pins
39 | socketio.on('update-pins', function(pins) {
40 |     // remove existing pins
41 |     for (var sid in markers) {
42 |         markers[sid].setMap(null);
43 |     }
44 |     // create new pins
45 |     count = 0;
46 |     for (var sid in pins) {
47 |         markers[sid] = new google.maps.Marker({
48 |             position: {lat: pins[sid][0], lng: pins[sid][1]},
49 |             map: map
50 |         });
51 |         count += 1;
52 |     }    
53 |     // update pin count on page
54 |     document.getElementById('count').innerHTML = Object.keys(markers).length;
55 | });
56 | 


--------------------------------------------------------------------------------
/where/static/where/styles.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 |     margin: 0 auto;
 3 |     height: 100%;
 4 | }
 5 | #heading {
 6 |     position: absolute;
 7 |     text-align: center;
 8 |     width: 100%;
 9 |     z-index: 10000;
10 | }
11 | #heading div {
12 |     display: inline-block;
13 |     padding: 10px 20px;
14 |     background-color: #aaa;
15 |     opacity: 0.75;
16 | }
17 | h1, h2 {
18 |     margin: 0 auto;
19 | }
20 | 
21 | #map {
22 |     position: relative;
23 |     height: 100%;
24 |     width: 100%;
25 | }
26 | 


--------------------------------------------------------------------------------
/where/templates/where/drop_pin.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 5 |         <link rel="stylesheet" href="{{ url_for('where.static', filename='where/styles.css') }}">
 6 |     </head>
 7 |     <body>
 8 |         <div id="heading">
 9 |             <div>
10 |                 <h1>Where do you live?</h1>
11 |             </div>
12 |         </div>
13 |         <div id="map"></div>
14 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.slim.js"></script>
15 |         <script src="{{ url_for('where.static', filename='where/drop_pin.js') }}"></script>
16 |         <script src="https://maps.googleapis.com/maps/api/js?key={{ google_maps_key }}&libraries=visualization&callback=initMap"></script>
17 |     </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/where/templates/where/main.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 5 |         <link rel="stylesheet" href="{{ url_for('where.static', filename='where/styles.css') }}">
 6 |     </head>
 7 |     <body>
 8 |         <div id="heading">
 9 |             <div>
10 |                 <h1>Where do you live? (<span id="count">0</span>)</h1>
11 |                 <h2>Drop your pin at <a href="{{ pin_url }}" target="_blank">{{ pin_url }}</a></h2>
12 |             </div>
13 |         </div>
14 |         <div id="map"></div>
15 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.slim.js"></script>
16 |         <script src="{{ url_for('where.static', filename='where/main.js') }}"></script>
17 |         <script src="https://maps.googleapis.com/maps/api/js?key={{ google_maps_key }}&libraries=visualization&callback=initMap"></script>
18 |     </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/where/where.py:
--------------------------------------------------------------------------------
 1 | """Google Maps and Socket.IO demo
 2 | 
 3 | Shows a live map where participants can add themselves.
 4 | """
 5 | from flask import Blueprint, current_app, url_for, render_template, request
 6 | from flask_socketio import emit
 7 | from socketio_examples import socketio
 8 | 
 9 | bp = Blueprint('where', __name__, static_folder='static',
10 |               template_folder='templates')
11 | pins = {}
12 | 
13 | 
14 | @bp.route('/')
15 | def index():
16 |     """Return the admin client application."""
17 |     pin_url = current_app.config.get('WHERE_PIN_URL') or \
18 |         url_for('where.drop_pin', _external=True)
19 |     return render_template(
20 |         'where/main.html',
21 |         google_maps_key=current_app.config['GOOGLE_MAPS_KEY'],
22 |         pin_url=pin_url)
23 | 
24 | 
25 | @bp.route('/drop-pin')
26 | def drop_pin():
27 |     """Return the client application."""
28 |     return render_template(
29 |         'where/drop_pin.html',
30 |         google_maps_key=current_app.config['GOOGLE_MAPS_KEY'])
31 | 
32 | 
33 | @socketio.on('disconnect', namespace='/where')
34 | def on_disconnect():
35 |     """A participant disconnected."""
36 |     # remove the pin from this participant
37 |     if request.sid in pins:
38 |         del pins[request.sid]
39 |     socketio.emit('update-pin', request.sid, namespace='/where-admin')
40 | 
41 | 
42 | @socketio.on('drop-pin', namespace='/where')
43 | def on_drop_pin(lat, lng):
44 |     """A new pin has been dropped."""
45 |     if request.sid in pins:
46 |         pass
47 |     pins[request.sid] = (lat, lng)
48 |     socketio.emit('update-pin', (request.sid, lat, lng), namespace='/where-admin')
49 | 
50 | 
51 | @socketio.on('connect', namespace='/where-admin')
52 | def on_admin_connect():
53 |     """An administrator has connected."""
54 |     emit('update-pins', pins)
55 | 


--------------------------------------------------------------------------------