SocketIO

As I learned about SocketIO, at first it seemed pretty confusing to me but as I look back at it now, it makes a lot of sense.

Flask can use SocketIO which is an AngularJS wrapper for controllers that can easily send data back and forth from the frontend through Javascript and the backend of it will receive the data.

AngularJS runs in the browser. So in order to use SocketIO, you need to have something running in the browser (which will be the AngularJS) and something on the server side (which will be the Python/Flask SocketIO). If a socket receives data from the server and is sent to the right function, then the function is called.

Before we start to code on Flask-SocketIO, you need to install Flask-SocketIO which you need to put in your terminal:

`sudo easy_install flask-socketio`

In your HTML files, you need to add the following 2 lines to import some javascript libraries :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.4/socket.io.js"></script>

You can call any JavaScript functions from within any HTML files. The controller.js has functions that can work with the server. The reason that works is because socket.io links the HTML to JavaScript which allows reality results.

I’ll show you a couple example here from the HTML side and the JavaScript (Controller) side:

HTML side

<form method="POST" ng-submit="send()">
  <input type="text" ng-model="text" size="30" placeholder="..">
  <input type="submit" name="sendButton" value="Send" ng-disabled="!text">
</form>

JavaScript side

$scope.send = function send(){
console.log('Sending message: ', $scope.text);
socket.emit('message', $scope.text);
$scope.text = '';
};

The JavaScript has a matching function on the HTML side “send()”and is able to access the text that the user typed. Since the HTML and JavaScript are linked with each other, every time as the user updates the “ ng-model=”text” “ input, the $scope.text variable is updated as well. It’ll allow on the controller side to emit a signal to the server side and let it handle either retrieving or inserting the messages into the database.

Now, let’s look at a simple way to handle from the controller side to the server side to understand the concept easier from how I understood this SocketIO concept. You need a Javascript function that will eventually be called when something is clicked on the frontend of the website. Depending on what is clicked on the browser, that particular data will be sent from the frontend of the website to the Javascript side. Now that data, it has to be sent to a function that implements SocketIO in Flask (Python side), an example can be like this:

$scope.setName = function setName(){
    socket.emit('identify', $scope.name)  
};

Going forward to the server side (Python/Flask SocketIO), the data is sent to the function that was named in the first parameter of socket.emit() (‘identify’) on the Javascript side. The second parameter of the socket.emit() ($scope.name) is the data which is going to be to sent to Flask:

@socketio.on('identify', namespace='/iss')
def on_identify(user):
    print('Identify: ' + user)
    users[session['uuid']] = {'username' : user}

Now if we wanted to send the data back to Javascript to display something on the frontend, we could emit again from Flask. Again, the emit parameters are the same.

@socketio.on('connect', namespace='/iss')
def Connection():
    session['uuid'] = uuid.uuid1()
    emit('connected')

So we will use this function to send data back to Javascript side:

socket.on('connected', function(){
       console.log('Connected'); 
});

Source: https://flask-socketio.readthedocs.io/en/latest/