Create WebSocket demo project for JavaScript

articles/sse-js-crypto-feed/docker-compose.yml

@@ -1,4 +1,3 @@
-version: '3.8'
 
 services:
   sse-app:

articles/websocket-chatbot-js/.dockerignore

@@ -0,0 +1,6 @@
+node_modules
+npm-debug.log
+Dockerfile
+docker-compose.yml
+.git
+.env

articles/websocket-chatbot-js/.env.example

@@ -0,0 +1,2 @@
+# Copy this file to .env and set your ngrok auth token
+NGROK_AUTHTOKEN=

articles/websocket-chatbot-js/.gitignore

@@ -0,0 +1,5 @@
+# Node Modules
+node_modules
+
+# Environment variables
+.env

articles/websocket-chatbot-js/Dockerfile

@@ -0,0 +1,7 @@
+FROM node:18-alpine
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci --omit=dev
+COPY . .
+EXPOSE 3000
+CMD ["npm", "start"]

articles/websocket-chatbot-js/README.md

@@ -0,0 +1,49 @@
+# Chatbot WebSocket Demo
+
+This project provides a minimal WebSocket server and a React + Tailwind CSS client. It can be used to experiment with WebSocket connections for a chatbot-style application or to run load tests with Gatling.
+
+## Features
+
+- Node.js server with a handcrafted WebSocket implementation.
+- React frontend styled with Tailwind CSS and a simple SaaS look for **Acme Healthcare**.
+- Gatling load test examples in JavaScript and TypeScript.
+- Docker and ngrok setup for exposing the server to the internet, for remote load testing with Gatling Enterprise Edition.
+
+## Running the Server
+
+```bash
+node server.js
+```
+
+Open your browser to `http://localhost:3000` and chat with the bot. Messages are echoed back with an "AI" prefix.
+
+To gracefully end a session, send the message `close` and the server will close the WebSocket connection.
+
+## Running a load test locally
+
+To simulate thousands of concurrent connections using [Gatling](https://gatling.io/). Point the WebSocket scenario at `ws://localhost:3000` and configure the desired number of virtual users. There is a companion sample load test available [WebSockets JS load test](https://github.com/stb13579/WebSocketTestJS).
+
+
+## Running a load test remotely
+
+To test the WebSocket server from a remote location, you can use the included Docker and ngrok setup to expose the server to the internet. This is useful for load testing with Gatling Enterprise Edition. First, expose the server using Docker and ngrok as described below. Then, configure your Gatling scenario to point to the ngrok URL.
+
+### Application setup with Docker and ngrok
+
+This repository includes a `Dockerfile` and `docker-compose.yml` to expose the server through [ngrok](https://ngrok.com) for remote load testing.
+
+1. Create an ngrok account and obtain an auth token.
+2. Copy `.env.example` to `.env` and add your token: `NGROK_AUTHTOKEN=<token>`.
+3. Start the stack:
+
+```bash
+docker compose up --build
+```
+
+The ngrok service will print a forwarding URL such as `https://XXXX.ngrok-free.app`. Use this URL in your remote load testing tool to target the WebSocket server.
+
+### Gatling Enterprise Edition setup
+1. Log in to your Gatling Enterprise Edition account.
+2. Create a new simulation and configure it to use the ngrok URL as the WebSocket endpoint.
+3. Run your load test and analyze the results in the Gatling dashboard.
+4. Monitor the server logs in the Docker container to see incoming connections and messages.

articles/websocket-chatbot-js/docker-compose.yml

@@ -0,0 +1,21 @@
+version: "3.9"
+
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "3000:3000"
+
+  ngrok:
+    image: ngrok/ngrok:latest
+    command:
+      - http
+      - app:3000
+    environment:
+      NGROK_AUTHTOKEN: ${NGROK_AUTHTOKEN:?NGROK_AUTHTOKEN must be set}
+    depends_on:
+      - app
+    ports:
+      - "4040:4040"

articles/websocket-chatbot-js/gatling/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+target/
+
+# Gatling run results
+results/

articles/websocket-chatbot-js/gatling/README.md

@@ -0,0 +1,51 @@
+# Gatling JS - JavaScript and TypeScript demo projects
+
+A simple showcase of JavaScript and TypeScript NPM projects using Gatling JS. Please also check out the [introduction to JavaScript scripting](https://docs.gatling.io/tutorials/scripting-intro-js/) in the Gatling documentation.
+
+## Prerequisites
+
+You need [Node.js](https://nodejs.org/en/download) v18 or later (LTS versions only) and npm v8 or later (included with Node.js).
+
+## Use demo project
+
+Run the typeScript sample:
+
+```shell
+cd typescript
+npm install
+npx gatling run --typescript --simulation basicSimulation # automatically download Gatling runtime, build the project, and run the basicSimulation simulation
+```
+
+Or the JavaScript sample:
+
+```shell
+cd javascript
+npm install
+npx gatling run --simulation basicSimulation # automatically download Gatling runtime, build the project, and run the basicSimulation simulation
+```
+
+You can also launch the [Gatling Recorder](https://docs.gatling.io/tutorials/recorder/) and use it to capture browser-based actions and help create a realistic user scenario:
+
+```shell
+npx gatling recorder
+```
+
+The `gatling` command-line tool has a built-in help function:
+
+```shell
+npx gatling --help # List all available commands
+npx gatling run --help # List options for the "run" command (--help also works for all other available commands)
+```
+
+## Included helper scripts
+
+Note that both sample projects include a few aliases in the `package.json`'s `scripts` section, which you can use for convenience or refer to as examples:
+
+```shell
+npm run clean # Delete Gatling bundled code and generated reports
+npm run format # Format code with prettier
+npm run check # TypeScript project only, type check but don't build or run
+npm run build # Build project but don't run
+npm run basicSimulation # Run the included basicSimulation simulation
+npm run recorder # Starts the Gatling Recorder
+```

articles/websocket-chatbot-js/gatling/javascript/.gatling/example.package.conf

@@ -0,0 +1,54 @@
+# Learn more about Configuration as Code: https://docs.gatling.io/reference/execute/cloud/user/configuration-as-code
+# This file is full deployment configuration file example.
+# Please note all these configuration fields, or even this file, are optional.
+
+gatling.enterprise.package {
+  # Consistent deployment using an existing package ID
+  # https://docs.gatling.io/reference/execute/cloud/user/configuration-as-code/#consistent-deployment-with-id
+  # id = "00000000-0000-0000-0000-000000000000"
+  name = "My package name"
+  team = "Default team" # or ID with team = "00000000-0000-0000-0000-000000000000"
+  default {
+    simulation {
+      locations = [
+        {
+          name: "Europe - Paris",
+          size: 2,
+          weight: 30
+        },
+        {
+          name: "AP Pacific - Mumbai",
+          size: 2,
+          weight: 70
+        }
+      ]
+      parameters {
+        ignoreDefaults = false
+        systemProperties {
+          # System properties names should be surrounded by quotes
+          # Otherwise, it would be interpreted as HOCON keys
+          "com.example.prop.1" = "default value from system prop 1"
+          "com.example.prop.2" = "default value from system prop 2"
+        }
+        environmentVariables {
+          MY_SIMULATION_ENV_VAR_1 = "default value from environment 1"
+          MY_SIMULATION_ENV_VAR_2 = "default value from environment 2"
+        }
+      }
+      timeWindow {
+        rampUp = 10 # in seconds
+        rampDown = 10 # in seconds
+      }
+    }
+  }
+  simulations = [
+    {
+      # Consistent deployment using an existing simulation ID
+      # https://docs.gatling.io/reference/execute/cloud/user/configuration-as-code/#consistent-deployment-with-id
+      # id = "00000000-0000-0000-0000-000000000001"
+      name = "My simulation name"
+      # Name of the simulation (i.e.: prefix of the simulation file src/*.gatling.js)
+      simulation = "basicSimulation"
+    }
+  ]
+}

articles/websocket-chatbot-js/gatling/javascript/.gatling/package.conf

@@ -0,0 +1,2 @@
+# See `example.package.conf` for a full deployment configuration file example
+# Learn more about Configuration as Code: https://docs.gatling.io/reference/execute/cloud/user/configuration-as-code

articles/websocket-chatbot-js/gatling/javascript/.gitignore

@@ -0,0 +1,4 @@
+# Node modules
+node_modules/
+# Results files
+target/

articles/websocket-chatbot-js/gatling/javascript/.prettierignore

@@ -0,0 +1,2 @@
+node_modules/
+target/

articles/websocket-chatbot-js/gatling/javascript/.prettierrc

@@ -0,0 +1,16 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always",
+  "requirePragma": false,
+  "endOfLine": "lf",
+  "embeddedLanguageFormatting": "auto"
+}

articles/websocket-chatbot-js/gatling/javascript/README.md

@@ -0,0 +1,45 @@
+# Gatling JavaScript WebSocket Demo
+
+A showcase of the WebSocket testing using Gatling's JavaScript SDK. Please also check out the [introduction to JavaScript scripting](https://docs.gatling.io/tutorials/scripting-intro-js/) in the Gatling documentation.
+
+## Prerequisites
+
+You need [Node.js](https://nodejs.org/en/download) v18 or later (LTS versions only) and npm v8 or later (included with Node.js).
+
+## Use WebSocket demo project
+
+Run the JavaScript sample test:
+
+```shell
+cd javascript
+npm install
+npx gatling run --simulation basicSimulation # automatically download Gatling runtime, build the project, and run the basicSimulation simulation
+```
+
+The `gatling` command-line tool has a built-in help function:
+
+```shell
+npx gatling --help # List all available commands
+npx gatling run --help # List options for the "run" command (--help also works for all other available commands)
+```
+
+## Included helper scripts
+
+Note that both sample projects include a few aliases in the `package.json`'s `scripts` section, which you can use for convenience or refer to as examples:
+
+```shell
+npm run clean # Delete Gatling bundled code and generated reports
+npm run format # Format code with prettier
+npm run build # Build project but don't run
+npm run basicSimulation # Run the included basicSimulation simulation
+```
+
+## Keep learning
+
+Here are 2 challenges to help you expand your websocket testing skills:
+
+1. **Add more specific response validation:**: Enhance the simulation by adding more specific checks for the chatbot's responses. For example, check if the response contains certain keywords or phrases that are expected based on the question asked.
+
+2. **Implement Error Handling**: Enhance the simulation by implementing error handling for websocket connections. Simulate scenarios where the connection drops or the server returns an error message.
+
+Send your solutions to [email protected] for a chance to win some company swag.