Measure Node.js server response time with N|Solid

As software developers, we constantly face new challenges in an ever-changing ecosystem. However, we must always remember the importance of addressing performance and security concerns, which remain at the top of our priority list.

To ensure that our applications based on Node.js can meet our performance and scalability needs without compromising security or incurring costly infrastructure changes, we must be aware of the importance of network optimization in Node.js.

The Impact of Latency/Ping Time on the Performance and Speed of Your Node.js Application

IMG – Ping Cats – via GIPHY

This communication, known as network ping time or latency, is a crucial factor that impacts the performance and speed of your application. Knowing how to measure network ping time between the browser and the server is essential for developers who want to optimize their applications and provide a better user experience. _Have you ever wondered how long it takes for your application to communicate with the server? _

Network Optimization in Node.js

To ensure the optimal performance and scalability of our Node.js applications, we must accurately measure our HTTP server’s connection and response time. Doing so enables us to identify and address potential bottlenecks without compromising security or incurring unnecessary infrastructure changes.

Before delving deeper into measuring connection and response time, let’s explore fundamental concepts and critical differentiators in the network landscape.

HTTP vs. WebSocket:

HTTP and WebSocket are communication protocols used in web development but serve different purposes. HTTP is a stateless protocol commonly used for client-server communication, while WebSocket enables full-duplex communication between clients and servers, allowing real-time data exchange.

Types of Connections and Versions:

When creating APIs, HTTP as a protocol and standard has different versions, such as HTTP 1.1 and 2.0. Additionally, APIs may use alternative protocols like gRPC, which offer different features and capabilities. Understanding these options empowers developers to choose the most suitable tools for their web servers.

TCP/IP Basics:

The Transmission Control Protocol (TCP) and Internet Protocol (IP) are fundamental protocols that form the backbone of computer networks. Among TCP’s critical processes is the three-way handshake, which plays a vital role in establishing a secure and dependable connection between two endpoints. This handshake ensures the orderly and reliable transmission of data. TLS/SSL encryption enhances security, adding an extra layer of protection to the communication between the client and the server.

HTTP vs. HTTPS:

HTTP operates over plain text, which exposes the data being transmitted to potential eavesdropping and tampering.
HTTPS, on the other hand, secures communication through the use of SSL/TLS encryption, providing confidentiality and integrity.
Understanding the trade-offs between HTTP and HTTPS is crucial to making informed data security decisions.

Building a Solid Foundation: Understanding the Three-Way Handshake for Reliable Connections

To evaluate the performance of our HTTP server, we need to differentiate between connection latency and server response time. Connection latency refers to the time it takes for the initial three-way handshake process to complete before data transmission can occur. On the other hand, server response time measures the duration from when the server receives a request to when it generates and sends the response back to the client.

The three-way handshake is a fundamental process in establishing a TCP (Transmission Control Protocol) connection between a client and a server in a network. It involves three steps, a “three-way handshake.” This handshake establishes a reliable and ordered communication channel between the two endpoints.

Here’s a breakdown of the three steps involved in the three-way handshake:

__SYN (Synchronize)__: The client initiates the connection by sending an SYN packet (synchronize) to the server. This packet contains a randomly generated sequence number to initiate the communication.
__SYN-ACK (Synchronize-Acknowledge)__: Upon receiving the SYN packet, the server acknowledges the request by sending an SYN-ACK packet back to the client. The SYN-ACK packet includes its own randomly generated sequence number and an acknowledgment number equal to the client’s sequence number plus one.
__ACK (Acknowledge)__: Finally, the client sends an ACK packet (acknowledge) to the server, confirming the receipt of the SYN-ACK packet. This packet also contains the acknowledgment number equal to the server’s sequence plus one.

Once this three-way handshake process is completed, the client and the server have agreed upon initial sequence numbers, and a reliable connection is established between them. This connection allows for data transmission with proper sequencing and error detection mechanisms, ensuring that the information sent between the client and server is reliable and accurate.

