From 4f3c63c7a96d112fcd4371ee93d21d388c56c5d8 Mon Sep 17 00:00:00 2001
From: Miguel Grinberg <miguel.grinberg@gmail.com>
Date: Sun, 25 Jun 2017 15:18:59 -0700
Subject: [PATCH] added flask-login to sessions example

---
 example/requirements.txt        |  1 +
 example/sessions.py             | 49 +++++++++++++++++---
 example/templates/sessions.html | 79 +++++++++++++++++++++++++++++----
 3 files changed, 114 insertions(+), 15 deletions(-)

diff --git a/example/requirements.txt b/example/requirements.txt
index cc1d37a2..c9759351 100644
--- a/example/requirements.txt
+++ b/example/requirements.txt
@@ -1,4 +1,5 @@
 Flask==0.12.2
+Flask-Login==0.4.0
 Flask-Session==0.3.1
 Flask_SocketIO
 itsdangerous==0.24
diff --git a/example/sessions.py b/example/sessions.py
index 5780266a..a2affbb9 100644
--- a/example/sessions.py
+++ b/example/sessions.py
@@ -1,33 +1,70 @@
 from flask import Flask, render_template, session, request, jsonify
+from flask_login import LoginManager, UserMixin, current_user, login_user, \
+    logout_user
 from flask_session import Session
 from flask_socketio import SocketIO, emit
 
 app = Flask(__name__)
 app.config['SECRET_KEY'] = 'top-secret!'
 app.config['SESSION_TYPE'] = 'filesystem'
+login = LoginManager(app)
 Session(app)
 socketio = SocketIO(app, manage_session=False)
 
 
+class User(UserMixin, object):
+    def __init__(self, id=None):
+        self.id = id
+
+
+@login.user_loader
+def load_user(id):
+    return User(id)
+
+
 @app.route('/')
 def index():
-    session['value'] = ''
     return render_template('sessions.html')
 
 
 @app.route('/session', methods=['GET', 'POST'])
 def session_access():
     if request.method == 'GET':
-        return jsonify({'session': session['value']})
-    session['value'] = request.get_json().get('session')
+        return jsonify({
+            'session': session.get('value', ''),
+            'user': current_user.id
+                if current_user.is_authenticated else 'anonymous'
+        })
+    data = request.get_json()
+    if 'session' in data:
+        session['value'] = data['session']
+    elif 'user' in data:
+        if data['user']:
+            login_user(User(data['user']))
+        else:
+            logout_user()
     return '', 204
 
 
 @socketio.on('get-session')
 def get_session():
-    emit('refresh-session', session['value'])
+    emit('refresh-session', {
+        'session': session['value'],
+        'user': current_user.id
+            if current_user.is_authenticated else 'anonymous'
+    })
 
 
 @socketio.on('set-session')
-def set_session(value):
-    session['value'] = value
+def set_session(data):
+    if 'session' in data:
+        session['value'] = data['session']
+    elif 'user' in data:
+        if data['user'] is not None:
+            login_user(User(data['user']))
+        else:
+            logout_user()
+
+
+if __name__ == '__main__':
+    socketio.run(app)
diff --git a/example/templates/sessions.html b/example/templates/sessions.html
index 97899cd7..924d68a1 100644
--- a/example/templates/sessions.html
+++ b/example/templates/sessions.html
@@ -13,14 +13,48 @@ <h1>Flask-SocketIO Sessions example</h1>
 
                 <div class="pure-form">
                     <h2>HTTP</h2>
