Julian-Nash/app.py

## app.py
from flask import Flask, render_template
from flask_socketio import SocketIO, send, emit

app = Flask(__name__)
app.config["SECRET_KEY"] = "secret!"
app.config["DEBUG"] = True
socketio = SocketIO(app)


@app.route("/")
def index():
    return render_template("index.html")


@socketio.on('client_connected')
def chat_message(json):
    emit("my_response", json)
    print('Received JSON: {}'.format(str(json)))


@socketio.on('credential_request')
def credential_request(json):

    user_credentials = {
        "is_admin": True,
        "first_name": "Jon",
        "last_name": "Doe"
    }


    emit("credential_response", user_credentials)
    print('Received JSON: {}'.format(str(json)))


if __name__ == "__main__":
    socketio.run(app)

## index.html
<!DOCTYPE html>
<html lang='en'>
<html>

  <head>
    <title>Fun with Flask-SocketIO</title>
    <link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0' charset='UTF-8'/>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700' rel='stylesheet'>
    <link rel='icon' type='image/png' href='img/icon.jpg'/>
  </head>

  <body>

    <main>

      <div class="section">
        <div class="row">
          <div class="container">
              <div class="col s4 offset-s4">
                <h4>Fun with Flask-SocketIO</h4>
                <div class="">
                  <input id="client_username" type="text" placeholder="Enter your username">
                </div>
                <div class="">
                  <input id="client_message" type="text" placeholder="Send a message to the server in real time">
                </div>
                <div class="card-panel">
                  <h6 style="font-size: 1.2em;">Message from the server:</h6>
                  <p id="server_message"></p>

                </div>
                <label id="user_typing" for="server_message"></label>
              </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="container">
          <div class="col s4 offset-s4">
              <a id="credential_btn"class="waves-effect waves-light btn" style="width: 100%;">Get Credentials</a>
              <br><br>
              <div class="card-panel">
                <h6 style="font-size: 1.2em;">Credentials:</h6>
                <code id="credentials">

                </code>
              </div>
          </div>
        </div>
      </div>


    </main>

    <footer>

    </footer>

    <!-- Import jquery before materialize.js & check both versions -->
    <script type='text/javascript' src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js'></script>

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
    <script type="text/javascript" charset="utf-8">

      // Sleep function to control 'user is typing' message
      function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
      }

      // Connect to the server
      var socket = io.connect('http://' + document.domain + ':' + location.port);

      socket.on('connect', function() {
        // Get the username and store as a variable
        var $username = $("#client_username");
        // Get the input data and store as a variable
        var $clientMessage = $("#client_message");

        // Setup keyup event
        $clientMessage.keyup(function(){

          // Create an object to store the data to send to the server
          var $clientData = {
            isTyping: $username.val() + " is typing a message...",
            message: $clientMessage.val()
          };
          // Send the data to the server. Arg 1 = flask route: @socketio.on('client_connected'), arg 2 = json data
          socket.emit('client_connected', $clientData);
          // Handle the data sent from the server
          socket.on("my_response", async function(response){
            // Add the server message content to the html
            $("#server_message").html(response.message);
            // Add the username is typing message to the html
            $("#user_typing").html(response.isTyping);
            // Call the sleep function for 5000 ms
            await sleep(5000);
            // Clear the message
            $("#user_typing").html("");

          });  // End on response
        });  // End on keyup
      });  // End on connect

      // Make a socketIO request
      socket.on("connect", function(){
        $("#credential_btn").click(function(){
          $reqData = {type: "credential_request"}
          socket.emit("credential_request", $reqData);
          socket.on("credential_response", function(response){
            $("#credentials").html(
              "first_name: " + response.first_name + "<br>" +
              "last_name: " + response.last_name + "<br>" +
              "is_admin: " + response.is_admin + "<br>"
            )
          })
        });
      });

    </script>

  </body>

