An implementation of real-time browser communication protocols with accompanying teaching tools

Abstract

Networking theory is taught throughout education with varying specificity, this dissertation focuses on the types of networks achievable in the modern web browser. There are many parameters that contribute to the performance of a network, whether it be available bandwidth, protocol used, transmission latency, etc. It is up to the developer to be aware of these parameters and to leverage them for the best performance possible. An application is made to show, side by side, the effects of aforementioned network parameters in a system. A prototype implementation of the WebRTC protocol is made and compared to an equivalent WebSocket architecture. A second network configuration and simulation web-app is made to allow simulation of more complex network behaviour, and assist in teaching a range of web protocols.

The results of this project show that whilst WebRTC enables UDP communications for the web, at minimum, it uses more bandwidth than a TCP WebSocket. The project also establishes the rather complicated steps necessary to use WebRTC, within the browser, or in a Node.js server environment. The developed simulations are tested and had a range from 5 - 25% margin of error, and their application for demonstrating effects of environment variables on a network and teaching protocols via simulation is evaluated. The simulations can be used to demonstrate whether a network configuration will ‘fail’ by running out of bandwidth, and subsequently estimate the bandwidth necessary

Products of the Dissertation

Supplementary Material

The zip of all code produced that is related to this dissertation

  • Download Supplementary Material
  • Images

    If these are of interest, there are more inside the Dissertation PDF

    Asset 1, TCP Network Environment Simulation

    A screenshot from the TCP Network Simulator.

    Asset 2, WebRTC Implementation - Client / Server Chat

    A screenshot from the WebRTC Client / Server chat

    Asset 3, Netsim: User-Specified Network Simulator

    An example of user-specified complex client behaviour within netsim
    100 clients following the above configuration in a real-time simulation.
    Real time message capture and display within netsim
    Results of simulation for each server are recorded in an interactive chart (Chart.js)

    Technical

    Server configuration for this project. Outlines client interaction via different ports: HTTPS, WebSockets, WebRTC, TURN / STUN server
    A diagram to show flow of client / server WebRTC Node.js server
    A diagram to show flow of Asset 1 operation
    A diagram to show order of client connections to establish a peer to peer connection to Node.js WebRTC application in client / server architecture
    A diagram to breakdown message flow between clients and servers within netsim