The New Web: Part 2 – Building A New Web App Written In JavaScript/TypeScript

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "strictNullChecks": false,
    "noImplicitAny": false,
    "esModuleInterop": true
  }
}

master.server.ts

import Express from 'express';
import bodyParser from "body-parser";
import * as http from 'http';

/** General form of a server plugin. */
export interface IServerPlugin {

    /** The MasterServer that owns this plugin. */
    masterServer: MasterServer;

    /** Allows this plugin to initialize itself */
    initialize(): void;

    /** Allows this plugin to register its routes with the application. */
    registerRoutes(): void;
}

/** Responsible for implementing multiple plugins that supports our overall server capabilities. */
export class MasterServer {
    constructor(portNumber: number, plugins: Array<IServerPlugin>) {
        this.plugins = plugins;
        this.portNumber = portNumber;

        // Perform initialization.
        this.initialize();
    }

    private _httpServer: http.Server;
    /** Returns the underlying node HTTP server used for communications with the client. */
    get httpServer(): http.Server {
        return this._httpServer;
    }

    private _expressApp: Express.Application;
    /** The Express application that handles the pipeline and server calls. */
    get expressApp(): Express.Application {
        return this._expressApp;
    }

    /** Array of plugins that add arbitrary functionality to the server. 
     *   This is set in our constructor.    */
    private readonly plugins: Array<IServerPlugin>;

    /** The port number that our server runs on. */
    readonly portNumber: number;

    /** Initializes this server object, and all of the plugins. */
    private initialize(): void {
        // Create the new express app.
        this._expressApp = require('express')();

        // Socket.IO needs access to the underlying http server.  This provides that.
        this._httpServer = require('http').createServer(this.expressApp);

        // Without this, our requests don't have a body when received from the clients.
        //  This allows for special cases, the body stream may not simply be text.
        this.expressApp.use(bodyParser.text());

        /** This is responsible for taking parameters in URL queries, and 
         *   placing them in the Params of our requests when they are received. */
        this.expressApp.use(Express.urlencoded({}));

        // We just want to print something to the console with every request here.
        this.expressApp.use((req, res, next) => {
            // Log this to the console.
            console.log(`Received Request: ${req.path}, ${req.ip}`);

            // This tells express that our function (middleware) didn't completely handle the request and to
            //  keep searching for a function that does.  Without it, no other middleware is called after this.
            next();
        });

        // Initialize the plugins.
        this.initializePlugins();

        // Register their endpoints.
        this.registerPluginEndpoints();
    }

    /** Perform initialization of the plugins, allowing them to register their routes and perform
     *   any other setup needed. */
    private initializePlugins(): void {
        this.plugins.forEach(p => {
            // Set the owner on this plugin, and then let it initialize.
            p.masterServer = this;
            console.log(`Initializing Plugin: ${p.constructor.name}`);
            p.initialize();
        });
    }

    /** Registers all endpoints on the plugins. */
    private registerPluginEndpoints(): void {
        this.plugins.forEach(p => {
            console.log(`Registering routes for: ${p.constructor.name}`);
            p.registerRoutes();
        });
    }

    /** Starts the server listening for server requests. */
    listen(): void {
        this.httpServer.listen(this.portNumber);
    }
}

web-server.plugin.ts

import { MasterServer, IServerPlugin } from "./master.server";
import Express from 'express';
import * as path from 'path';

/** Server plugin that serves static files.  NOTE: This should be the LAST plugin
 *   registered with the master server, because it will handle 404 errors when routes are not found. */
export class WebServerPlugin implements IServerPlugin {
    constructor(contentPath: string) {
        this.contentPath = contentPath;

        console.log(`Serving files from: ${contentPath}`);
    }

    /** Full path to the root folder of files that this webserver will be serving from.
     *   NOTE: This will be our client's output files. */
    private readonly contentPath: string;

    /** The MasterServer that owns this plugin. */
    masterServer: MasterServer;

    initialize(): void {
        // Do nothing.
    }