</html>
	from flask import Flask, render_template
	from flask_socketio import SocketIO, send, emit

	app = Flask(__name__)
	app.config["SECRET_KEY"] = "secret!"
	app.config["DEBUG"] = True
	socketio = SocketIO(app)


	@app.route("/")
	def index():
	return render_template("index.html")


	@socketio.on('client_connected')
	def chat_message(json):
	emit("my_response", json)
	print('Received JSON: {}'.format(str(json)))


	@socketio.on('credential_request')
	def credential_request(json):

	user_credentials = {
	"is_admin": True,
	"first_name": "Jon",
	"last_name": "Doe"
	}


	emit("credential_response", user_credentials)
	print('Received JSON: {}'.format(str(json)))


	if __name__ == "__main__":
	socketio.run(app)
	<!DOCTYPE html>
	<html lang='en'>
	<html>

	<head>
	<title>Fun with Flask-SocketIO</title>
	<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'>
	<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css'>
	<meta name='viewport' content='width=device-width, initial-scale=1.0' charset='UTF-8'/>
	<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700' rel='stylesheet'>
	<link rel='icon' type='image/png' href='img/icon.jpg'/>
	</head>

	<body>

	<main>

	<div class="section">
	<div class="row">
	<div class="container">
	<div class="col s4 offset-s4">
	<h4>Fun with Flask-SocketIO</h4>
	<div class="">
	<input id="client_username" type="text" placeholder="Enter your username">
	</div>
	<div class="">
	<input id="client_message" type="text" placeholder="Send a message to the server in real time">
	</div>
	<div class="card-panel">
	<h6 style="font-size: 1.2em;">Message from the server:</h6>
	<p id="server_message"></p>

	</div>
	<label id="user_typing" for="server_message"></label>
	</div>
	</div>
	</div>
	</div>

	<div class="row">
	<div class="container">
	<div class="col s4 offset-s4">
	<a id="credential_btn"class="waves-effect waves-light btn" style="width: 100%;">Get Credentials</a>
	<br><br>
	<div class="card-panel">
	<h6 style="font-size: 1.2em;">Credentials:</h6>
	<code id="credentials">

	</code>
	</div>
	</div>
	</div>
	</div>


	</main>

	<footer>

	</footer>

	<!-- Import jquery before materialize.js & check both versions -->
	<script type='text/javascript' src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js'></script>

	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
	<script type="text/javascript" charset="utf-8">

	// Sleep function to control 'user is typing' message
	function sleep(ms) {
	return new Promise(resolve => setTimeout(resolve, ms));
	}

	// Connect to the server
	var socket = io.connect('http://' + document.domain + ':' + location.port);

	socket.on('connect', function() {
	// Get the username and store as a variable
	var $username = $("#client_username");
	// Get the input data and store as a variable
	var $clientMessage = $("#client_message");

	// Setup keyup event
	$clientMessage.keyup(function(){

	// Create an object to store the data to send to the server
	var $clientData = {
	isTyping: $username.val() + " is typing a message...",
	message: $clientMessage.val()
	};
	// Send the data to the server. Arg 1 = flask route: @socketio.on('client_connected'), arg 2 = json data
	socket.emit('client_connected', $clientData);
	// Handle the data sent from the server
	socket.on("my_response", async function(response){
	// Add the server message content to the html
	$("#server_message").html(response.message);
	// Add the username is typing message to the html
	$("#user_typing").html(response.isTyping);
	// Call the sleep function for 5000 ms
	await sleep(5000);
	// Clear the message
	$("#user_typing").html("");

	}); // End on response
	}); // End on keyup
	}); // End on connect

	// Make a socketIO request
	socket.on("connect", function(){
	$("#credential_btn").click(function(){
	$reqData = {type: "credential_request"}
	socket.emit("credential_request", $reqData);
	socket.on("credential_response", function(response){
	$("#credentials").html(
	"first_name: " + response.first_name + "<br>" +
	"last_name: " + response.last_name + "<br>" +
	"is_admin: " + response.is_admin + "<br>"
	)
	})
	});
	});

	</script>

	</body>

	</html>