Astral Express Chat - Project 5

Astral Express Chat is a simple chatting application like Discord or Messenger built using the Python web-framework Django for CS50W's final Project Capstone. Link to Certificate: https://certificates.cs50.io/e3d5595b-246d-4b79-8b2b-e24bcb51a77a

Features

• Adding Friends
• Removing Friends
• Send, Edit, or Delete messages

Installation with docker

1. run docker-compose up --build in the root of the project
2. open 127.0.0.1:8000 or localhost:8000 in your browser

Distinctiveness and Complexity

This project is different from any of the previous projects as it touches on an idea not covered by any of the previous projects, which is websockets and maintaining a live connection.

unlike project3(Mail) and project4(Network) which uses fetch to update the website only after the user makes an action. Websockets will update the site whenever a new message is receieved on the socket the user is connected to, like when a user receives a new notification, that action could be done by other users and at any time thanks to the TCP protocol.

The complexity of this project lies in its usage of the TCP protocol, which unlike normal HTTP starts with an HTTP-based handshake to establish the WebSocket connection. if successful the updates on the website becomes live, as they will now use the alive connection by TCP, this helps create apps such as a chatting application like Discord where you can talk to other people in real time.

Why did i choose this idea ?, each project in the CS50W course has helped me think differently and taught me a new topic, thats why I picked a project that would teach me something i am not familiar with, but is intresting and important in my opinion, and i had so much fun learning the new topics and overcoming the new challenges presented in this project.

Files & Directories

• Chat

  • static

    • notifications.js: this file handles the notifications that the user might get such as getting new messages or having a chat deleted, new request received, upadting UI when a new friend is added, etc.
    • chat.js: the main chatting application frontend side happens in this file, it handles establishing a connection to the correct room, updating the room with any messages that are sent, deleted, or edited inside the room.
    • styles.css: the styles for the application.

  • templates

    • index.html: contains the main application view, this application functions like a single page application so this is the only view for the entire app.
    • layout.html: basic layout for the other pages.
    • login.html: template file for the login view.
    • register.html: template file for the register view.

  • admin.py: contains the models which are displayed in the admin panel.

  • consumers.py: this file functions like the views.py of the normal django application, but uses websockets instead of normal http, it contains 2 consumers a UserConsumer and a ChatConsumer, due to the complexity of this file you will find a section below explaining it in detail along any files related to websockets.

  • models.py: contains a handful of models which are needed to make the application function like Chat, Message and FriendRequest.

  • routing.py: this file works like urls.py but for websockets, like consumers.py.

  • urls.py: contains the urls for the files in views.py.

  • views.py: contains 2 end points and 5 views, which serve basic functionalities like authentication, redirecting users to the correct rooms, etc.

• project5

  • asgi.py: the websocket asgi connection file, used by django channels.
  • settings.py: main application settings, tweaked for django channels.
  • urls.py: project's urls.
  • wsgi.py: the normal http file. that urls.py uses.

• dockerignore: what items should docker ignore when building the container.

• db.sqlite3: simple sql database was used, as django's ORM doesn't support no-sql which was more fit for a chatting application.

• docker-compose.yml: file that docker uses to build the container.

• Dockerfile: the dockerfile used to make the container.

• requirements.txt: all the needed packages to run this application.

any files that were not mentioned are auto generated by django like tests.py or __init__.py or any __pycache__ folder.

WebSockets with Django Channels

To achieve live connection as long as the user is logged into the website Django-Channels was used, alongside Redis. live connections were used for a couple of features in this application including chatting, updating the UI when a user gets a new notification or when a chat is deleted.

consumers.py

consumers.py has 2 main consumers, ChatConsumer and a UserConsumer. Every user is connected to the UserConsumer as soon as they log into the website, each user is then joined into a room that is called by the user's id user_{USERID}, and when said user receives a new message for example, a message is sent to the room user_{USERID} which would then run some logic to update the GUI of the page to show that to the user, this consumer also updates the page whenever a new friend request is sent, accepted or rejected.

The second Consumer is the ChatConsumer, when a user clicks on a chat, they are joined to a room that is named by the users who are in the room, for example if user with ID of 1 is trying to chat with the user of ID 4, the room would be called Chat/1_4 the order of IDs is always sorted. When any of the connected users sends a message to that room all users inside will get the message, currently you can only have a 1 to 1 chat, but i have added the neccessary models to allow for group chats.

The reason we have this file instead of writing these consumers in views.py is to help declutter the code and keeps things decoupled.