Skip to content

README.md

Latest commit

 

History

History
76 lines (51 loc) · 2.15 KB

README.md

File metadata and controls

76 lines (51 loc) · 2.15 KB
Raw

WebSocket Echo Example

A simple Express.js application that demonstrates WebSocket communication between a client and server. The server echoes back any messages sent by the client.

This example is built for Tilda's WebSocket support.

Features

  • Express.js web server
  • WebSocket server using ws library
  • Interactive client interface
  • Real-time message echoing
  • Auto-reconnection if the connection is lost

Prerequisites

  • Node.js (v18 or higher)
  • npm (comes with Node.js)
  • Tilda CLI (for building and deployment)

Installation

  1. Clone this repository or download the files
  2. Install dependencies:
npm install

Usage

  1. Start the server locally:
npm start
  1. Open your browser and navigate to http://localhost:3000
  2. The client will automatically connect to the WebSocket server
  3. Type a message in the input field and click "Send" or press Enter
  4. The server will echo your message back to the client

Building for Production

To build the application for production deployment:

npm run build

This command uses the Tilda CLI to build the project, preparing both the server and client code for deployment. Make sure to have the Tilda CLI installed before running this command using npm install -g @tildacloud/cli.

Deployment

To deploy the application to Tilda:

tilda deploy --project <project-slug> --site <site-slug>

Replace <project-slug> with your Tilda project identifier and <site-slug> with your site identifier.

How It Works

  • The Express server serves static files from the public directory
  • The WebSocket server is attached to the same HTTP server
  • When a client connects, the server sends a welcome message
  • Any message from the client is logged and echoed back with "Echo: " prefix
  • The client displays both sent and received messages in a scrollable container
  • If the connection is lost, the client attempts to reconnect automatically

Project Structure

  • app/server.js - The Express and WebSocket server
  • public/index.html - The client-side HTML and JavaScript
  • package.json - Project configuration and dependencies