Hello everyone, hope everyone is doing well. In this blog, we will describe our project Network Simulator developed in Svelte.
If you want to check the website before click here
Motivation
We had Computer Networks and Cryptography as our subjects in our semesters V and VI of Computer Engineering. Computer Networks included different TCP/IP layers and their various protocols and Cryptography consisted of different security algorithms and cryptographic attacks, which were difficult for us to imagine and visualize. So, to overcome this and we had planned to develop a software application which will be helping hand to students.
Let me introduce to you Network Simulator, this application helps user simulates the network configurations (eg: ARP Spoofing, Firewall, Diffie-Hellman key exchange, Man in the Middle attacks, etc.) in the form of animations which will help teachers for teaching and students to learn and more importantly help them visualize how the inner processes on how they actually work. With this according to the user's knowledge, they can even simulate low levels of networks.
Reason for choosing Svelte
SInce Svelte is a relatively new tech stack we wanted to try out. Our project consists of animation using SVG which requires full access to div components which is possible to a great extent in Svelte regarding other libraries like React it more like the user takes care of data manipulation and updating of UI is done by the library.
Being a compiler and getting rid of the VirtualDOM is the most important advantage of Svelte that facilitates many of the other advantages we will see below. Svelte produces highly optimized vanilla JS with a very minimal overhead at runtime. This means small bundle sizes, a low memory footprint, and a fast-loading and fast-running application.
Working
Initially, we take the structure of the connection of the network in form of a graph, then using Vis.Js and SVG.Js we draw the network and its connections.
Let's refer to the routers or computers as nodes and the connection between them as edges. Users can now add the memory of respective nodes and the function it should perform in the form of Javascript function along with this initial enqueuing of packets as well as enqueue according to users need at a respective node can be done.
- After proving this information user can click the start animation button can view the working of the network. While the animation is going in user can also check logs for packet drops or any related errors and see the packet history of the whole network.
Use our JSON file for ARP spoofing, TCP three-way handshake and Firewall for a better understanding (examples)
Animation Logic
So this was one of the biggest challenges on how to locate the distance of packets along the edges of the connection. First, we got the coordinates of nodes using Vis.js and then normalized those coordinates according to our window size and need. Using vectors(concept of dot products), we calculate the vector from node A to node B i.e to and from in our case and using that the offset distance of packet from the edge.
Addon to make life easy
User can just code the network once and download that file in form of a JSON file by just click the download button provided.
User can now share this JSON file with others and all that is needed to be done is just upload the file with one click.
All the projects are stored in the library in the local storage of the browser so they can be easily accessed and the user can work on multiple projects at the same time.
While working on the project user can save their progress by clicking the Save button in the navigation bar or use
Ctrl+SorCMD+Sto save.While writing the function it has all the necessary functionalities like auto-bracket completion, matching brackets, indentation, syntax highlight and line numbers.
Final Thoughts
We have a vision that this application will revolutionise the process of learning networking by providing the users with a simple and efficient user interface to animate the packet exchange process. We hope to see a tomorrow where Teachers and Students use our application to enhance the teaching and learning process.
GitHub Repository here
We have taken utmost care to write the code in a well-documented format and added comments for easier understanding for developers out there who found this interested.
Connect with Us
Yashodhan Joshi GitHub LinkedIn
NOTE: Cover photo is from Google search images.