WebSockets нақты уақыттағы қолданбаларды қалай қуаттайды

Кіріспе: HTTP жеткіліксіз болғанда

Берт пен Эрни, екі дос бірге армандарының қосалқы жобасында жұмыс істеуде: қашықтан жұмыс істейтін командалар үшін нақты уақытта сөйлесуге мүмкіндік беретін чат қолданбасы. Фронт кодтары Берт өзін әрең ұстай алады, өйткені ол өзінің бэкенд маманы досымен жарқын жаңа мүмкіндіктерді бөліседі. «Қараңдар! Мен хабарламаны тере аламын және ол серверге жіберіледі және мен бірден дерлік пайда болатын жауапты көремін! Эрни, бейтекші гуру, қабағын түйіп. «Бірақ екі адамның бір уақытта сөйлескісі келетін мәселесін қалай шешуге болады? Қолданбаңыз сөйлесуді «көруге» мүмкіндік берудің орнына бетті жаңартып отырады, бұл нақты уақытта сөйлесуді мүмкін емес етеді ».

Мәселе мынада, Берт қолданбасы HTTP протоколында жұмыс істейді, онда клиент серверден алуды сұрауы керек. Эрнидің қысқаша мазмұны: «Достарыңыздың барлығы сізге хат жазып жатқан сияқты, бірақ кенеттен сіз жаңа хабарлардың бар-жоғын тексеру үшін жаңартқанша жауаптардың ешқайсысын көре алмайсыз, өйткені олар соңғы хабарды жаңартқанша көре алмайды және HTTP осылай жұмыс істейді!»

Мұнда ең жақсы бөлік келеді: нақты уақытта жұмыс істейтін толық стек қолданбалары үшін WebSockets бар. Бұл бөлім өте қызықты, сондықтан Эрни мен Бертке қосылып, WebSockets қалай жұмыс істейтінін, олардың іске асыру процедураларын, маңыздылығының себептерін және т.б. білейік.

WebSockets дегеніміз не? Жаңадан бастаушыға арналған үзіліс

WebSockets клиент (веб-шолғыш) мен сервер арасындағы үздіксіз телефон қоңырауына ұқсас. Олар HTTP протоколынан ерекшеленеді, ол «хат жіберу, жауапты күту» тәртібімен жұмыс істейді. WebSockets көмегімен екі тарап өз қалауынша еркін сөйлесе алады. WebSockets мүмкіндіктеріне мыналар кіреді:

• Толық дуплекс: клиент пен сервер бір уақытта деректерді жіберуі мүмкін.
• Төмен кідіріс: шамадан тыс қайталанатын қол алысулар болмайды; деректер еркін қозғала алады.
• Жеңіл: хабарлар шағын, бұл өткізу қабілеттілігін пайдалануды азайтады.

Мысал: Үнемі жаңартылып тұратын спорттық таблоны елестетіңіз. HTTP көмегімен клиент әр секунд сайын серверге спам жіберуі керек: «Бал өзгерді ме?» WebSockets көмегімен сервер «МАҚСАТ!» деп хабарлайды. бұл орын алған сәтте.

WebSockets және HTTP: жаңа ыстықтық дегеніміз не?

Берт отыра қалып, басын изеді. «Бірақ HTTP көптеген қолданбалар үшін жақсы жұмыс істейді. Неліктен қақпа бағаналарын жылжыту керек?» Эрни ақырын күліп, маркерді алып, тақтаға бірдеңе жаза бастайды.

«Жоғарыдан бастайық», - дейді ол. «Тікелей спорт ұпайлары сияқты нақты уақыттағы өмір жаңартуларын айтайық. Клиенттер әр секунд сайын серверден: 'Мен білуім керек нәрсе бар ма?' Бұл сауалнама, сондықтан әрбір отыз секунд сайын «Біз кездесіп жатырмыз ба?» деп сұрау керек. Күлкілі, иә? Ол сонымен қатар өткізу қабілеттілігін көп пайдаланады».

WebSockets мұны өзгертеді:

• Нақты уақыттағы жаңартулар: сервердегі деректер өзгерген сәтте жіберіледі; дауыс беру қажет емес.
• Чат қолданбалары: бетті жаңарту қажет емес. Сіз терген кезде хабарлар толып кетеді.
• Көп ойыншыға арналған бейне ойындар: бұдан былай кекеш қозғалыстар болмайды. Әрекеттер экрандарда үздіксіз көрсетіледі.

