262Chat

This is a general web-based messeneger application with a python backend. It has support for using both Protocol Buffers and RESTFUL as the communication method between the frontend and backend. This project was created for a course at Harvard University: CS 262, Distributed Systems.

You can access a live version of our chat application deployed on AWS here, or if you wish to run this locally, it can be done with the command:

python application.py --protobuff

to use protocol buffers and:

python application.py 

to use RESTFUL

There is also a button that can be used to toggle between RESTFUL and protocol buffers in the web application itself.

Folder Structure

.
├── Messenger	     # All of the code is here
│   ├── auth          	   # Contains code used for authentication
│   ├── static         	   # Contains js, css, and other static files used by the webpages
│   ├── templates 		   # Contains the html templates for the webpages
|   ├── __init__.py		 # Initializes flask application from config file
|   ├── application.py	 # MAIN flask program that controls server
|   ├── config.py		     # Available configuration values loaded on import
|   ├── message.proto	     # Definition of Protocol Buffer Objects
|   └── message_pb2.py	 # Python file generated by protoc to interact with protocol buffers
├── .gitignore	
├── README.md
└── requirements.txt


auth
├── __init__.py	# Used to be able to reference auth as a module later 
└── auth.py		# Contains definition of User for flask_login

static
├── content				# Holds stylesheets
|	└── style.css					# Our main stylesheet for the website
├── js				    # Holds js files
|	├── ByteBufferAB.min.js		# JS file used to send ProtocolBuffers
|   ├── login.js					# JS file for login/register pages
|   ├── main.js					# The main JS file used for the chat portion of the site
|   ├── modal.js					# Used to help load ProtocolBuffers
|   └── protoCode.js				# Another JS file for ProtocolBuffers
└──	message.proto	

templates
├── create_group.html		# HTML popup used to create groups
├── index.html			# HTML for tje main chat page
├── layout.html			# Flask layout html file used to mask other html files
├── login.html			# HTML for the login page
└── register.html			# HTML for the register page

Setup

Installations you may need:

pip install flask
pip install mysql
pip install flask_login
pip install sqlalchemy

If you do not have google's protocol buffers installed do so by following the instructions here

Ensure that protoc is installed with

protoc --version

If you see some error with dll's, run the below command:

brew install --upgrade openssl; brew unlink openssl && brew link openssl --force

Once all of these are installed, cd into the Messaging folder and start up the server with

python application.py

If the server boots, you should be good to go

Description

This is a chat applications that we made for CS262 to demonstrate the use of REST and protocol buffers as methods of communication.

Built on

We use a Python Flask server and client-side Javascript to relay messages between server and client. The Web UI uses Javascript to communicate with the server using various URL end points. Messages are transmitted as JSON when using REST and as binary in protobuff encoding when using protocol buffers. We use a SQL database hosted on AWS as our datastore for messages, user and group information. The Flask server uses remote SQL queries to put and get data from the database.

How to use?

Once you have the python server running, browse to the following address from your browser:

http://locahost:5000

Here you can login or register for a new account. Once you are logged in you can use the right-hand panel to select the user you want to chat with. You also have the option of chatting with a group that you are a part of. If you are not part of any group, you can use the "Create Group" button to choose other users with which to be in a group with. Once this is done, whenever you send a message to the group, its visible to all the users in the group.

At all times, the application shows the protocol being used by the chat application in the upper left corner. You can seemlessly swith between REST and protocol buffers using the switch button under "Methods"

Libraries

JS/CSS

• bootstrap: Twitter web-framework, makes building the structure of a website very simple
• select2: Provides a customizable select box, used to make select boxes on side-bar
• semantic: Makes it easy to build custom UI items
• jQuery: Makes writing Javascript easier, less verbose and more intutive.
• modal: Makes it easier for us to show the modal for create group
• ProtoCode: Convert .proto files to a javascript dictionary
• bytebuffer: Deals with binary data in Javascript
• protobuf: Encodes and decode .proto files
• long: long integer values
• angular: makes interactions on the web easier

Python

• os: Operating System operations in Python, mainly used for file-handling
• sys: Provides access to variable maintained by the interpreter
• time: Time module in Python
• ast: Help with interpreting string encoding
• datetime: Date Time module in Python
• sqlalchemy: Allows us to easily access databases using Python
• mysql: Handles SQL requests to database
• flask: Provides a server in Python
• json: Allows us to deal with JSON data in Python easily
• flask_login: Built-in login module, helps with auth and registration
• werkzeug.security: Helps in HTML generation
• base64: Convert from and to base64 encoding
• optparse: Allows us to parse command line options

Functionality

• List accounts
• Create a group
• List groups
• Send a message. If the message is sent to an account, send a single message; if it is sent to a group, send to all members of the group.
• If the recipient is logged in, deliver immediately; otherwise queue the message and deliver on demand
• Deliver undelivered messages
• Delete an account

Authors

• Kevin Yang
• Micheal Farrell
• Muhammad Ibrahim
• Ana-Maria Constantin