መግቢያ፡ HTTP በቂ ካልሆነ
አብረው፣ በርት እና ኤርኒ፣ ሁለት ጓደኛሞች በህልማቸው ጎን ፕሮጀክት ላይ እየሰሩ ነው፡ በርቀት ለሚሰሩ ቡድኖች የእውነተኛ ጊዜ ውይይቶችን የሚያስችል የውይይት መተግበሪያ። የፊት-መጨረሻ ኮዴር በርት ከጀርባ ስፔሻሊስት ጓደኛው ጋር የሚያብረቀርቁ አዳዲስ ባህሪያትን ሲያካፍል እራሱን ሊይዝ አይችልም። “እነሆ! መልእክት መተየብ እችላለሁ፣ እና ወደ አገልጋዩ ይላካል፣ እና ምላሹ ወዲያውኑ ብቅ ሲል አይቻለሁ!” የኋለኛው ጉሩ ኤርኒ ፊቱን አኮረፈ። ነገር ግን የሁለት ሰዎች በአንድ ጊዜ ለመነጋገር የሚሞክሩትን ጉዳይ እንዴት መፍታት ይቻላል? የእርስዎ መተግበሪያ ውይይቱን 'እንዲመለከቱ' ከመፍቀድ ይልቅ ገጹን ማደስ ይቀጥላል፣ ይህም በቅጽበት መወያየት የማይቻል ያደርገዋል።
ተግዳሮቱ የቤርት አፕ የሚሰራው በኤችቲቲፒ ላይ ሲሆን ደንበኛው ከአገልጋዩ እንዲያመጣ መጠየቅ አለበት። ኤርኒ እንዲህ ሲል ገልጿል:- “ሁሉም ጓደኛዎችዎ መልሰው መልእክት እንደሚልኩልህ ነው፣ ነገር ግን በድንገት፣ አዲስ መልዕክቶች መኖራቸውን ለማረጋገጥ እስክታደስ ድረስ ምንም አይነት ምላሾችን ማየት አትችልም ምክንያቱም እስክታደስ ድረስ የመጨረሻውን መልእክትህን ማየት ስለማይችል እና HTTP የሚሰራው በዚህ መንገድ ነው!”
በጣም ጥሩው ክፍል እዚህ ይመጣል፡ በእውነተኛ ጊዜ ለሚሰሩ ሙሉ ቁልል መተግበሪያዎች፣ WebSockets አለ። ይህ ክፍል እጅግ በጣም አጓጊ ነው፣ስለዚህ ከኤርኒ እና በርት ጋር እንቀላቀል እና WebSockets እንዴት እንደሚሰሩ፣የእነሱ አተገባበር ሂደቶች፣ከአስፈላጊነታቸው በስተጀርባ ያለውን ምክንያት እና ሌሎችንም እንወቅ።
WebSockets ምንድን ናቸው? የጀማሪዎች ብልሽት
WebSockets በደንበኛ (በእርስዎ የድር አሳሽ) እና በአገልጋይ መካከል ካለው ተከታታይ የስልክ ጥሪ ጋር ተመሳሳይ ናቸው። እነሱ ከኤችቲቲፒ ፕሮቶኮል የሚለያዩት “ደብዳቤ ይላኩ፣ ምላሽ እስኪሰጥ ይጠብቁ” በሚለው አሰራር ነው። በWebSockets ሁለቱም ወገኖች እንደፈለጉ በነፃነት መነጋገር ይችላሉ። የ WebSockets ባህሪያት የሚከተሉትን ያካትታሉ:
- ሙሉ-ዱፕሌክስ፡- ለደንበኛውም ሆነ ለአገልጋዩ በአንድ ጊዜ መረጃን ማስተላለፍ ይቻላል።
- ዝቅተኛ መዘግየት: ከመጠን በላይ ተደጋጋሚ የእጅ መጨባበጥ የለም; ውሂብ በነጻ ሊፈስ ይችላል.
- ቀላል ክብደት፡ መልእክቶች ትንሽ ናቸው ይህም የመተላለፊያ ይዘት አጠቃቀምን ይቀንሳል።
ምሳሌ፡ በየጊዜው የሚዘመን የስፖርት የውጤት ሰሌዳን በዓይነ ሕሊናህ ተመልከት። በኤችቲቲፒ፣ ደንበኛው ያለማቋረጥ በየሰከንዱ አገልጋዩን አይፈለጌ መልዕክት ማድረግ አለበት፣ “የትኛውም የውጤት ለውጥ?” በWebSockets፣ አገልጋዩ “GOAL!” በማለት ያስታውቃል። በቅጽበት ይከሰታል.
WebSockets vs HTTP፡ አዲሱ ትኩስነት ምንድን ነው?
በርት ተቀምጦ ጭንቅላቱን ቧጨረው። ነገር ግን HTTP ለአብዛኛዎቹ መተግበሪያዎች ጥሩ ይሰራል። ለምን የጎል መሎጊያዎቹን ያንቀሳቅሳሉ? ኤርኒ በቀስታ ሳቀች፣ ምልክት ወሰደች እና በነጭ ሰሌዳው ላይ የሆነ ነገር መጻፍ ጀመረች።
“ከላይ እንጀምር” ይላል። እንደ የቀጥታ የስፖርት ውጤቶች ያሉ የእውነተኛ ጊዜ የህይወት ዝመናዎችን እንበል። ደንበኞች በየሰከንዱ አገልጋዩን መጠየቅ አለባቸው፡- 'ማወቅ ያለብኝ ነገር አለ?' ያ ምርጫ ነው፣ስለዚህ በየሰላሳ ሰከንድ፣ 'ተገናኘን?' ብለህ መጠየቅ አለብህ። አስቂኝ ፣ አይደለም? በተጨማሪም ብዙ የመተላለፊያ ይዘት ይጠቀማል።
WebSockets ይህንን ይለውጠዋል፡-
- የእውነተኛ ጊዜ ዝመናዎች፡ በአገልጋዩ ላይ ያለው ውሂብ በሚቀየርበት ቅጽበት ይላካል። ምንም ምርጫ አያስፈልግም.
- የውይይት መተግበሪያዎች፡ ገጹን ማደስ አያስፈልግም። በሚተይቡበት ጊዜ መልዕክቶች ይጎርፋሉ።
- ባለብዙ ተጫዋች የቪዲዮ ጨዋታዎች፡ ከእንግዲህ የመንተባተብ እንቅስቃሴዎች የሉም። ድርጊቶች ያለምንም እንከን በስክሪኖች ላይ ይታያሉ።
“ኤችቲቲፒ እንደ ጦማር ወይም የምርት ገጽ ካሉ የማይለዋወጡ ጉዳዮች ጋር በመገናኘት ረገድ በትክክል ጨዋ ነው። የቀጥታ መስተጋብርን በተመለከተ ግን የማያቋርጥ ግንኙነት ያስፈልጋል። ዌብሶኬቶች።
የእውነተኛ ጊዜ የውይይት መተግበሪያ መፍጠር፡ ጥሩው ነገር ይጀምራል
ኤርኒ መነጽሩን ያጸዳል። "ስለዚህ ቀለል ያለ የውይይት መተግበሪያ እንስራ" ሲል ኤርኒ ተናገረ። "ለኋለኛው ክፍል Node.js አገልጋይ እና ለግንባሩ ክፍል React መተግበሪያ ይኖረናል። ዝግጁ?"
1. Socket.IO Backend ይፍጠሩ
"የNode.js አገልጋይ ለሶኬት.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'); });
"ደንበኛው እና አገልጋዩ እርስ በእርሳቸው መግባባት የቻሉት በሶኬት.IO የዌብሶኬት ግንኙነቶች አያያዝ ምክንያት ነው። ደንበኛው የ(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;
እንዴት እንደሚሰራ:
- መልእክቶች በአገልጋዩ በWebSocket በኩል ወደተገናኙት ማናቸውም ደንበኞች ይላካሉ።
- የReact አፕሊኬሽኑ ገጹን እንደገና ሳይጭን ዩአይዩን ማደስ የሚችል ባለአንድ ገጽ መተግበሪያ ነው።
ይሞክሩት:
- አገልጋዩን ለመጀመር በኮንሶሉ ውስጥ node server.js ያስገቡ።
- React መተግበሪያን ለመጀመር በኮንሶሉ ውስጥ npm ጀምርን አስገባ።
- በአሳሽ ላይ ሁለት ትሮች ሲከፈቱ መልእክትን በአንድ ትር ውስጥ ተይብ እና እንዴት ወዲያውኑ ማለት ይቻላል ሌላኛው ትር ተመሳሳይ መልእክት እንደሚያሳይ አስተውል።
ሪል-ህይወት ምሳሌዎችን ይጠቀማል
በርት አፕሊኬሽኑን መሰረት አድርጎ ለመገንባት ያሰበው ይህ ነው፣ ነገር ግን ኤርኒ “አብዛኞቹ የእውነተኛ ህይወት አፕሊኬሽኖች ትንሽ የስህተት አያያዝ እና የእድገት ማዕቀፉን የማስፋት መንገድ ያስፈልጋቸዋል” በማለት ተናግራለች። አንዳንድ ሊሆኑ የሚችሉ ችግሮችን እንይ።
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); });ከውይይት ባሻገር፡ የጋራ ሰነድ ማስተካከል
ይህ የበርት ቀጣዩ ሀሳብ ነው - ከ Google ሰነዶች ጋር የሚመሳሰል አርታኢ። ኤርኒ እንዲህ ይላል፣ “በተለያዩ ሰዎች የተደረጉ ለውጦችን ለማዳመጥ እና እነሱን ለማዋሃድ የድር ሶኬቶችን መጠቀም ትችላለህ።
ለምሳሌ፡-
የተጠቃሚ 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); });የደህንነት ጉዳዮች
ኤርኒ እንዲህ ሲል አስጠንቅቆናል፡- “WebSocketsን ያለ HTTPS/WSS በጭራሽ መጠቀም የለብህም።
- WSS (WebSocket Secure) ይጠቀሙ፡-
const io = new Server(server, { cors: { origin: "https://yourdomain.com" }, });
ወደ XSS ጥቃቶች ሊመራ የሚችል ማንኛውንም ውሂብ ለማጽዳት ሁሉንም ግብዓቶች ያረጋግጡ።
የአይፈለጌ መልዕክት ባህሪ ባላቸው ተጠቃሚዎች ላይ የዋጋ ገደብን ተግብር።
የሚጠየቁ ጥያቄዎች
ጥ፡ የዌብሶኬት ፍጥነት ከኤችቲቲፒ በጣም የተሻለ ነው?
መ: አዎ! ለቅጽበታዊ አፕሊኬሽኖች፣ WebSockets ምርጥ ናቸው ምክንያቱም ምርጫን የማካሄድ አስፈላጊነትን ያስወግዳሉ።
ጥ፡ REST APIsን ከWebSockets ጋር በጋራ መጠቀም ይቻላል?
መ: አዎ ፣ በእርግጠኝነት! የCRUD ስራዎችን ለማከናወን WebSocketsን ከቀጥታ ዝመናዎች እና REST ይጠቀሙ።
ጥ፡ የአገልጋይ ብልሽትን እንዴት መቋቋም እችላለሁ?
መ: ደንበኞች በራስ-ሰር እንደገና መገናኘት ይችላሉ (ከላይ ያለውን የዳግም ግንኙነት አመክንዮ ይመልከቱ)።
የመጨረሻ ቃላት
የቤርት የውይይት መተግበሪያ አሁን በእውነተኛ ጊዜ ማራኪነት ፒንግ አለው እና ኤርኒ በእርካታ ፈገግ ብላለች። ዌብሶኬቶች ለውይይት ብቻ ሳይሆን የቀጥታ ዳሽቦርዶች፣ ጨዋታዎች፣ አይኦቲ እና ሌሎችም ዓላማዎችን ያገለግላሉ።
ተራህ፡ ቀጥል እና ምሳሌዎችን ሞክር፣ አጥፋቸው እና አዲስ ነገር ፍጠር። የእርስዎ ቅጽበታዊ መተግበሪያዎች እየጠበቁ ናቸው!