The three-way handshake is essential to establishing TCP connections and is performed before any data transmission can occur. It plays a critical role in ensuring the integrity and reliability of the communication channel, providing a solid foundation for subsequent data exchange between the client and server.

Create a self-serve diagnostic tool for a server-rendered page in Node.js.

The idea is to share an easy-to-follow recipe that will help you create your tool, so let’s start with the ingredients and end with the steps to create a self-serve diagnostic tool for a server-rendered page in Node.js.

Ingredients:

Node.js & NPM installation – https://nodejs.org/

Fastify.js – https://www.fastify.io/

Instructions:

1. Setup a Node.js Project
Use NPM to create your Node project:

$ mkdir diagnostic-tool-nodejs
$ cd diagnostic-tool-nodejs
$ npm init -y

2. Install your NPM packages.
We have Fastify in our recipe, so we must install them first:

$ npm i fastify

3. Create the index.mjs
Create an index.mjs file in the project’s root directory and paste this fastify HTTP server sample code.

import Fastify from “fastify”;

const fastify = Fastify({
logger: true,
});

// Randomly create a timer from 100ms up to X seconds
function timer(time) {
return new Promise((resolve, reject) => {
const ms = Math.floor(Math.random() * time) + 100;
setTimeout(() => {
resolve(ms);
}, ms);
});
};

// Declare the root route and delay the response randomly
fastify.get(“/”, async function (request, reply) {
const wait = await timer(5000);
return { delayTime: wait };
});

// Run the server!
fastify.listen({ port: 3000 }, function (err, address) {
if (err) {
fastify.log.error(err);
process.exit(1);
}
});

This will start the server on port 3000, which you can access by going to http://localhost:3000 in your web browser.

Integrate with N|Solid Console

Be sure you already have N|Solid installed and running on your environment; otherwise, go to https://downloads.nodesource.com and get the installer.

Also, run the console using docker as an alternative to the local installation.

docker run -d -p 6753:6753 -p 9001:9001 -p 9002:9002 -p 9003:9003 nodesource/nsolid-console:hydrogen-alpine-latest

With the application already initialized with npm, Fastify installed, and our index.js in place, we can connect our process with N|Solid

Run the HTTP server with the NSOLID RUNTIME following the instructions on the principal console page.

IMG – Connect N|Solid

In this case, we ran the process by passing the config via environment variables and running a local installation of the Nsolid console.

NSOLID_APPNAME=”NSOLID_RESPONSE_TIME_APP” NSOLID_COMMAND=”127.0.0.1:9001″ nsolid index.mjs

If you instead use our SaaS console, you need to use the NSOLID_SAAS env instead of __NSOLID_COMMAND__.

NSOLID_APPNAME=”NSOLID_RESPONSE_TIME_APP” NSOLID_COMMAND=”XYZ.prod.proxy.saas.nodesource.io:9001″ nsolid index.mjs

After completing those steps, you should be able to watch the app and process connected to the console.

IMG – Connect N|Solid Process

GIF 1 – Connect N|Solid Process

Go to the application process and add the HTTP(S) Server 99th Percentile Duration metric to see in near-real time the HTTP server latency response time and also we have the HTTP(S) Request Median Duration.

GIF 2 – Monitor Process Metrics

After this, we should be able to generate some traffic and see how the response times behave with the sample code provided, generating some response time randomness from 100ms up to 5 secs.

To generate the traffic, we can use autocannon

npx autocannon -d 120 -R 60 localhost:3000

After running autocannon for some minutes, we can see the P99 metric of the HTTP Server. The median and compare them.

IMG – http-latency-response-time-metrics

IMG – http-request-median-duration

IMG – p99-metric

To fully utilize the metrics provided by N|Solid, it is crucial to have a comprehensive understanding of their significance. Two critical metrics offered by N|Solid are the 99th Percentile and the HTTP Median metric. These metrics play a vital role in assessing the performance of Node.js applications in production environments. By getting deeper into their practical application and importance, we can unlock the actual value of these metrics in N|Solid and make informed decisions to optimize our production systems. Let’s explore this further.

The 99th Percentile metric

