Backend Setup (Node.js)
Step 1: Install Node.js and Required Packages
First, make sure you have Node.js installed. Then, create a new directory for your project and run the following commands to set up your backend:
bashCopy codemkdir chat-app
cd chat-app
npm init -y
npm install express socket.io
Step 2: Create Server File
Create a file named server.js and add the following code:
javascriptCopy codeconst express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
app.use(express.static('public'));
io.on('connection', (socket) => {
console.log('New user connected');
socket.on('chat message', (msg) => {
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('User disconnected');
});
});
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
console.log(Server is running on http://localhost:${PORT});
});
2. Frontend Setup
Step 1: Create Frontend Files
Inside your project directory, create a folder named public and create two files: index.html and style.css.
Step 2: Create index.html
Add the following code to index.html:
htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Chat Application</title>
</head>
<body>
<div class="chat-container">
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="script.js"></script>
</body>
</html>
Step 3: Create style.css
Add some basic styling in style.css:
cssCopy codebody {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.chat-container {
width: 400px;
margin: 50px auto;
background: white;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 20px;
}
ul {
list-style-type: none;
padding: 0;
max-height: 300px;
overflow-y: scroll;
}
li {
padding: 8px;
margin-bottom: 5px;
background: #e1e1e1;
border-radius: 4px;
}
form {
display: flex;
}
input {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
Step 4: Create script.js
Add the following code in script.js:
javascriptCopy codeconst socket = io();
const form = document.getElementById('form');
const input = document.getElementById('input');
const messages = document.getElementById('messages');
form.addEventListener('submit', function(e) {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});
socket.on('chat message', function(msg) {
const item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
3. Running the Application
Now that you have everything set up, you can run your chat application.
- Open your terminal and navigate to your project directory.
- Run the server:bashCopy code
node server.js - Open your web browser and go to
http://localhost:3000.
4. Test the Chat Application
You can open multiple tabs or different browsers to test real-time communication. Messages sent from one tab should appear in the others instantly!
Leave a Reply