Project 2 - Flack

Flack is a basic chat application similar in nature to Slack or WhatsApp. Users select a username and then chat to eachother, in group channels or chatting privately one-on-one.

The application follows the basic flask application file structure - the application is run from the application.py python file on the server, the templates/ folder contains the HTML templates for the application, and static/ contains the CSS and client-side Javascript files.

application.py

The server-side script for the application. This directly stores all the data for the application and handles all of the requests from the client.

Of particular note is the use of the flask package flask_socketio which allows 'asynchronous' communication between the server and client - in other words, the server can communicate with the client and visa versa whilst the user is interacting with a page, not just when submitting HTML requests and loading the subsequent responses. SocketIO does this by continuously 'listening' for specific events on both the client and server side:

This can be seen in the functions preceeded by @socketio.on("...) - this tells Flask to continuously listen out for 'emit' events from the client, rather than just waiting for traditional HTML requests. The functions that listen for these events then emit responses that send information back to the client, which is 'listening' and 'emiting' in much the same way.

The script also makes use of the flask_socketio join_room function which directs the emit messages to particular users. Perhaps counter-intuitively, this application gives each user a unique room: this was done to more easily facilitate the private chat feature (but this logic can probably be improved upon in future).

The other app routes are basic HTML requests that return the data stored on the server in json format.

login.html / login.css

Pretty self-explanatory template / stylesheet for the login screen. The login screen asks only for a username and submits this (via POST) to he login route in application.py. No authentication is done by the application other than to ensure a username has been returned (if not an error is displayed on the login screen)

index.html / index.css / index.js

These three files make up the main page of the site, including all of the client-side script that allows the user to communicate with the server whilst interacting with the page. The following are some key features that warrant highlighting:

• SocketIO

  A SocketIO connection is formed at the beginning of index.js by calling io.connect(....). The conncection is stored in an object called socket, which is used to listen for the emit messages coming from the server via the socket.on(...) and emit its own messages via the socket.emit(....) methods.

• AJAX requests

  The front-end also makes use of a more basic form of asynchronous request known as an 'AJAX' request. Put simply, this is a standard HTTP request like those made by a browser when requesting a webpage, but made instead by the Javascript running in the client's browser whilst in use. In index.js such requests can be seen in the use of XMLHttpRequest() objects - following a pattern of .open(...), .onload(...), .load() method calls. These are used to communicate with the traditional flask routes in application.py and load all the data for each channel when a user enters or when a new message is sent.

• Handlebars

  Handlebars templates can be seen in index.html inside the tags beginning <script id="message" type="text/template"> {% raw -%} . These are used in index.js to produce HTML objects that can be filled with information where there are tags like {{ name }}, and then reproduced quickly and easily. This makes producing multiple messages with the same format much easier than only using the Jinja templating available in Flask.

• Responsive Navbar

  index.css includes a .active sub-class property for all of the HTML elements that form the navbar, that reduces margin-left: -250px;. This couples with a short section of javascript at the end of index.html that toggles the sub-class on/off when the #sidebarcollapse button is clicked.

run_app.sh

This is a simple shell script that runs the terminal commands required to run the flask application in one go, rather than having to type them individually each time the server is started.

Personal Touch(es)

As briefly mentioned above, the application includes the ability to privately message any of the current users. Each of the users appears along with the available channels under the heading DMs; users may select another user in the same way as a channel and send messages that will only be received by that user.

The app also features a collapseable sidebar - the sidebar includes all of the different chat groups and can be minimised to make extra space for the messages on screen