WebSockets for live page updates

You can find all my merged PRs in this link.


Why?

Why do we need websockets?

WebSockets allow users’ pages to get dynamically refreshed/updated without the need to manually refresh the page every now and then.
This behaviour is useful in pages that are accessed by multiple users simultaneously. So, new updates are fetched automatically and only the necessary parts of the page are re-rendered without refreshing the whole page to get the updates reducing the load on the server.


What?

Which pages use websockets so far?

4 pages are currently getting updated using websockets:

1. Discussion Forum

Nearly all forum-related functions use websockets:

In this gif a new thread is created on one user’s window and the update is reflected on the other window, new posts are added and thread is marked as resolved.
Discussion forum demo

2. Office Hours Queue

The office hours queue is currently fully working with websockets instead of polling (Check for updates on a time interval of 30 seconds): #5660

  1. Join / Leave queue
  2. Remove student from queue
  3. Restore student
  4. Add / modify announcement

An example of the office hours queue working with websockets
Office hours queue demo

3. Grade Inquiry

A student can open a grade inquiry for a gradeable if allowed, the grade inquiry is much like the discussion forum and is fully working with websockets as well. #5765

  1. Post additional information
  2. Respond and resolve inquiry
  3. Close / reopen inquiry
  4. Add comment

4. Checkpoint & Numeric Grading

Both the checkpoint and numeric grading are working with websockets but there is still some area for improvement. #5829

An example for the checkpoint cells updating with websockets
Checkpoint grading demo


How?

How websockets work?
  1. Users open websocket clients when document is ready.
  2. User 1 makes a request (eg. reply to a post)
  3. Upon request success, user’s websocket client sends a socket message indicating that there is an update (eg. {'type': "new_post", 'post_id': #id})
  4. The websocket server broadcasts / forwards the socket message to all other users (websocket clients) on the same page.
  5. Other websocket clients receive the socket message.
  6. Upon message receiving users call the associated function depending on the message type mentioned above (eg. SocketNewPostHandler())
  7. The associated function makes an Ajax request to fetch the new post and place it in the correct place in the DOM.

Refrences

For the above explained example:


Future Work

WebSockets open multiple areas for development / improvement including but not limited to:


Acknowledgment

I’m very grateful for spending the summer coding with Submitty, I would like to thank Barb Cutler, Submitty Admin, for this amazing period and the awesome organizing and her flexibility, I would also like to thank all my mentors Andrew Aikens, Matthew Peveler, Kevin McKinney and Shail Patel for their constant guidance and their quick response.

This summer with Submitty was an unforgettable experience, whenever I’m asked for a recommendation on open source contribution or GSoC Submitty will be the first thing to come to my mind.