We wanted to count how many students were playing Krunker in class. We made a thing that lets us do that.
What it does
NetworkVisualizer is only the front end - the site connects to an SQL database or any other Entity Framework Core compatible structure, and compiles data into neat graphs and a clean interface using Google.DataTable.Wrapper.Net (made by Zoran Max on GitHub) and Google's Visualization API for charts. NetworkVisualizer comes with an administrative panel for control over services built into the webapp, as well as viewing and editing data in a raw form.
Because NetworkVisualizer is only the front end, data is gathered through a separate utility developed by Aidan Smith. This utility sends JSON serialized data over HttpPost requests to our http://networkvisualizer.ml hosted on Microsoft Azure (HTTPS Version). Theoretically, the packet sniffer could also add data directly to the SQL database, but we have not tested this.
How I built it
Kyle - I started out with an ASP.NET Core 2.1 MVC template generated by Visual Studio and took a site layout I had previously made for other projects in the web, and slowly added and changed things as I saw fit with some peer consultancy. The site is definitely not done and there is a lot to do going forward, so incremental improvements will happen over time.
Aidan - Utilizing PyShark, which leverages the variability of Tshark to capture packets, I first enabled the service to capture TCP and UDP packets. From here, these helpful fellow allowed me to build a multithreaded variant that could combine all 3 types of accepted packets,TCP, UDP, and DNS. In the future, I look to use multiple servers with multiple instances of the server for packet checking.
Challenges I ran into
Although C# data structures are fantastic and fun to work with locally, they aren't so nice when trying to jump languages like we did in this project. We had to find some not-trash solution to serialize data between Python and C#, and for now at least, we ended up going with a jank string concatenation method on the sniffer end and a deserialization into a Tuple for each packet. This was probably the hardest thing to pull off because of how Newtonsoft.Json serializes and deserializes things, and we will likely revisit this to improve on it.
Accomplishments that I'm proud of
The UI/UX of this site, while no where near done or complete and totally subject to change right now, is definitely something I'm fairly happy with as it (mostly) functions across most screen aspect ratios and looks sorta decent.
What I learned
Kyle - The Surface Laptop 2, which was the only device (besides ones used for testing) I used to make NetworkVisualizer, has a very nice keyboard and screen.
Aidan - I have HTTP Post-traumatic stress disorder from trying to send those JSONS, in addition to learning that an 11:9 aspect ratio is hot garbage.
What's next for NetworkVisualizer
UI/UX improvements, administration improvements, backend optimization, and lots more are to come. You can find what's next on our GitHub project boards at our repo.