    registerRoutes(): void {
        // We want to direct calls to the root of our site to our index.html file.
        //  NOTE: This MUST come before the registration of EXPRESS.static middleware below, or it won't work.
        this.masterServer.expressApp.get('/', (req, res) => {
            res.sendFile(path.join(this.contentPath, 'index.html'));
        });

        // This will cause express to serve file requests from matching files found in the contentPath.
        this.masterServer.expressApp.get('*', Express.static(this.contentPath));
    }
}

import { MasterServer, IServerPlugin } from "./master.server";
import { convertDates } from "./shared-definitions";
import { EP_SEND_NEW_MESSAGE } from "./shared-definitions";
import { EP_GET_ALL_MESSAGES, MSG_SEND_MESSAGE, MSG_MESSAGE_RECEIVED, IChatMessage } from "./shared-definitions";
import { MongoClient, Db, ObjectId } from "mongodb";
import * as socketio from 'socket.io';

/** Name of the database collection (table) that holds chat messages. */
const MESSAGE_COLLECTION_NAME = 'messages';

/** Server Plugin that handles chat message handling. */
export class ChatServerPlugin implements IServerPlugin {
    constructor(dbConnectionString: string) {
        this.dbConnectionString = dbConnectionString;
    }

    /** Connection string to our database. */
    readonly dbConnectionString: string;

    /** Database client reference obtained during initialization. */
    private dbClient: MongoClient;

    /** Database reference to our actual database. */
    private db: Db;

    masterServer: MasterServer;

    initialize(): void {
        // Connect our client to the database.
        this.dbClient = new MongoClient(this.dbConnectionString);

        // Connect the client to the server.
        this.dbClient.connect().then(() => {
            // Get the database reference for this.
            this.db = this.dbClient.db();
        });

        // Setup the socket server to respond to realtime messaging.
        this.setupSocketServer();
    }

    registerRoutes(): void {
        // Register a route to get all messages from the database.
        //  This will only respond to request for the POST method, and ignore others.
        //  NOTE: This COULD be implemented using sockets, but it illustrates how API
        //  calls are made.
        this.masterServer.expressApp.post(EP_GET_ALL_MESSAGES, (req, res) => {
            // Get the messages from the database.
            this.getAllMessages().then(result => {
                // Return them to the response.
                res.send(result);
            })
        });

        // Register a route for the user to send a message to the chat.
        this.masterServer.expressApp.post(EP_SEND_NEW_MESSAGE, (req, res) => {
            // Get the body as a message object.
            let message = <IChatMessage>JSON.parse(req.body);

            // Convert date strings on this object to dates.
            convertDates(message);

            // Broadcast the message to others.
            this.socket.emit(MSG_MESSAGE_RECEIVED, message);

            // Save this message to the database.
            this.createMessage(message).then(() => {
                res.end();
            });

        });
    }

    /** Sets up the Socket.IO functionality, along with callbacks for client requests. */
    private setupSocketServer(): void {
        // Create the socket server.
        this.socket = require('socket.io')(this.masterServer.httpServer);

        // When we receive a connection, we need to setup our
        //  callbacks to handlers for those listening.
        this.socket.on('connect', socket => {
            // When the client sends a chat message, we need to broadcast it to everyone, including
            //  the sender.
            socket.on(MSG_SEND_MESSAGE, (message: IChatMessage) => {
                // Store this in the database for later.  Might as well wait until
                //  it has a valid object ID before we send it too.
                this.createMessage(message).then(newId => {
                    // Set the ID on the new message.  It should be a string for clients, since
                    //  they cannot reference the MongoDB api. 
                    message._id = newId.toHexString();

                    // Broadcast the message to all other clients.
                    this.socket.send(MSG_MESSAGE_RECEIVED, message);
                });
            });
        });
    }

    /** The socket.io server that handles realtime messaging. */
    private socket: socketio.Server;

