MOD21: Web Interface - GoranErdeljan/TINF19C-Team-4-Service-Registry GitHub Wiki

Created by Benedict Wetzel

1. Introduction

This module creates a Web-Interface the user can use to look at all DNS-SD-Entries that are found on the network. It is a sub-module of MOD20.

2. Requirements

The following requirements are covered by this module:

3. Prerequisites

In order to use this module the following prerequisites should be met:

  • The developer should have a working computer that can access the internet
  • The developer should use a Linux-based OS
  • The developer should have Node.js version 12.14.1 or higher installed
  • The developer should have NPM version 7.10.0 or higher installed
  • The developer should have at least some basic experience with Node.js

4. Dependencies

This module depends on the following items:

5. Technical overview

This module uses expressjs as a backend for a Web-Interface. All static assets that are available on the server are in the wwwroot directory.

5.1 wwwroot

This folder contains all files that are part of the frontend of the Web-Interface.

File Description
css/styles.css This file contains a couple of CSS-Classes that are used by the index.html file.
js/scripts.js This file contains a script that is used by the index.html to update the list of DNS-SD-Entries every ten seconds.
js/jquery-3.6.0.js This file contains the jquery-library that is used by scripts.js and makes the HTTP-Request easier.
index.html This file is the main file of the frontend and links all other files of the frontend.

5.2 webInterface.js

The webInterface.js file contains the backend of the Web-Interface. It uses the express NPM package to start a webserver that listens to HTTP-Requests on a port specified in the configuration of the module. To serve the static assets of wwwroot the NPM package serve-static is used.

Function Description
setConfig Sets the configuration of the module. This function must be called before the start function.
start Starts the express-webserver to answer HTTP-Requests. The NPM package serve-static is used to serve the static files of the frontend. Added to that a endpoint is created that responds with a list of DNS-SD-Entries encoded as a JSON-String. This function also registers two functions to be called periodically by the setInterval function. One of them checks if the DNS-SD-Entries in the list are still relevant by checking their time-to-live attribute. The second function is used to log the length of the list to the console.
addDNS_SDEntries Adds DNS-SD-Entries to the list. The function formats the given DNS-SD-Entry to a JavaScript-Object that makes it easier to access the entries properties. A timestamp is added, that contains the time when the entry is no longer valid, based on the current time and the DNS-SD-Entries ttl property.

5.3 package.json

Sets the dependencies and is used by NPM to install the required NPM packages.