-                    <p>Current session: <b><span id="http-session"></span></b></p>
-                    <p>Set session to: <input type=text id='http-session-set'> <button class="pure-button pure-button-primary" id="submit-http">Submit</button></p>
-
+                    <div class="pure-g">
+                        <div class="pure-u-1-6"><h3>Session</h3></div>
+                        <div class="pure-u-5-6">
+                            <p>Current session: <b><span id="http-session"></span></b></p>
+                            <p>
+                                <input type=text id='http-session-set' placeholder="Set session to...">
+                                <button class="pure-button pure-button-primary" id="submit-http">Submit</button>
+                            </p>
+                        </div>
+                        <div class="pure-u-1-6"><h3>User</h3></div>
+                        <div class="pure-u-5-6">
+                            <p>Current user: <b><span id="http-user"></span></b></p>
+                            <p>
+                                <input type=text id='http-user-set' placeholder="User to login...">
+                                <button class="pure-button pure-button-primary" id="login-http">Login</button>
+                                <button class="pure-button pure-button-primary" id="logout-http">Logout</button>
+                            </p>
+                        </div>
+                    </div>
+                    <hr>
                     <h2>Socket.IO</h2>
                     <p><button class="pure-button pure-button-primary" id="connect">Connect</button></p>
                     <div id="socketio" style="display: none">
-                        <p>Current session: <b><span id="socketio-session"></span></b></p>
-                        <p>Set session to: <input type=text id='socketio-session-set'> <button class="pure-button pure-button-primary" id="submit-socketio">Submit</button></p>
+                        <div class="pure-g">
+                            <div class="pure-u-1-6"><h3>Session</h3></div>
+                            <div class="pure-u-5-6">
+                                <p>Current session: <b><span id="socketio-session"></span></b></p>
+                                <p>
+                                    <input type=text id='socketio-session-set' placeholder="Set session to...">
+                                    <button class="pure-button pure-button-primary" id="submit-socketio">Submit</button>
+                                </p>
+                            </div>
+                            <div class="pure-u-1-6"><h3>User</h3></div>
+                            <div class="pure-u-5-6">
+                                <p>Current user: <b><span id="socketio-user"></span></b></p>
+                                <p>
+                                    <input type=text id='socketio-user-set' placeholder="User to login...">
+                                    <button class="pure-button pure-button-primary" id="login-socketio">Login</button>
+                                    <button class="pure-button pure-button-primary" id="logout-socketio">Logout</button>
+                                </p>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -35,6 +69,7 @@ <h2>Socket.IO</h2>
                     url: '/session',
                     success: function(data) {
                         $('#http-session').text(data['session']);
+                        $('#http-user').text(data['user']);
                     }
                 });
             }, 1000);
@@ -47,6 +82,23 @@ <h2>Socket.IO</h2>
                     contentType: 'application/json'
                 });
             });
+            $('#login-http').click(function() {
+                $.ajax({
+                    type: 'POST',
+                    url: '/session',
+                    data: JSON.stringify({user: $('#http-user-set').val()}),
+                    contentType: 'application/json'
+                });
+            });
+            $('#logout-http').click(function() {
+                $.ajax({
+                    type: 'POST',
+                    url: '/session',
+                    data: JSON.stringify({user: null}),
+                    contentType: 'application/json'
+                });
+            });
+
 
             // Socket.IO handlers
             var socket = null;
@@ -54,8 +106,9 @@ <h2>Socket.IO</h2>
             $('#connect').click(function() {
                 if (!socket) {
                     socket = io.connect(location.href);
-                    socket.on('refresh-session', function(value) {
-                        $('#socketio-session').text(value);
+                    socket.on('refresh-session', function(data) {
+                        $('#socketio-session').text(data['session']);
+                        $('#socketio-user').text(data['user']);
                     });
 
                     $('#connect').text('Disconnect');
@@ -64,8 +117,10 @@ <h2>Socket.IO</h2>
                 else {
                     socket.disconnect();
                     socket = null;
-                    $('#connect').text('Connect');
                     $('#socketio').hide();
+                    $('#connect').text('Connect');
+                    $('#socketio-session').text('');
+                    $('#socketio-user').text('');
                 }
             });
 
@@ -75,7 +130,13 @@ <h2>Socket.IO</h2>
             }, 1000);
 
             $('#submit-socketio').click(function() {
-                socket.emit('set-session', $('#socketio-session-set').val());
+                socket.emit('set-session', {session: $('#socketio-session-set').val()});
+            });
+            $('#login-socketio').click(function() {
+                socket.emit('set-session', {user: $('#socketio-user-set').val()});
+            });
+            $('#logout-socketio').click(function() {
+                socket.emit('set-session', {user: null});
             });
         </script>
     </body>