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.
- Express.js web server
- WebSocket server using
wslibrary - Interactive client interface
- Real-time message echoing
- Auto-reconnection if the connection is lost
- Node.js (v18 or higher)
- npm (comes with Node.js)
- Tilda CLI (for building and deployment)
- Clone this repository or download the files
- Install dependencies:
npm install- Start the server locally:
npm start- Open your browser and navigate to
http://localhost:3000 - The client will automatically connect to the WebSocket server
- Type a message in the input field and click "Send" or press Enter
- The server will echo your message back to the client
To build the application for production deployment:
npm run buildThis 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.
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.
- The Express server serves static files from the
publicdirectory - 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
app/server.js- The Express and WebSocket serverpublic/index.html- The client-side HTML and JavaScriptpackage.json- Project configuration and dependencies