ESP32 WebSocket wth Svelte Frontend

This is a demo ESP32 application which takes temperature and humidity readings and broadcasts them live to clients using the WebSocket protocol.

The application also acts as a webserver, serving a frontend Svelte application, which provides a basic interface for viewing the temperature and humidity readings sent from the server, as well as controls to change the rate at which the server broadcasts updates.

Running the application

Open the project using the PlatformIO VSCode Extension.

In the frontend directory:

1. Install dependencies:

   npm install

2. Build the frontend application:

   npm run build

   This will copy over the build artifacts to the backend/data directory, ready for upload to your ESP32.

In the backend directory:

3. Create a secrets.h file inside the include directory and paste the following, substituting your WIFI SSID and password:

   #define WIFI_SSID <Your WIFI SSID>
   #define WIFI_PASSWORD <Your WIFI password>

In the PlatformIO Extension:

4. Click Upload Filesystem Image to upload the front-end code (Svelte app) to your ESP32's filesystem.

5. Click Upload and Monitor to upload the backend code to your ESP32, and start the application.

6. Your ESP32 will start the application which will:

   • Connect to your WIFI network using the credentials you supplied in the secrets.h file
   • Print its local IP address to the terminal
   • Serve the front-end application at that IP address
   • Allow a WebSocket connection from the front-end application.

   Go to the local IP address in your web browser to start the front-end application.