Real-time Web Apps Tutorial

<h2>Introduction</h2>
<p>This tutorial teaches you how to build real-time web applications where multiple users can interact instantly. We will use Node.js, Socket.io, and React to create a real-time chat and notification system.</p>

<h3>Tech Stack</h3>
<ul>
  <li>React – Frontend framework</li>
  <li>Node.js & Express – Backend server</li>
  <li>Socket.io – Real-time communication</li>
  <li>MongoDB (optional) – Persist data</li>
</ul>

<h3>Backend Setup</h3>
<pre><code>{`// server.js

const express = require('express'); const http = require('http'); const { Server } = require('socket.io');

const app = express(); const server = http.createServer(app); const io = new Server(server, { cors: { origin: '*' } });

io.on('connection', (socket) => { console.log('User connected: ', socket.id);

socket.on('sendMessage', (msg) => { io.emit('receiveMessage', msg); });

socket.on('disconnect', () => { console.log('User disconnected: ', socket.id); }); });

server.listen(5000, () => console.log('Server running on port 5000')); `}</code></pre>

<h3>Frontend Setup</h3>
<pre><code>{`// Chat.js

import { useEffect, useState } from 'react'; import { io } from 'socket.io-client';

const socket = io('http://localhost:5000');

export default function Chat() { const [messages, setMessages] = useState([]); const [input, setInput] = useState('');

useEffect(() => { socket.on('receiveMessage', (msg) => { setMessages(prev => [...prev, msg]); }); }, []);

const sendMessage = () => { socket.emit('sendMessage', input); setInput(''); };

return ( <div> <div> {messages.map((msg, index) => <p key={index}>{msg}</p>)} </div> <input value={input} onChange={(e) => setInput(e.target.value)} /> <button onClick={sendMessage}>Send</button> </div> ); } `}</code></pre>

<h3>Features</h3>
<ul>
  <li>Real-time messaging between multiple users</li>
  <li>Live notifications</li>
  <li>Optional: Chat rooms or channels</li>
  <li>Responsive frontend using React</li>
</ul>

<h3>Deployment</h3>
<ul>
  <li>Deploy backend on Render / Heroku</li>
  <li>Deploy frontend on Vercel / Netlify</li>
  <li>Ensure correct Socket.io origin configuration</li>
</ul>

<h3>Conclusion</h3>
<p>By following this tutorial, you can build fully functional real-time web applications that handle live interactions efficiently.</p>