Tutorial: Creating a WebSocket Chat Application, Dockerizing, and Deploying on EC2 with NGINX and SSL
Part 1: Setting Up WebSocket Chat Application Locally
To create a simple WebSocket chat application, follow these steps:
1. Directory Structure
Create a directory structure for your project:
project/
│
├── public/
│ └── index.html
│ └── client-side.js
│
└── websocket-server.js2. HTML Interface (index.html)
Create an HTML file for the chat interface (index.html):
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Client</title>
<style>
/* Basic styles for the chat messages */
#messages {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
height: 200px;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="messages"></div>
<input type="text" id="messageInput" placeholder="Type a message...">
<button onclick="sendMessage()">Send</button>
<script src="client-side.js"></script>
</body>
</html>3. Client-Side WebSocket Handling (client-side.js)
Implement JavaScript for handling WebSocket communication on the client-side (client-side.js):
const ws = new WebSocket("ws://localhost:8080");// WebSocket event listeners
ws.addEventListener("open", function open() {
console.log("Connected to server.");
});ws.addEventListener("message", function incoming(event) {
displayMessage('Server: ' + event.data);
});ws.addEventListener("close", function close() {
displayMessage('Disconnected from server.');
});// Function to display messages on the interface
function displayMessage(message) {
const messageElement = document.createElement('p');
messageElement.textContent = message;
messagesDiv.appendChild(messageElement);
messagesDiv.scrollTop = messagesDiv.scrollHeight;
}// Function to send messages
const messagesDiv = document.getElementById('messages');
const messageInput = document.getElementById('messageInput');function sendMessage() {
const message = messageInput.value;
ws.send(message);
displayMessage('You: ' + message);
messageInput.value = '';
}
4. WebSocket Server Logic (websocket-server.js)
Implement the Node.js server script for handling WebSocket connections (websocket-server.js):
const express = require("express");
const http = require("http");
const WebSocket = require("ws");
const path = require("path");const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });// WebSocket server logic
wss.on("connection", function connection(ws) {
// WebSocket handling logic
ws.on("message", function incoming(message) {
// Handle WebSocket messages
});
// ...
});// Serve static files (HTML, CSS, etc.) from the 'public' directory
app.use(express.static(path.join(__dirname, "public")));// Serve index.html when accessing the root URL '/'
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});// Start the server on port 8080
const PORT = process.env.PORT || 8080;
server.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});
This sets up a basic structure for a WebSocket chat application. You can run the server using node websocket-server.js and access the chat interface via http://localhost:8080/
All good and you come along ? Great! Follow the next Chapter → yes