    /** Returns all messages in the database. */
    getAllMessages(): Promise<Array<IChatMessage>> {
        // This will return all messages from the database.
        return this.db.collection(MESSAGE_COLLECTION_NAME).find({}).toArray();
    }

    /** Stores a new message in the database, and returns its object ID. 
     *   This will be called by the chat server, and not handled directly. */
    createMessage(newMessage: IChatMessage): Promise<ObjectId> {
        const res = this.db.collection(MESSAGE_COLLECTION_NAME).insertOne(newMessage);
        return res.then(result => {
            // Return just the object ID from the result.
            return result.insertedId;
        });
    }
}

shared-definitions.ts

/* API endpoints for our server to respond to.  NOTE that these values are completely arbitrary. */
export const EP_GET_ALL_MESSAGES = '/api/get-all-messages';
export const EP_SEND_NEW_MESSAGE = '/api/send-message';

/* Socket.IO messages to respond to.  These values are also completely arbitrary. */
export const MSG_SEND_MESSAGE = 'send-message';
export const MSG_MESSAGE_RECEIVED = 'message-received';


/** The form of a chat message. */
export interface IChatMessage {
    /** Database ID of the message.
     *   NOTE: We're cheating a little here.  We want to share this file
     *   with the client, and the client can't reference MongoDB.  We pass this
     *   to the client as a string, and covert it back on the server to an ObjectID. */
    _id?: any;

    /** Date/Time that the message was made. */
    dateTime: Date;

    /** The name of the person who sent the message. */
    senderName: string;

    /** The message body. */
    message: string;
}

/** Returns a boolean value indicating whether or not a specified value
 *   is a string that holds a JSON date/time. */
export function isDateString(val: any): boolean {
    // It must be a string to check it.
    if (typeof val !== 'string') {
        return false;
    }

    // Check its pattern.
    return /d{4}-d{2}-d{2}Td{2}:d{2}:d{2}.d{3}Z/.test(val);
}

/** Converts any string property that is formatted date/time, on a specified object,
 *   or nested objects, to an actual date. */
export function convertDates(target: any): void {
    // Arrays work differently.  Check this explicitly.
    if (Array.isArray(target)) {
        // Convert properties on this array.
        for (var i = 0; i < target.length; i++) {
            if (isDateString(target[i])) {
                // Convert this value.
                target[i] = new Date(target[i]);
            } else if (target[i] != null && typeof target[i] === 'object') {
                // Convert dates on this this nested item.
                convertDates(target[i]);
            }
        }

        // We can only work on non-null objects.
    } else if (target != null && typeof target === 'object') {
        // Check the properties on the target.
        for (var n in target) {
            if (isDateString(target[n])) {
                // Convert it.
                target[n] = new Date(target[n]);
            } else if (typeof target[n] === 'object' && target[n] != null) {
                // Convert nested values on this object.
                convertDates(target[n]);
            }
        }
    }

}

index.ts

import { WebServerPlugin } from "./web-server.plugin";
import { MasterServer } from "./master.server";
import { ChatServerPlugin } from "./chat-server.plugin";
import * as path from 'path';

/** Connection string to our MongoDB. */
const mongoDbConnectionString = 'mongodb://localhost/chat-app';

/** Path to our client files.  This should be the folder with the index.html,
 *   which is in the *output* of our client application.  (Not the public folder.) */
const staticFileLocation = path.join(__dirname, '../..', 'client/build');

// Create our plugins for use in the master server.
const chatPlugin = new ChatServerPlugin(mongoDbConnectionString);
const webServerPlugin = new WebServerPlugin(staticFileLocation);

// Create and initialize the master server.
const masterServer = new MasterServer(
    // When developing in react, this port number should not be the same as the dev server.
    //  It will act as a proxy server during development, but in production, we'll use port 80, and it will
    //  indeed serve the front-end files.
    3001,
    [chatPlugin,
        // WARNING: Make sure this is always the LAST item in the plugin set, or it will consider
        //  any requests it doesn't handle as 404 requests (not found).
        webServerPlugin]);

// Start listening for requests.
masterServer.listen();