«HTTP блог немесе өнім беті сияқты статикалық нәрселермен жұмыс істеуге лайықты. Тікелей өзара әрекеттесуге келетін болсақ, тұрақты байланыс қажет. WebSockets».

Нақты уақыттағы чат қолданбасын жасау: жақсы нәрсе басталады

Эрни көзілдірігін тазартады. "Олай болса, қарапайым чат қолданбасын жасайық," - дейді Эрни. "Бізде сервер үшін Node.js сервері және фронтенд үшін React қолданбасы болады. Дайын ба?"

1. Socket.IO Backend жасаңыз

«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 бар фронтенді

«Енді менің кезегім. 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 қолданбасы - бетті қайта жүктемей-ақ UI жаңартуға қабілетті бір беттік қолданба.

Оны сынау:

1. Серверді іске қосу үшін консольге server.js түйінін енгізіңіз.
2. React қолданбасын іске қосу үшін консольге npm start енгізіңіз.
3. Браузерде екі қойынды ашылғанда, бір қойындыға хабарды теріп, басқа қойындыда бірдей хабарды бірден көрсететінін байқаңыз.

Нақты өмірдегі мысалдар

Бұл Берт қолданбаның негізінде құрастыруды көздеді, бірақ Эрни былай дейді: «Нақты өмірдегі қосымшалардың көпшілігі қателерді өңдеуді және даму шеңберін кеңейту әдісін қажет етеді». Кейбір ықтимал проблемаларды көрейік.

1. Қосылу сызығы тоқтайды

React клиентінде қайта қосылу стратегиясын іске асырыңыз.

 socket.on('disconnect', () => { console.log('Disconnected. Trying to reconnect...'); socket.connect(); // Auto-reconnect });

2. Пайдаланушы идентификациясы

Түпнұсқалық расталған JWT таңбалауыштарын пайдаланып қауіпсіз WebSocket.

 // 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 көмегімен масштабтау

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 Docs-қа ұқсас редактор. Эрни былай дейді: «Сіз әртүрлі адамдар жасаған өзгерістерді тыңдау және оларды біріктіру үшін веб-розеткаларды пайдалана аласыз».

Мысалы :

• Пайдаланушы A түрлері: «Сәлеметсіз бе»

• B пайдаланушысы “o” таңбасын алып тастап, “, World” қосады

• Сервер әрбір перне басуды тыңдайды және оны барлық клиенттерге таратады, олардың сәйкес клиенттері ЖАҢАРТЫЛҒАН құжатты көрсетуі үшін.

  
  

Код үзіндісі:

 // 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 қолданбаңыз!»

1. WSS (WebSocket Secure) пайдаланыңыз:

 const io = new Server(server, { cors: { origin: "https://yourdomain.com" }, });

2. XSS шабуылдарына әкелуі мүмкін кез келген деректерді зарарсыздандыру үшін барлық кірістерді растаңыз.

   
   

3. Спам жіберу әрекеті бар пайдаланушыларға тарифтік шектеуді енгізіңіз.

Жиі қойылатын сұрақтар

С: WebSockets жылдамдығы HTTP жылдамдығынан әлдеқайда жақсы ма?

A: Иә! Лездік қолданбалар үшін WebSockets ең жақсысы, себебі олар сауалнаманы жүргізу қажеттілігін жояды.

С: REST API интерфейстерін WebSockets-пен бірге пайдалануға болады ма?

A: Иә, сөзсіз! CRUD әрекеттерін орындау үшін тікелей жаңартулары бар WebSockets және REST пайдаланыңыз.

С: Сервердің бұзылуымен қалай күресуге болады?

A: Клиенттер автоматты түрде қайта қосыла алады (жоғарыдағы қайта қосу логикасын қараңыз).

Қорытынды сөздер

Берттің чат қолданбасы енді нақты уақыттағы сүйкімділікпен ойнайды, ал Эрни қанағаттанушылықпен күледі. WebSockets тек чаттар үшін ғана емес, сонымен қатар тікелей бақылау тақталары, ойындар, IoT және т.б. мақсаттарға қызмет етеді.

Сіздің кезегіңіз: Жалғастырыңыз және мысалдарды сынап көріңіз, оларды жойыңыз және жаңа нәрсе жасаңыз. Нақты уақыттағы қолданбаларыңыз күтуде!