The 99th percentile is a statistical measure commonly used to analyze and understand response time or latency in a system.

Imagine you have a web application that handles incoming requests. To understand how fast the server responds, you measure the time it takes for each request and gather that data. You can find the 99th percentile response time by looking at the data.

For example, __the 99th percentile response time is 500 milliseconds__.
This means that only 1% of the requests took longer than 500 milliseconds to get a response. In simpler terms, 99% of the requests were handled in 500 milliseconds or less, which is fast.

It helps you identify and address any outliers or performance bottlenecks affecting a small fraction of requests but can significantly impact the user experience or system stability. Monitoring the 99th percentile response time helps you spot any slow requests or performance issues that might affect a few users but still need attention. but can have a significant impact on user experience or system stability.

The HTTP median metric

When sorted in ascending or descending order, the median represents a dataset’s middle value.

To illustrate the difference between the 99th percentile and the median, let’s consider an example. Suppose you have a dataset of response times for a web application consisting of 10 values:
[100ms, 150ms, 200ms, 250ms, __500ms__, 600ms, 700ms, 800ms, 900ms, 1000ms].

The median response time would be the middle value when the dataset is sorted, which is the 5th value, 500ms. This means that 50% of the requests had a response time faster than 500ms, and the other 50% had a response time slower than 500ms.

Connect with NodeSource

If you have any questions, please contact us at [email protected] or through this form.

Experience the Benefits of N|Solid’s Integrated Features
Sign up for a Free Trial Today

To get the best out of Node.js and experience the benefits of its integrated features, including OpenTelemetry support, SBOM integration, and machine learning capabilities. Sign up for a free trial and see how N|Solid can help you achieve your development and operations goals. #KnowyourNode

Import maps go universal

#​632 — March 31, 2023

Read on the Web

JavaScript Weekly

JavaScript Import Maps Now Supported Cross-Browser — ES modules provide a modern way to include and reuse JavaScript code in web apps, and import maps provide the bridge between using module names in code and where those modules can actually be loaded from.

Thomas Steiner (Chrome Developers)

???? The import map news comes off the back of the release of Safari 16.4 which introduces a lot of new functionality to the Mac-based browser, from Web Push and import maps to improved Web Component support and lazy-loading support for iframes.

Updates from the 95th TC39 Meeting — Working group meetings might not seem interesting on the surface, but a lot of what TC39 discusses ends up in our day to day code. Of special interest this time are the progression of support for ranges and the async context proposal to stage 2, and awaiting a dictionary of promises and decorators for class constructors/methods to stage 1.

Hemanth HM

React Authentication, Simplified — In this article, we lay out a new approach to authentication (plus access control & SSO) in React applications.

Userfront sponsor

React Labs: What React Core Has Been Working On — The latest update from the React core team. The most striking update comes around the progress of React Forget, an optimizing compiler with the goal being able to build fully reactive systems using the JavaScript and React mental models you already have, with the compiler tackling the trickiest parts.

The React Core Team

IN BRIEF:

Over on Twitter, ???? Stefan Judis notes that Firefox Nightly is the first browser shipping support for @media (scripting: none) to detect disabled JavaScript in CSS.

???? Over half of new npm packages are junk. Though that’s an improvement on packages riddled with malware… Could we improve things by using ChatGPT to analyze packages? Maybe, says Socket.

???? Excited about the future of Angular? Next Tuesday, the Angular team is doing a livestream on YouTube about the Angular Signals RFC.

Microsoft has ‘rebuilt Teams from the ground up’ with React replacing AngularJS at the heart of the UI.

Did you know SVG almost got built-in network socket support? ????

The Cloudflare Workers edge serverless platform is based around V8 isolates rather than Node.js but is now gaining support for some Node.js APIs.

RELEASES:

Rome 12
↳ Big release for the linter & formatter.

Solid 1.7
↳ Flexible declarative library for UIs.

Visual Studio Code March 2023
↳ Now with improved switch scaffolding for TS/JS.

Ionic 7.0
↳ Powerful cross-platform mobile app toolkit.

