packet sniffing prototype

i mentioned many posts ago that i’m working with surya mattu on *stuff* about networks. what started out as *stuff* has narrowed in focus and we’ve started building. we have an ugly prototype of a web-based packet-sniffing tool that lets users on the same network explore how their computers are talking to each other. this has gone through many iterations, mostly riffing on the wireshark interface:

versions 1-4:


version 5:


we’ve settled on a combination of these two, with a toggle that lets you switch between a visual view and hex view. i’ll post screen shots once that’s all built out.

back end

version 5 above has an actual back end, which surya built and which lives here:

what’s happening here? this is an express server application that uses a node library called node pcap to capture network packets. right now, the server listens for packets on port 3000, parses them, and saves them out to a json file called test.json. separately, the express server serves a static file called packet.json so if you visit http://localhost:3000/data/packet.json you’ll see the json file that is used to create the front end visualization in the screen shot above. eventually, we want the server to serve up the packets it sniffs and saves, but for now we’re simulating that situation.

front end

the front end, which lives here:, is built with webpack,, and vue.js. the back listens to packets traveling over the network, saves and parses them into a json file, then serves that json file to the front via socket over port 7777.

Leave a Reply