But why GridDB? As we navigate through the intricacies of WiFi network monitoring, the choice of a reliable and efficient storage mechanism becomes paramount. GridDB, with its unique features and optimized performance characteristics, emerges as an ideal candidate. Paired with the versatility of Node.js, the rich user interface capabilities of React, and the cross-platform advantages of Tauri, we aim to present a holistic approach to effective network monitoring.<\/p>\n
Source Code<\/h2>\n
There are a few steps to set up the project:<\/p>\n
Preparation<\/h3>\n
This source code was tested on Windows 11 and with Ubuntu 20.04 on WSL2 and heavily depends on the native packet capture, which is Npcap<\/strong> on Windows.<\/p>\n Before installing, ensure that your Windows system has a WiFi device. Please note that this project has only been tested with one WiFi device.<\/p>\n<\/blockquote>\n Npcap<\/a> is a packet capture and sending library for Microsoft Windows. We need to install this software first so that later we can use it with the node.js npm package, such as To download Npcap, please visit their site<\/a> and choose the appropriate installer type for a hassle-free installation. Upon installation, leave every option at its default.<\/p>\n Clone the source code from this GitHub repository<\/a>.<\/p>\n There will be two servers running on different operating systems. The first one is the Node.js<\/strong> server that acts like a forwarder that will run on Windows, we callled Node.js Forwarder<\/strong>, and the second one is the Node.js<\/strong> server that connects to GridDB<\/strong> that will run on Linux.<\/p>\n The Node.js Forwarder<\/strong> will capture the WiFi network traffic and send it to the Node.js<\/strong> server on Linux. The Node.js<\/strong> server on Linux will store the captured packets and save them in the database and also will serve the data to the Tauri<\/strong> desktop application.<\/p>\n Go to the To capture packets in this project, we use the However, the Configure the This command will run the Node.js forwarder on Windows:<\/p>\n Clone the source code from this GitHub repository<\/a>. Go to the Configure the Make sure this port matches with the This command will run the server on Linux:<\/p>\n Download the desktop binary file from here<\/a>. Run the installer and go to the installation directory.<\/p>\n Open the Make sure the For example, if the Run the desktop application, double click Within the architecture of the Desktop WiFi Network Monitor, Npcap<\/strong> stands out as a powerful packet capture module optimized for Windows OS. This utility continuously fetches WiFi network packets, subsequently channeling them to our dedicated Node.js Forwarder<\/strong>. This forwarder will then send the packets to the Node.js Server<\/strong> that will store the data in the GridDB<\/strong> database. The Node.js Server<\/strong> will also serve the data to the Desktop Database Monitor<\/strong> that will display the data on a desktop dashboard.<\/p>\n Capturing network traffic using Node.js typically involves native modules that interface with system-level libraries like libpcap<\/strong> (on Unix-like systems) or WinPcap\/Npcap<\/strong> (on Windows). For this post, we will use Windows OS<\/strong> and Npcap<\/strong>.<\/p>\n Node.js\u00c2\u00ae is an open-source, cross-platform JavaScript runtime environment. Download the Windows installer from here<\/a>. We will use the Node.js LTS v18.18.0 version. There are many ways to install Node.js in Windows, and please look into their documentation<\/a>. We can use 3rd party Windows package installer such as chocolatey<\/a> or use the manual installation.<\/p>\n You can check the Node.js installation in the terminal by running this command:<\/p>\n GridDB is a highly scalable NoSQL database specifically tailored for time-series data. Rooted in its unique architecture, it offers both in-memory and disk-based storage, ensuring optimized performance and data durability. Its architecture is designed to handle massive volumes of data, making it a preferred choice for IoT, telemetry, and any application where time-based data is crucial. Beyond its core features, GridDB boasts advanced functions like automatic partitioning and robust failover mechanisms, ensuring data consistency and high availability.<\/p>\n Go to the Official GridDB website<\/a> for installation information.<\/p>\n The code for packet capture is pretty easy. The This packet is hosted on You can check the packets before sending to the Node.js server on Linux by opening The Node.js server is a simple Node.js server that runs on Linux and will receive the captured packets and store them in the GridDB database. The database server will run on The packets data will received via The You can check the packets data by opening Tauri<\/a> is a toolkit for building small, secure, and fast applications with web technologies. It’s a competitor to Electron<\/a>, aiming to provide a leaner and more performant solution for creating desktop applications with web front-ends. The core idea is to enable developers to use familiar web technologies while reducing the bloat and potential security issues associated with bundling a complete Chromium instance, which is what Electron does.<\/p>\n Tauri is built in Rust<\/a>, a memory-safe language and its core is a very lightweight webview rendering engine. This allows for significantly smaller binary sizes and lower resource usage compared to Electron. It also provides a strong security model by minimizing the necessary permissions and isolating the web content from the system.<\/p>\n The motivation behind Tauri’s creation was to address the common criticisms of Electron regarding size, speed, and security while preserving the ease of development and cross-platform capabilities that web technologies provide.<\/p>\n React<\/a> is a JavaScript library for building user interfaces, maintained by Facebook and a community of individual developers and companies. It was created to facilitate the development of complex, interactive UIs in an efficient and flexible manner. React’s virtual DOM<\/a> further optimizes rendering and improves app performance. The declarative nature of React simplifies the code, making it easier to debug and manage. The component-based architecture allows developers to build encapsulated components that manage their own state, which can then be composed to make complex UIs. React also empowers developers with the ability to create web applications that can update and render efficiently in response to data changes.<\/p>\n\n
Install Npcap<\/h4>\n
cap<\/code><\/a>, to perform packet capturing.<\/p>\n![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/01\/npcap-windows.png\")
<\/a><\/p>\nClone the Source Code on Windows<\/h3>\n
Node.js Forwarder<\/h4>\n
git clone git@github.com:junwatu\/bearsakura-netwatch.git<\/code><\/pre>\n<\/div>\nserver<\/code> directory and install all the dependencies.<\/p>\ncd server\nnpm install<\/code><\/pre>\n<\/div>\ncap<\/code> npm package that requires node-gyp<\/code> to build the native module. This native module is the bridge between Node.js and Npcap. When we run npm install<\/code>, it automatically creates the native module. To make sure it works, you can install it globally.<\/p>\nnpm install -g node-gyp<\/code><\/pre>\n<\/div>\nnode-gyp<\/code> itself has dependencies, like Python and a C++ compiler, which must be installed on the system to work correctly. Please read the node-gyp Windows documentation guide<\/a>.<\/p>\nConfigure
env<\/code><\/h4>\n.env<\/code> file, and change the port if you have to. These are the default values:<\/p>\nPACKET_PORT=5000\nDATABASE_SERVER_PORT=4000<\/code><\/pre>\n<\/div>\n\n
PACKET_PORT<\/code> is where the port of Node.js forwarder on Windows listens to. Change this if necessary.<\/li>\nDATABASE_SERVER_PORT=4000<\/code> is where the port of the Node.js server on Linux listens to.<\/li>\n<\/ul>\nRun the forwarder<\/h4>\n
npm run dev<\/code><\/pre>\n<\/div>\nClone the Source Code on Linux<\/h3>\n
server-db<\/code> directory and install all the dependencies.<\/p>\ncd server-db\nnpm install<\/code><\/pre>\n<\/div>\nConfigure
env<\/code> for the server on Linux<\/h4>\n.env<\/code> file and change the port if necessary. This is the default value:<\/p>\nDATABASE_SERVER_PORT=4000<\/code><\/pre>\n<\/div>\n.env<\/code> configuration on the Node.js Forwarder<\/strong>. For example, if the .env<\/code> configuration is DATABASE_SERVER_PORT=3000<\/code>, this port should be 3000<\/code> too.<\/p>\nRun the server on Linux<\/h4>\n
npm run dev<\/code><\/pre>\n<\/div>\nRun the desktop monitor<\/h3>\n
config.json<\/code> file:<\/p>\n\n{\n \"api\": {\n \"base_url\": \"http:\/\/localhost:4000\"\n }\n}<\/code><\/pre>\n<\/div>\nbase_url<\/code> port is match with the .env<\/code> configuration DATABASE_SERVER_PORT=4000<\/code>.<\/p>\n.env<\/code> configuration have DATABASE_SERVER_PORT=3000<\/code> then the base_url<\/code> should be http:\/\/localhost:3000<\/code>.<\/p>\nBearWacth.exe<\/code>:<\/p>\n![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/01\/desktop.png\")
<\/a><\/p>\nSystem Architecture<\/h2>\n
![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/01\/system-arch.png\")
<\/a><\/p>\nCapture Network Traffic<\/h2>\n
Backend Development with Node.js and GridDB<\/h2>\n
Node.js<\/h3>\n
node --version<\/code><\/pre>\n<\/div>\nGridDB<\/h3>\n
Packet Capture with Node.js<\/h3>\n
startCapturing(ipAddress)<\/code> function will start the packet-capturing process. It will detect the WiFi interface and start capturing the packets. The getPackets()<\/code> function will return the captured packets.<\/p>\nimport pkg from 'cap';\nconst { Cap, decoders } = pkg;\n\nconst PROTOCOL = decoders.PROTOCOL;\n\nlet packets = [];\n\nfunction startCapturing(ipAddress) {\n const c = new Cap();\n const device = Cap.findDevice(ipAddress);\n const filter = 'ip';\n const bufSize = 10 * 1024 * 1024;\n const buffer = Buffer.alloc(65535);\n\n const devices = Cap.deviceList();\n const wifiDevice = devices.find(device => {\n const description = device.description.toLowerCase();\n return description.includes('wireless') || description.includes('wi-fi');\n });\n\n if (!wifiDevice) {\n console.error('No Wi-Fi device found!');\n process.exit(1);\n }\n\n const wifiInterfaceName = wifiDevice.name;\n const linkType = c.open(wifiInterfaceName, filter, bufSize, buffer);\n\n c.on('packet', function(nbytes, trunc) {\n const ret = decoders.Ethernet(buffer);\n\n if (ret.info.type === 2048) {\n const decodedIP = decoders.IPV4(buffer, ret.offset);\n const srcaddr = decodedIP.info.srcaddr;\n const dstaddr = decodedIP.info.dstaddr;\n\n let packetInfo = {\n length: nbytes,\n srcaddr: srcaddr,\n dstaddr: dstaddr\n };\n\n if (decodedIP.info.protocol === PROTOCOL.IP.TCP) {\n const decodedTCP = decoders.TCP(buffer, decodedIP.offset);\n packetInfo.protocol = 'TCP';\n packetInfo.srcport = decodedTCP.info.srcport;\n packetInfo.dstport = decodedTCP.info.dstport;\n } else if (decodedIP.info.protocol === PROTOCOL.IP.UDP) {\n const decodedUDP = decoders.UDP(buffer, decodedIP.offset);\n packetInfo.protocol = 'UDP';\n packetInfo.srcport = decodedUDP.info.srcport;\n packetInfo.dstport = decodedUDP.info.dstport;\n }\n\n packets.push(packetInfo);\n\n \/\/ Limit the storage to the last 100 entries (or any other number)\n if (packets.length > 100) packets.shift();\n }\n });\n}\n\nfunction getPackets() {\n return packets;\n}\n\nexport { startCapturing, getPackets };<\/code><\/pre>\n<\/div>\nhttp:\/\/localhost:5000\/packets<\/code> (the port and host depend on the .env<\/code> configuration settings). This Node.js server will act like a forwarder. It runs on Express.js and uses the startCapturing<\/code> module to get the captured packets.<\/p>\n\nimport 'dotenv\/config';\nimport express from 'express';\nimport bodyParser from 'body-parser';\nimport axios from 'axios';\nimport * as packetCapturer from '.\/packetCapturer.js';\n\nconst app = express();\napp.use(bodyParser.json());\n\nconst PORT = process.env.PACKET_PORT || 3000;\nconst HOST = process.env.PACKET_IP_ADDRESS || 'localhost';\nconst SERVER_DB_HOST = process.env.DATABASE_SERVER || 'localhost';\nconst SERVER_DB_PORT = process.env.DATABASE_SERVER_PORT || 4000;\n\npacketCapturer.startCapturing(process.env.PACKET_IP_ADDRESS);\n\nsetInterval(async () => {\n const packets = packetCapturer.getPackets();\n try {\n await axios.post(`http:\/\/${SERVER_DB_HOST}:${SERVER_DB_PORT}\/save-packets`, packets);\n console.log('Packets sent successfully');\n } catch (error) {\n console.error('Error sending packets:', error);\n }\n}, 5000); \/\/ Adjust the interval to your needs\n\n\napp.get('\/packets', (req, res) => {\n res.json(packetCapturer.getPackets());\n});\n\napp.listen(PORT, HOST, () => {\n console.log(`Server started on http:\/\/${HOST}:${PORT}`);\n});<\/code><\/pre>\n<\/div>\nhttp:\/\/localhost:5000\/packets<\/code> in the browser. This forwarder will send packets to the Node.js server on Linux for every 5 seconds.<\/p>\nNode.js Server<\/h3>\n
http:\/\/localhost:4000<\/code> (the port depends on the .env<\/code> configuration settings).<\/p>\nimport 'dotenv\/config';\nimport cors from 'cors';\nimport express from 'express';\nimport bodyParser from 'body-parser';\nimport* as griddb from '.\/griddbservice.js'\n\nconst app = express();\napp.use(cors());\napp.use(bodyParser.json());\n\nconst PORT = process.env.DATABASE_SERVER_PORT || 4000;\nconst HOST = process.env.DATABASE_SERVER || 'localhost';\n\napp.get(\n '\/info', (req, res) = > { res.json({message : 'database server'}); });\n\napp.post(\n '\/save-packets', async(req, res) = > {\n const packets = req.body;\n\n for (let packet of packets) {\n const {length, srcaddr, dstaddr, protocol, srcport, dstport} = packet;\n await griddb.saveData(\n {length, srcaddr, dstaddr, protocol, srcport, dstport});\n }\n\n res.json({message : 'saved'});\n });\n\napp.get('\/get-all-packets', async (req, res) => {\n const packets = await griddb.getAllData();\n res.json({packets});\n})\n\napp.listen(PORT, HOST, () => {\n console.log(`Server started on http:\/\/${HOST}:${PORT}`);\n});<\/code><\/pre>\n<\/div>\nPOST<\/code> method on \/save-packets<\/code> endpoint. The saveData<\/code> function will save the data to the GridDB database.<\/p>\nawait griddb.saveData({length, srcaddr, dstaddr, protocol, srcport, dstport});<\/code><\/pre>\n<\/div>\ngetAllData<\/code> function will get all the data from the GridDB database. This data that will be send to the desktop application.<\/p>\napp.get('\/get-all-packets', async (req, res) => {\n const packets = await griddb.getAllData();\n res.json({packets});\n})<\/code><\/pre>\n<\/div>\nhttp:\/\/localhost:4000\/get-all-packets<\/code> in the browser, to make sure the packets data is saved in the database.<\/p>\nFront-end Development with Tauri and React<\/h2>\n
Tauri<\/h3>\n
React<\/h3>\n
Tauri and React<\/h3>\n