Flask-SocketIO, Background Threads , Jquery, Python Demo

This week I’ve been making progress on the Huggable Cloud Pillow website.

In the process I’ve learned about some sweet stuff you can do with Javascript, Python, and Flask-SocketIO.

The first thing to take note of is Flask.

Flask is the tiny server that allows us to host websites using Python to deliver content to the client. While on the server side you can manage complicated back ends or other processes using Python in conjunction with Flask.

This type of development is nice, because you can start seeing results right away but can take on big projects easily.

It might not be the most robust Framework, but its great for small projects…

If you want to get into Flask Web Development checkout this extensive MVA.

Small and simple, Flask is static on its own. This allows us to present static content, like templates and images easily and deals with input from the user using RESTful calls to receive input. This is great for static things with lots of user actions, but if we want something a bit more dynamic we’re going to need another tool.

In this case I’ve found Flask-SocketIO, similar to Flask-Sockets but with a few key differences highlighted by the creator (Miguel Grinberg) here.

Sockets are great for is providing live information with low latency. Basically, you can get info on the webpage without reloading or waiting for long-polling.

There are lots of ways you can extend this functionality to sharing rooms and providing communication with users and all sorts of fun stuff that is highlighted on GitHub with a great chunk of sample code. The following demo is based off of these samples.

For my project, I need the webpage to regularly check for differences in the state of the cloud and present them to the client, while also changing the image the user sees.

At first I tried to implement it using sockets passing information back and forth, but that wasn’t very stable.

The solution I’ve found, uses a background thread that is constantly running while the Flask-SocketIO Application is running, it provides a loop that I use to constantly check state of our queue.

Let’s break it down…
a. I need my website to display the current state of the cloud.
b. The Flask application can get the state by query our azure queue.
c. Once we determine a change of state we can display that information to the webpage.
d. To display the new state to the webpage we need to use a socket.
e. And pass the msg to be displayed.

This demo intends to break down problem a, c, d, and e.

I’ve created this little guide to help another developer get going quickly, with a nice piece of code available on GitHub.

The five steps to this little demo project are as follows:
1. Install Flask-SocketIO into our Virtual Environment
2. Create our background thread
3. Have it emit the current state to our client
4. Call the background thread when our page render_template’s
5. Have the Javascript Catch the emit and format our HTML.
Celebrate! Its Friday!

1.

Flask-SocketIO is a python package that is available for download using

pip install Flask-SocketIO

Make sure you instal it into a Virtual Environment. Check out my earlier tutorial if you need help with this step.

*Edit Here’s the top part of the “main.py” for reference:

#main.py
from gevent import monkey
monkey.patch_all()

import time
from threading import Thread
from flask import Flask, render_template, session, request
from flask.ext.socketio import SocketIO, emit, join_room, disconnect

app = Flask(__name__)
app.debug = True
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)
thread = None

2.

Create our background thread.
You’ll see in the sample code from Flask-SocketIO’s github a simple way to send data to the client regardless of their requests.

For this example we’ll be changing the current time every second and display that to our client.

Background Thread:

def background_stuff():
     """ python code in main.py """
     print 'In background_stuff'
     while True:
         time.sleep(1)
         t = str(time.clock())
         socketio.emit('message', {'data': 'This is data', 'time': t}, namespace='/test')

3

This is the emit statement from above, but is the meat of our interface with SocketIO. Notice how it breaks down…

socketio.emit('message', {'data': 'This is data', 'time': t}, namespace='/test')
socektio.emit('tag', 'data', namespace)

This emit will be sending to the client (Javascript) a message called ‘message’.

When the Javascript catches this message it will be able to pull from the python dicionary msg.data and msg.time to get the result of this package.

4

So how do we call background_stuff?

We can call it wherever we want, but for this simple example we’ll put it right in our ‘/’ base route. So when we navigate to 127.0.0.1:5000 (Local Host) we’ll see the result of our background thread call.

Here’s our route:

@app.route('/')
def index():
    global thread
    if thread is None:
        thread = Thread(target=background_stuff)
        thread.start()
    return render_template('index.html')

Pretty simple… Notice global thread and target=background_stuff

Creating different background threads is a good way to iterate through your changes.

5

Next step is catching this on the other side…

So for our Javascript…

we’ll be using the socket.on method.

socket.on('message', function(msg){
    $('#test').html('<p>' + msg.time + '</p>');
});

When we receive the emit labeled ‘message’ we’ll pick up the msg from the second parameter and have it be available to our JQuery work.

Here’s the small piece of HTML that we’re selecting to edit.

<body>
    <p id='test'>Hello</p>
</body>

I’ve posted all of this code at github.

Feel free to download it and start working with dynamic sites using SocketIO. Please let me know if you have any questions!

Code for SF's Hackathon gave out awesome tattoos!
Code for SF’s Hackathon gave out awesome tattoos!

Microsoft Wants Your Opinion

New Microsoft products!

TLDR: 

We have some new products & we want you to help shape their future:

Visual Studio Code & Feedback Page

Visual Studio Community Edition & Feedback Page

Windows 10 & Feedback Page

Edge Browser & Platform Page + Feedback Page

Open Sourced ASP.NET & Feedback Page

Here’s more info if you’re curious!

Visual Studio Code

Visual Studio Code is a cross platform text editor. Think Sublime, Atom, Notepad++, but with intellisense, git integration, and debugging!

A fellow TE, Tobiah Zarlez, has broken down some key features that I found super helpful: Tobiah’s Post

There is also great documentation on the code website about…

Supported Languages

Editing

Debugging

Customization

Feedback

The VS Code documentation is loaded with images and is an efficient way to become productive quickly.

Visual Studio Community Edition

If you’re looking for a more robust toolkit, I would also recommend Visual Studio Community Edition. This new edition is a free version of the previously priced $1000 pro version. It still supports plugins, server integration, and advanced debugging, but is free for teams smaller than 10 people. For students this could be an invaluable tool for projects.

Here are some helpful links:

Visual Studio Community Edition

Download page

Helpful Announcement Blog

Visual Studio Plugin Gallery

Visual Studio Jump Start

Feedback Page

Windows 10

Is the latest and greatest Windows operating system. Its right around the corner with some pretty awesome features.

It will be officially available July 29th, but is currently in free insider preview for people willing to get their hands on the latest bits.

Here’s a quick breakdown:

Windows 10

Insider Program

Neat Features

Feedback Page

Edge Browser

Alongside the new OS is a brand new browser. This browser is fast, modern, and built for the next generation of the internet. It was previously codenmaed Spartan.

Here’s a quick breakdown:

Edge Browser

Developer Landing Page

Developer Feedback

User Feedback

Both the Browser and Windows 10 are in (free) preview until July 29th when Windows 10 is released as a free upgrade for licensed PCs running Windows 7, 8, or 8.1.

Speaking of development pipelines… Open Sourced .NET!

Open Sourced .NET Core and ASP.NET: 

Open sourced .NET means .NET on different operating systems. Giving developers with all background the opportunity to build extremely powerful and extensible applications. Check out the Wikipedia article.

Here’s a quick breakdown:

Announcement Blog

The GitHub

The Reddit Reaction

The ASP.NET open source page for Javascript fans

The Feedback Page for ASP.NET

The best part of these new products and innovations is the way they are being built. The consumers, myself included, are the product owners and our voice and suggestions are taken into account at each build cycle. So as you use the product you can post suggestions and upvote ideas to see them get sent down the development pipeline!

We want your opinion! You can shape the future of these projects!

Wooot!


Group of Student with Matt Thompson
Inspiring Middle Scholars to Hack @developerfish