Docusaurus 2.4
↳ React-powered docs site generator.

Node.js v16.20.0 (LTS)

???? Articles & Tutorials

Janet for MortalsJanet is a Lisp-like functional dynamic language that can nonetheless be compiled and interact with C libraries. This online book about Janet targets folks who already know JavaScript in particular.

Ian Henry

In Praise of Vite“The single best feature of Vite, as far as I’m concerned, is its simplicity. Compared to the nightmare of configuring WebPack and Babel? Vite is delightfully easy to use.”

Scott Vandehey

???? Robin Wieruch has just published a tutorial on migrating to Vite from Create React App (CRA) if you want to give it a go for yourself.

The Easiest Way to Add Chat to Your Application. Try Stream for Free — Build and ship real-time messaging in less time with our highly reliable chat infrastructure and feature-rich SDKs. Free 30-day trial.

Stream sponsor

Building Framer Motion Animations Inside a Qwik Application — Also touches on Motion One as a bonus, an animation library similar to Framer but lighter and faster to use.

Yoav Ganbar

A Business Case for SvelteKit — A good post covering the experience of migrating from Meteor to SvelteKit, the process this team undertook, and the outcomes from both a performance and UX point of view.

Chris Ellis

How to Enable OpenTelemetry Traces in React Apps — A ten-step approach to enabling OpenTelemetry traces in React apps all the way through to viewing the end results in Jaeger.

Purva Naik (Red Hat)

Build Developer-First Automations with Retool Workflows

Retool sponsor

Understanding module.exports and exports in Node

James Hibbard

???? Code & Tools

NPKILL 0.11.1: Delete node_modules Even Faster — NPKILL (homepage) is a popular tool for listing node_modules folders and how much space they take up, before allowing you to quickly delete them. This new release makes it even faster than before through using worker threads.

Gallardo and Gómez

Inferno 8.1: A Fast, React-a-Like with a Different Approach — React-like, but you might be more intrigued by its differences (which include a different approach to optimizing performance and lifecycle events on functional components).

Inferno

Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log, supports Vitest, Jest, Karma, Jasmine, and more.

Wallaby.js sponsor

Nano JSX: A Lightweight SSR-First JSX Library — Features include no Virtual DOM, no external dependencies, on-demand hydration, and support for Node and Deno-based server-side rendering situations.

Nano JSX

Concurrent.js: Load Modules into Background Threads — For JS environments including the browser, Node and Deno, this library dynamically imports modules into worker threads (in Node) or Web Workers (in the browser) to run them away from the main thread.

Bitair

cron-schedule 4.0: Cron Parser and Scheduler — Parse and query cron style expressions in the browser, Node or Deno.

Pascal Sthamer

Bright: A React Server Component for Syntax Highlighting — Customizable and includes all of VS Code’s syntax highlighting themes, some of which are demonstrated on the page.

Code Hike

typescript-json-serializer 6.0 — Deserialize JSON into TypeScript classes and serialize classes into JSON.

Gillian Pérard

???? Jobs

Full Stack JavaScript Engineer @ Emerging Cybersecurity Startup — Small team/big results. Fun + flexible + always interesting. Come build our award-winning, all-in-one cybersecurity platform.

Defendify

Software Engineer — Join our happy team. Stimulus is a social platform started by Sticker Mule to show what’s possible if your mission is to increase human happiness.

Stimulus

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

????‍???? Got a job listing to share? Here’s how.

QUICK RELEASES:

Ink 4.1
↳ Use React to build interactive CLI apps.

Ember Simple Auth 5.0
↳ Authentication and authorization for Ember apps.

Cypress 12.9
↳ Browser-oriented testing framework.

SVGR 7.0
↳ Transform SVGs into React components.

???? JZZ 1.6.1
↳ MIDI library for Node and browsers.

Vue Sonner
↳ The Sonner toast component but for Vue.

np 7.7 – A better npm publish.

Qwik 0.100 – The HTML-first framework.

DOM Testing Library 9.2

React Date Picker 4.11

pnpm 8.1