تعارف: جب HTTP کافی نہیں ہے۔
برٹ اور ایرنی، دو دوست مل کر اپنے خوابوں کے سائیڈ پروجیکٹ پر کام کر رہے ہیں: ایک چیٹ ایپ جو دور سے کام کرنے والی ٹیموں کے لیے ریئل ٹائم بات چیت کو قابل بناتی ہے۔ فرنٹ اینڈ کوڈر برٹ مشکل سے اپنے آپ پر قابو پا سکتا ہے کیونکہ وہ اپنے بیک اینڈ ماہر دوست کے ساتھ چمکدار نئی خصوصیات کا اشتراک کرتا ہے۔ "دیکھو! میں ایک پیغام ٹائپ کر سکتا ہوں، اور یہ سرور کو بھیجا جاتا ہے، اور میں دیکھ سکتا ہوں کہ ایک جواب تقریباً فوری طور پر پاپ اپ ہوتا ہے! ارنی، بیک اینڈ گرو، بھونچالے۔ "لیکن آپ ایک ہی وقت میں بات چیت کرنے کی کوشش کرنے والے دو لوگوں کے مسئلے کو کیسے حل کرتے ہیں؟ آپ کی ایپ آپ کو گفتگو کو 'دیکھنے' دینے کے بجائے صفحہ کو تازہ کرتی رہتی ہے، جس سے حقیقی وقت میں چیٹ کرنا ناممکن ہو جاتا ہے۔
چیلنج یہ ہے کہ برٹ کی ایپ HTTP پر کام کرتی ہے جس میں کلائنٹ کو سرور سے بازیافت کی درخواست کرنی ہوگی۔ ایرنی کا خلاصہ: "ایسا لگتا ہے کہ آپ کے تمام دوست آپ کو واپس ٹیکسٹ کر رہے ہیں، لیکن پھر، اچانک، آپ کوئی بھی جواب نہیں دیکھ سکتے جب تک کہ آپ یہ چیک کرنے کے لیے ریفریش نہیں کرتے کہ آیا وہاں نئے پیغامات ہیں یا نہیں کیونکہ وہ آپ کے آخری پیغام کو اس وقت تک نہیں دیکھ سکتے جب تک کہ آپ اسے ریفریش نہ کریں اور اسی طرح HTTP کام کرتا ہے!"
یہاں بہترین حصہ آتا ہے: فل اسٹیک ایپس کے لیے جو ریئل ٹائم میں کام کرتی ہیں، وہاں WebSockets موجود ہیں۔ یہ حصہ انتہائی دلچسپ ہے، تو آئیے Ernie اور Bert میں شامل ہوں اور معلوم کریں کہ WebSockets کیسے کام کرتے ہیں، ان کے نفاذ کے طریقہ کار، ان کی اہمیت کے پیچھے استدلال، اور بہت کچھ۔
WebSockets کیا ہیں؟ ایک ابتدائی خرابی
WebSockets ایک کلائنٹ (آپ کے ویب براؤزر) اور سرور کے درمیان مسلسل فون کال کی طرح ہیں۔ وہ HTTP پروٹوکول سے مختلف ہیں جو اس طریقے سے کام کرتا ہے، "خط بھیجیں، جواب کا انتظار کریں۔" WebSockets کے ساتھ، دونوں فریق اپنی مرضی کے مطابق آزادانہ بات چیت کر سکتے ہیں۔ WebSockets کی خصوصیات میں درج ذیل شامل ہیں:
- فل ڈوپلیکس: کلائنٹ اور سرور دونوں کے لیے بیک وقت ڈیٹا منتقل کرنا ممکن ہے۔
- کم تاخیر: ضرورت سے زیادہ بار بار مصافحہ نہیں ہوتا ہے۔ ڈیٹا آزادانہ طور پر بہہ سکتا ہے۔
- ہلکا پھلکا: پیغامات چھوٹے ہوتے ہیں جو بینڈوتھ کے استعمال کو کم کرتے ہیں۔
مثال: مسلسل اپ ڈیٹ ہونے والے اسپورٹس اسکور بورڈ کی تصویر بنائیں۔ HTTP کے ساتھ، کلائنٹ کو ہر سیکنڈ میں سرور کو مسلسل اسپام کرنا پڑتا ہے، "اسکور میں کوئی تبدیلی؟" WebSockets کے ساتھ، سرور اعلان کرتا ہے، "GOAL!" یہ فوری طور پر ہوتا ہے.
WebSockets بمقابلہ HTTP: نئی گرمیت کیا ہے؟
برٹ پیچھے بیٹھتا ہے اور اپنا سر کھجاتا ہے۔ "لیکن HTTP زیادہ تر ایپس کے لیے ٹھیک کام کرتا ہے۔ گول پوسٹوں کو کیوں منتقل کریں؟" ایرنی آہستہ سے ہنستا ہے، مارکر لیتا ہے، اور وائٹ بورڈ پر کچھ لکھنا شروع کر دیتا ہے۔
"آئیے اوپر سے شروع کریں،" وہ کہتے ہیں۔ "آئیے کہتے ہیں کہ حقیقی وقت کی زندگی کی تازہ کارییں، جیسے کھیلوں کے لائیو اسکورز۔ کلائنٹ کو ہر سیکنڈ سرور سے پوچھنا ہوگا: 'کیا مجھے کچھ جاننے کی ضرورت ہے؟' یہ پولنگ ہے، تو ہر تیس سیکنڈ بعد آپ کو پوچھنا ہوگا، 'کیا ہم مل رہے ہیں؟' مضحکہ خیز، نہیں؟ یہ بہت زیادہ بینڈوتھ کا بھی استعمال کرتا ہے۔
WebSockets اس کا رخ موڑ دیتے ہیں:
- ریئل ٹائم اپڈیٹس: سرور پر ڈیٹا تبدیل ہوتے ہی بھیج دیا جاتا ہے۔ پولنگ کی ضرورت نہیں.
- چیٹ ایپلی کیشنز: صفحہ کو تازہ کرنے کی ضرورت نہیں ہے۔ جیسے ہی آپ ٹائپ کرتے ہیں پیغامات آتے جاتے ہیں۔
- ملٹی پلیئر ویڈیو گیمز: مزید ہچکچاہٹ کی حرکت نہیں۔ کارروائیاں بغیر کسی رکاوٹ کے اسکرینوں پر ظاہر ہوتی ہیں۔
"HTTP جامد چیزوں جیسے کہ بلاگ یا پروڈکٹ پیج سے نمٹنے میں کافی مہذب ہے۔ جب بات براہ راست بات چیت کی ہو تو، ایک مستقل کنکشن کی ضرورت ہوتی ہے۔ ویب ساکٹ۔
ریئل ٹائم چیٹ ایپ بنانا: اچھی چیزیں شروع ہوتی ہیں۔
ایرنی نے اپنا شیشہ صاف کیا۔ "تو، آئیے ایک سادہ چیٹ ایپلی کیشن بنائیں،" ایرنی نے کہا۔ "ہمارے پاس بیک اینڈ کے لیے Node.js سرور اور فرنٹ اینڈ کے لیے ایک React ایپ ہوگی۔ تیار ہیں؟"
1. Socket.IO بیک اینڈ بنائیں
"ایک Node.js سرور پکڑو کیونکہ آپ کو Socket.IO حصے کے لیے اس کی ضرورت ہو گی،" ایرنی کہتے ہیں جیسے وہ واقعی میں تیزی سے ٹائپ کرتا ہے:
npm init -y npm install express socket.io
سرور کوڈ (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); // Serve static files (like React's build folder) app.use(express.static('public')); // Handle WebSocket connections io.on('connection', (socket) => { console.log('New user connected:', socket.id); // Listen for Incoming messages from the socket socket.on('sendMessage', (message) => { console.log('Received:', message); // Broadcast the message to everyone io.emit('receiveMessage', message); }); // Handle user disconnects events socket.on('disconnect', () => { console.log('User left:', socket.id); }); }); server.listen(3000, () => { console.log('Visit http://localhost:3000 on a browser, Server started successful on port 3000'); });
"کلائنٹ اور سرور Socket.IO کے WebSocket کنکشن کو سنبھالنے کی بدولت ایک دوسرے کے ساتھ بات چیت کرنے کے قابل ہیں۔ جب کلائنٹ (sendMessage) فنکشن کو کال کرتا ہے، تو سرور (io.emit) کے ذریعے جڑے ہوئے ہر فرد کو پیغام بھیجتا ہے۔ بہت سیدھا، ہے نا؟"
2. رد عمل کے ساتھ فرنٹ اینڈ
"اب میری باری ہے۔ آئیے React کلائنٹ پر کام کرتے ہیں،" برٹ کہتے ہیں۔
npx create-react-app chat-client cd chat-client npm install socket.io-client
چیٹ کا جزو (Chat.js):
import { useState, useEffect } from 'react'; import io from 'socket.io-client'; // Connect to the server const socket = io('http://localhost:3000'); function Chat() { const [message, setMessage] = useState(''); const [messages, setMessages] = useState([]); useEffect(() => { // Listen for new messages socket.on('receiveMessage', (newMessage) => { setMessages([...messages, newMessage]); }); }, [messages]); const sendMessage = () => { if (message.trim()) { socket.emit('sendMessage', message); setMessage(''); } }; return ( <div style={{ padding: '20px' }}> <div> {messages.map((msg, index) => ( <p key={index}>{msg}</p> ))} </div> <input value={message} onChange={(e) => setMessage(e.target.value)} onKeyPress={(e) => e.key === 'Enter' && sendMessage()} /> <button onClick={sendMessage}>Send</button> </div> ); } export default Chat;
یہ کیسے کام کرتا ہے:
- پیغامات سرور کے ذریعہ ویب ساکٹ کے ذریعے کسی بھی ایسے کلائنٹ کو بھیجے جاتے ہیں جو جڑے ہوئے ہیں۔
- ری ایکٹ ایپلیکیشن ایک صفحے کی ایپلی کیشن ہے جو صفحہ کو دوبارہ لوڈ کیے بغیر UI کو ریفریش کرنے کے قابل ہے۔
اسے آزمائیں:
- سرور شروع کرنے کے لیے، کنسول میں node server.js درج کریں۔
- React ایپلیکیشن کو شروع کرنے کے لیے، کنسول میں npm start داخل کریں۔
- براؤزر پر دو ٹیبز کھلنے کے ساتھ، ایک ٹیب میں ایک پیغام ٹائپ کریں اور دیکھیں کہ کس طرح تقریباً فوری طور پر، دوسرا ٹیب وہی پیغام دکھائے گا۔
حقیقی زندگی مثالیں استعمال کرتی ہے۔
یہ وہی ہے جو برٹ نے ایپلی کیشن کی بنیاد پر تعمیر کرنا تھا، لیکن ایرنی نے ذکر کیا، "زیادہ تر حقیقی زندگی کی ایپلی کیشنز کو تھوڑا سا غلطی سے نمٹنے اور ترقی کے فریم ورک کو بڑھانے کے طریقے کی ضرورت ہوتی ہے۔" آئیے کچھ ممکنہ مسائل دیکھتے ہیں۔
1. لائن آف کنکشن اسٹاپس
React کلائنٹ میں دوبارہ کنکشن کی حکمت عملی کو نافذ کریں۔
socket.on('disconnect', () => { console.log('Disconnected. Trying to reconnect...'); socket.connect(); // Auto-reconnect });2. صارف کی شناخت
تصدیق شدہ JWT ٹوکنز کا استعمال کرتے ہوئے ویب ساکٹ کو محفوظ کریں۔
// On login, send a token socket.emit('authenticate', { token: 'USER_JWT' }); // Server verifies token socket.on('authenticate', ({ token }) => { if (isValidToken(token)) { socket.authenticated = true; } else { socket.disconnect(); } });3. ریڈیس کے ساتھ اسکیلنگ
Redis کا استعمال کرتے ہوئے مختلف سرورز کے درمیان پیغام رسانی کو متعارف کروائیں۔
npm install redis
سرور کوڈ:
const redis = require('redis'); const subscriber = redis.createClient(); subscriber.subscribe('chat-channel'); subscriber.on('message', (channel, message) => { io.emit('receiveMessage', message); });چیٹ سے آگے: مشترکہ دستاویز میں ترمیم کرنا
یہ برٹ کا اگلا خیال ہے - گوگل ڈاکس کی طرح ایک ایڈیٹر۔ ایرنی کا کہنا ہے کہ، "آپ مختلف لوگوں کی طرف سے کی گئی تبدیلیوں کو سننے اور انہیں ضم کرنے کے لیے ویب ساکٹ استعمال کر سکتے ہیں۔"
مثال کے طور پر:
صارف A کی قسمیں: "ہیلو"
صارف B "o" کو ہٹاتا ہے اور "، ورلڈ" کا اضافہ کرتا ہے
سرور ہر ایک کی اسٹروک کو سنتا ہے اور اسے تمام کلائنٹس کے لیے نشر کرتا ہے، تاکہ ان کے متعلقہ کلائنٹس ایک اپ ڈیٹ شدہ دستاویز پیش کریں۔
کوڈ کا ٹکڑا:
// Client sends keystrokes textarea.addEventListener('input', (e) => { socket.emit('textChange', e.target.value); }); // Server broadcasts changes socket.on('textChange', (text) => { io.emit('updateText', text); });سیکورٹی کے مسائل
ایرنی نے ہمیں خبردار کیا کہ: "آپ کو کبھی بھی HTTPS/WSS کے بغیر WebSockets کا استعمال نہیں کرنا چاہئے!"
- WSS (WebSocket Secure) کا استعمال کریں:
const io = new Server(server, { cors: { origin: "https://yourdomain.com" }, });
تمام ان پٹس کی توثیق کریں تاکہ کسی بھی ڈیٹا کو صاف کیا جاسکے جو XSS حملوں کا باعث بن سکتا ہے۔
سپیمنگ کے رویے والے صارفین پر شرح کی حد نافذ کریں۔
اکثر پوچھے گئے سوالات
سوال: کیا WebSockets کی رفتار HTTP سے زیادہ بہتر ہے؟
A: جی ہاں! فوری ایپلی کیشنز کے لیے، WebSockets بہترین ہیں کیونکہ وہ پولنگ کرانے کی ضرورت کو دور کر دیتے ہیں۔
سوال: کیا WebSockets کے ساتھ REST APIs کا استعمال ممکن ہے؟
A: جی ہاں، ضرور! CRUD آپریشنز کرنے کے لیے لائیو اپ ڈیٹس اور REST کے ساتھ WebSockets کا استعمال کریں۔
سوال: میں سرور کے کریش ہونے سے کیسے نمٹ سکتا ہوں؟
A: کلائنٹ خود بخود دوبارہ جڑ سکتے ہیں (اوپر دوبارہ کنکشن کی منطق دیکھیں)۔
آخری الفاظ
برٹ کی چیٹ ایپ اب حقیقی وقت کی توجہ کے ساتھ پنگ کرتی ہے اور ایرنی اطمینان سے مسکراتے ہیں۔ WebSockets نہ صرف چیٹس کے لیے ہیں، بلکہ لائیو ڈیش بورڈز، گیمنگ، IoT، اور مزید کا مقصد بھی پورا کرتے ہیں۔
آپ کی باری: آگے بڑھیں اور مثالیں آزمائیں، انہیں ختم کریں، اور کچھ نیا بنائیں۔ آپ کی ریئل ٹائم ایپس انتظار کر رہی ہیں!
