Latviešu

Izpētiet reāllaika datu straumēšanu, izmantojot Socket.IO, aptverot iestatīšanu, ieviešanu, mērogošanu un labāko praksi globālām lietotnēm.

Reāllaika datu straumēšana: Socket.IO ieviešanas rokasgrāmata

Mūsdienu straujajā digitālajā vidē reāllaika datu straumēšana ir ļoti svarīga lietotnēm, kurām nepieciešami tūlītēji atjauninājumi un netraucēta saziņa. Sākot no tiešraides tērzēšanas lietotnēm līdz reāllaika analītikas paneļiem, spēja nekavējoties pārsūtīt datus uzlabo lietotāja pieredzi un nodrošina konkurences priekšrocības. Socket.IO, populāra JavaScript bibliotēka, vienkāršo reāllaika divvirzienu komunikācijas ieviešanu starp tīmekļa klientiem un serveriem. Šī visaptverošā rokasgrāmata jūs iepazīstinās ar reāllaika datu straumēšanas iestatīšanas un ieviešanas procesu, izmantojot Socket.IO, aptverot būtiskus jēdzienus, praktiskus piemērus un labāko praksi globālām lietotnēm.

Kas ir reāllaika datu straumēšana?

Reāllaika datu straumēšana ietver nepārtrauktu un tūlītēju datu pārraidi no datu avota uz galamērķi bez būtiskas aizkaves. Atšķirībā no tradicionālajiem pieprasījuma-atbildes modeļiem, kur klientiem atkārtoti jāpieprasa atjauninājumi, reāllaika straumēšana ļauj serveriem nosūtīt datus klientiem, tiklīdz tie kļūst pieejami. Šī pieeja ir būtiska lietotnēm, kurām nepieciešama aktuāla informācija, piemēram:

Reāllaika datu straumēšanas priekšrocības ietver:

Iepazīstinām ar Socket.IO

Socket.IO ir JavaScript bibliotēka, kas nodrošina reāllaika, divvirzienu un notikumu balstītu saziņu starp tīmekļa klientiem un serveriem. Tā abstrahē pamatā esošo transporta protokolu, piemēram, WebSockets, sarežģītību un nodrošina vienkāršu un intuitīvu API reāllaika lietotņu veidošanai. Socket.IO darbojas, izveidojot pastāvīgu savienojumu starp klientu un serveri, ļaujot abām pusēm reāllaikā sūtīt un saņemt datus.

Galvenās Socket.IO funkcijas ietver:

Socket.IO projekta iestatīšana

Lai sāktu darbu ar Socket.IO, jūsu sistēmā ir jābūt instalētam Node.js un npm (Node Package Manager). Veiciet šīs darbības, lai iestatītu pamata Socket.IO projektu:

1. Izveidojiet projekta direktoriju

Izveidojiet jaunu direktoriju savam projektam un pārejiet uz to:

mkdir socketio-example
cd socketio-example

2. Inicializējiet Node.js projektu

Inicializējiet jaunu Node.js projektu, izmantojot npm:

npm init -y

3. Instalējiet Socket.IO un Express

Instalējiet Socket.IO un Express, populāru Node.js tīmekļa ietvaru, kā atkarības:

npm install socket.io express

4. Izveidojiet servera puses kodu (index.js)

Izveidojiet failu ar nosaukumu `index.js` un pievienojiet šādu kodu:

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);

const port = 3000;

app.get('/', (req, res) => {
 res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
 console.log('Lietotājs pieslēdzies');

 socket.on('disconnect', () => {
 console.log('Lietotājs atvienojās');
 });

 socket.on('chat message', (msg) => {
 io.emit('chat message', msg); // Apraidīt ziņojumu visiem pieslēgtajiem klientiem
 console.log('ziņojums: ' + msg);
 });
});

server.listen(port, () => {
 console.log(`Serveris klausās portā ${port}`);
});

Šis kods iestata Express serveri un integrē Socket.IO. Tas gaida ienākošos savienojumus un apstrādā notikumus, piemēram, 'connection', 'disconnect' un 'chat message'.

5. Izveidojiet klienta puses kodu (index.html)

Izveidojiet failu ar nosaukumu `index.html` tajā pašā direktorijā un pievienojiet šādu kodu:




 Socket.IO tērzēšana
 


 

    Šis HTML fails iestata pamata tērzēšanas saskarni ar ievades lauku ziņojumu sūtīšanai un sarakstu saņemto ziņojumu attēlošanai. Tas ietver arī Socket.IO klienta bibliotēku un JavaScript kodu ziņojumu sūtīšanas un saņemšanas apstrādei.

    6. Palaidiet lietotni

    Startējiet Node.js serveri, izpildot šādu komandu terminālī:

    node index.js

    Atveriet savu tīmekļa pārlūku un dodieties uz `http://localhost:3000`. Jums vajadzētu redzēt tērzēšanas saskarni. Atveriet vairākus pārlūkprogrammas logus vai cilnes, lai simulētu vairākus lietotājus. Ierakstiet ziņojumu vienā logā un nospiediet Enter; jums vajadzētu redzēt, ka ziņojums reāllaikā parādās visos atvērtajos logos.

    Socket.IO pamatkoncepcijas

    Socket.IO pamatkoncepciju izpratne ir būtiska, lai izveidotu robustas un mērogojamas reāllaika lietotnes.

    1. Savienojumi

    Savienojums ir pastāvīga saite starp klientu un serveri. Kad klients pieslēdzas serverim, izmantojot Socket.IO, gan klientā, gan serverī tiek izveidots unikāls soketa objekts. Šis soketa objekts tiek izmantots savstarpējai saziņai.

    // Servera puse
    io.on('connection', (socket) => {
     console.log('Lietotājs pieslēdzies ar soketa ID: ' + socket.id);
    
     socket.on('disconnect', () => {
     console.log('Lietotājs atvienojās');
     });
    });
    
    // Klienta puse
    var socket = io();

    2. Notikumi

    Notikumi ir primārais mehānisms datu apmaiņai starp klientiem un serveri. Socket.IO izmanto uz notikumiem balstītu API, kas ļauj definēt pielāgotus notikumus un saistīt tos ar konkrētām darbībām. Klienti var emitēt notikumus uz serveri, un serveris var emitēt notikumus klientiem.

    // Servera puse
    io.on('connection', (socket) => {
     socket.on('custom event', (data) => {
     console.log('Saņemtie dati:', data);
     socket.emit('response event', { message: 'Dati saņemti' });
     });
    });
    
    // Klienta puse
    socket.emit('custom event', { message: 'Sveiciens no klienta' });
    
    socket.on('response event', (data) => {
     console.log('Saņemtā atbilde:', data);
    });

    3. Apraide (Broadcasting)

    Apraide ļauj vienlaikus nosūtīt datus vairākiem pieslēgtiem klientiem. Socket.IO piedāvā dažādas apraides iespējas, piemēram, datu sūtīšanu visiem pieslēgtajiem klientiem, datu sūtīšanu klientiem noteiktā istabā vai datu sūtīšanu visiem klientiem, izņemot sūtītāju.

    // Servera puse
    io.on('connection', (socket) => {
     socket.on('new message', (msg) => {
     // Apraidīt visiem pieslēgtajiem klientiem
     io.emit('new message', msg);
    
     // Apraidīt visiem klientiem, izņemot sūtītāju
     socket.broadcast.emit('new message', msg);
     });
    });

    4. Istabas (Rooms)

    Istabas ir veids, kā grupēt klientus un sūtīt datus tikai klientiem noteiktā istabā. Tas ir noderīgi scenārijos, kur nepieciešams mērķēt uz konkrētām lietotāju grupām, piemēram, tērzēšanas istabām vai tiešsaistes spēļu sesijām. Klienti var dinamiski pievienoties istabām vai tās pamest.

    // Servera puse
    io.on('connection', (socket) => {
     socket.on('join room', (room) => {
     socket.join(room);
     console.log(`Lietotājs ${socket.id} pievienojās istabai ${room}`);
    
     // Nosūtīt ziņojumu visiem klientiem istabā
     io.to(room).emit('new user joined', `Lietotājs ${socket.id} pievienojās istabai`);
     });
    
     socket.on('send message', (data) => {
     // Nosūtīt ziņojumu visiem klientiem istabā
     io.to(data.room).emit('new message', data.message);
     });
    
     socket.on('leave room', (room) => {
     socket.leave(room);
     console.log(`Lietotājs ${socket.id} pameta istabu ${room}`);
     });
    });
    
    // Klienta puse
    socket.emit('join room', 'room1');
    socket.emit('send message', { room: 'room1', message: 'Sveiciens no room1' });
    
    socket.on('new message', (message) => {
     console.log('Saņemtais ziņojums:', message);
    });

    5. Nosaukumvietas (Namespaces)

    Nosaukumvietas ļauj multipleksēt vienu TCP savienojumu vairākiem mērķiem, sadalot lietotnes loģiku vienā kopīgā pamatā esošā savienojumā. Iedomājieties tos kā atsevišķus virtuālus "soketus" vienā fiziskā soketā. Jūs varētu izmantot vienu nosaukumvietu tērzēšanas lietotnei un citu spēlei. Tas palīdz uzturēt saziņas kanālus organizētus un mērogojamus.

    //Servera puse
    const chatNsp = io.of('/chat');
    
    chatNsp.on('connection', (socket) => {
     console.log('kāds pieslēdzās tērzēšanai');
     // ... jūsu tērzēšanas notikumi ...
    });
    
    const gameNsp = io.of('/game');
    
    gameNsp.on('connection', (socket) => {
     console.log('kāds pieslēdzās spēlei');
     // ... jūsu spēles notikumi ...
    });
    
    //Klienta puse
    const chatSocket = io('/chat');
    const gameSocket = io('/game');
    
    chatSocket.emit('chat message', 'Sveiciens no tērzēšanas!');
    gameSocket.emit('game action', 'Spēlētājs pārvietojās!');

    Reāllaika funkciju ieviešana ar Socket.IO

    Apskatīsim, kā ieviest dažas bieži sastopamas reāllaika funkcijas, izmantojot Socket.IO.

    1. Reāllaika tērzēšanas lietotnes izveide

    Iepriekš izveidotā pamata tērzēšanas lietotne demonstrē reāllaika tērzēšanas pamatprincipus. Lai to uzlabotu, varat pievienot tādas funkcijas kā:

    Šeit ir piemērs, kā pievienot rakstīšanas indikatorus:

    // Servera puse
    io.on('connection', (socket) => {
     socket.on('typing', (username) => {
     // Apraidīt visiem klientiem, izņemot sūtītāju
     socket.broadcast.emit('typing', username);
     });
    
     socket.on('stop typing', (username) => {
     // Apraidīt visiem klientiem, izņemot sūtītāju
     socket.broadcast.emit('stop typing', username);
     });
    });
    
    // Klienta puse
    input.addEventListener('input', () => {
     socket.emit('typing', username);
    });
    
    input.addEventListener('blur', () => {
     socket.emit('stop typing', username);
    });
    
    socket.on('typing', (username) => {
     typingIndicator.textContent = `${username} raksta...`;
    });
    
    socket.on('stop typing', () => {
     typingIndicator.textContent = '';
    });

    2. Reāllaika analītikas paneļa izveide

    Reāllaika analītikas paneļi parāda aktuālus metriskos datus un tendences, sniedzot vērtīgu ieskatu uzņēmuma darbībā. Jūs varat izmantot Socket.IO, lai reāllaikā straumētu datus no datu avota uz paneli.

    Šeit ir vienkāršots piemērs:

    // Servera puse
    const data = {
     pageViews: 1234,
     usersOnline: 567,
     conversionRate: 0.05
    };
    
    setInterval(() => {
     data.pageViews += Math.floor(Math.random() * 10);
     data.usersOnline += Math.floor(Math.random() * 5);
     data.conversionRate = Math.random() * 0.1;
    
     io.emit('dashboard update', data);
    }, 2000); // Emitēt datus ik pēc 2 sekundēm
    
    // Klienta puse
    socket.on('dashboard update', (data) => {
     document.getElementById('pageViews').textContent = data.pageViews;
     document.getElementById('usersOnline').textContent = data.usersOnline;
     document.getElementById('conversionRate').textContent = data.conversionRate.toFixed(2);
    });

    3. Sadarbības rediģēšanas rīka izstrāde

    Sadarbības rediģēšanas rīki ļauj vairākiem lietotājiem vienlaikus rediģēt dokumentus vai kodu. Socket.IO var izmantot, lai sinhronizētu izmaiņas starp lietotājiem reāllaikā.

    Šeit ir pamata piemērs:

    // Servera puse
    io.on('connection', (socket) => {
     socket.on('text change', (data) => {
     // Apraidīt izmaiņas visiem citiem klientiem tajā pašā istabā
     socket.broadcast.to(data.room).emit('text change', data.text);
     });
    });
    
    // Klienta puse
    textarea.addEventListener('input', () => {
     socket.emit('text change', { room: roomId, text: textarea.value });
    });
    
    socket.on('text change', (text) => {
     textarea.value = text;
    });

    Socket.IO lietotņu mērogošana

    Pieaugot jūsu Socket.IO lietotnei, jums būs jāapsver mērogojamība. Socket.IO ir izstrādāts tā, lai būtu mērogojams, taču jums būs jāievieš noteiktas stratēģijas, lai apstrādātu lielu skaitu vienlaicīgu savienojumu.

    1. Horizontālā mērogošana

    Horizontālā mērogošana ietver jūsu lietotnes sadalīšanu starp vairākiem serveriem. To var panākt, izmantojot slodzes līdzsvarotāju, lai sadalītu ienākošos savienojumus starp pieejamajiem serveriem. Tomēr, ar Socket.IO, jums jānodrošina, ka klienti tiek konsekventi novirzīti uz to pašu serveri visu savienojuma laiku. Tas ir tāpēc, ka Socket.IO balstās uz atmiņā esošām datu struktūrām, lai uzturētu savienojuma stāvokli. Parasti ir nepieciešams izmantot lipīgās sesijas (sticky sessions) / sesijas afinitāti.

    2. Redis adapteris

    Socket.IO Redis adapteris ļauj koplietot notikumus starp vairākiem Socket.IO serveriem. Tas izmanto Redis, atmiņā esošu datu krātuvi, lai apraidītu notikumus visos pieslēgtajos serveros. Tas ļauj mērogot lietotni horizontāli, nezaudējot savienojuma stāvokli.

    // Servera puse
    const { createAdapter } = require('@socket.io/redis-adapter');
    const { createClient } = require('redis');
    
    const pubClient = createClient({ host: 'localhost', port: 6379 });
    const subClient = pubClient.duplicate();
    
    Promise.all([pubClient.connect(), subClient.connect()]).then(() => {
     io.adapter(createAdapter(pubClient, subClient));
     io.listen(3000);
    });

    3. Slodzes līdzsvarošana

    Slodzes līdzsvarotājs ir būtisks, lai sadalītu trafiku starp vairākiem Socket.IO serveriem. Izplatītākie slodzes līdzsvarošanas risinājumi ietver Nginx, HAProxy un mākoņpakalpojumu slodzes līdzsvarotājus, piemēram, AWS Elastic Load Balancing vai Google Cloud Load Balancing. Konfigurējiet savu slodzes līdzsvarotāju, lai izmantotu lipīgās sesijas, lai nodrošinātu, ka klienti tiek konsekventi novirzīti uz to pašu serveri.

    4. Vertikālā mērogošana

    Vertikālā mērogošana ietver viena servera resursu (CPU, atmiņas) palielināšanu. Lai gan to ir vieglāk ieviest nekā horizontālo mērogošanu, tai ir ierobežojumi. Galu galā jūs sasniegsiet punktu, kurā vairs nevarēsiet palielināt viena servera resursus.

    5. Koda optimizēšana

    Efektīva koda rakstīšana var ievērojami uzlabot jūsu Socket.IO lietotnes veiktspēju. Izvairieties no nevajadzīgiem aprēķiniem, minimizējiet datu pārraidi un optimizējiet datu bāzes vaicājumus. Profilēšanas rīki var palīdzēt jums identificēt veiktspējas vājās vietas.

    Socket.IO ieviešanas labākā prakse

    Lai nodrošinātu jūsu Socket.IO projekta panākumus, apsveriet šo labāko praksi:

    1. Nodrošiniet savienojumu drošību

    Izmantojiet drošus WebSockets (WSS), lai šifrētu saziņu starp klientiem un serveri. Tas aizsargā sensitīvus datus no noklausīšanās un manipulācijām. Iegūstiet SSL sertifikātu savam domēnam un konfigurējiet serveri, lai izmantotu WSS.

    2. Ieviesiet autentifikāciju un autorizāciju

    Ieviesiet autentifikāciju, lai pārbaudītu lietotāju identitāti, un autorizāciju, lai kontrolētu piekļuvi resursiem. Tas novērš neatļautu piekļuvi un aizsargā jūsu lietotni no ļaunprātīgiem uzbrukumiem. Izmantojiet pārbaudītus autentifikācijas mehānismus, piemēram, JWT (JSON Web Tokens) vai OAuth.

    3. Apstrādājiet kļūdas eleganti

    Ieviesiet pareizu kļūdu apstrādi, lai eleganti apstrādātu negaidītas kļūdas un novērstu lietotnes avārijas. Reģistrējiet kļūdas atkļūdošanas un uzraudzības nolūkos. Sniedziet lietotājiem informatīvus kļūdu ziņojumus.

    4. Izmantojiet sirdspukstu mehānismu

    Socket.IO ir iebūvēts sirdspukstu mehānisms, bet jums tas ir atbilstoši jākonfigurē. Iestatiet saprātīgu ping intervālu un ping noildzi, lai atklātu un apstrādātu neatbildošus savienojumus. Attīriet resursus, kas saistīti ar atvienotiem klientiem, lai novērstu atmiņas noplūdes.

    5. Uzraugiet veiktspēju

    Uzraugiet savas Socket.IO lietotnes veiktspēju, lai identificētu potenciālās problēmas un optimizētu veiktspēju. Sekojiet līdzi metrikām, piemēram, savienojumu skaitam, ziņojumu latentumam un CPU lietojumam. Izmantojiet uzraudzības rīkus, piemēram, Prometheus, Grafana vai New Relic.

    6. Sanitizējiet lietotāja ievadi

    Vienmēr sanitizējiet lietotāja ievadi, lai novērstu starpvietņu skriptēšanas (XSS) uzbrukumus un citas drošības ievainojamības. Kodējiet lietotāja sniegtos datus pirms to attēlošanas pārlūkprogrammā. Izmantojiet ievades validāciju, lai nodrošinātu, ka dati atbilst gaidītajiem formātiem.

    7. Pieprasījumu ierobežošana (Rate Limiting)

    Ieviesiet pieprasījumu ierobežošanu, lai aizsargātu savu lietotni no ļaunprātīgas izmantošanas. Ierobežojiet pieprasījumu skaitu, ko lietotājs var veikt noteiktā laika periodā. Tas novērš pakalpojuma atteikuma (DoS) uzbrukumus un aizsargā jūsu servera resursus.

    8. Kompresija

    Iespējojiet kompresiju, lai samazinātu starp klientiem un serveri pārsūtīto datu apjomu. Tas var ievērojami uzlabot veiktspēju, īpaši lietotnēm, kas pārsūta lielu datu apjomu. Socket.IO atbalsta kompresiju, izmantojot `compression` starpprogrammatūru.

    9. Izvēlieties pareizo transportu

    Socket.IO pēc noklusējuma izmanto WebSockets, bet, ja WebSockets nav pieejami, tas pārslēgsies uz citām metodēm (piemēram, HTTP long polling). Lai gan Socket.IO to apstrādā automātiski, izprotiet sekas. WebSockets parasti ir visefektīvākie. Vidēs, kur WebSockets bieži tiek bloķēti (daži korporatīvie tīkli, ierobežojoši ugunsmūri), jums var nākties apsvērt alternatīvas konfigurācijas vai arhitektūras.

    10. Globāli apsvērumi: Lokalizācija un laika joslas

    Veidojot lietotnes globālai auditorijai, pievērsiet uzmanību lokalizācijai. Formatējiet skaitļus, datumus un valūtas atbilstoši lietotāja lokalizācijai. Pareizi apstrādājiet laika joslas, lai nodrošinātu, ka notikumi tiek parādīti lietotāja vietējā laikā. Izmantojiet internacionalizācijas (i18n) bibliotēkas, lai vienkāršotu lietotnes lokalizācijas procesu.

    Piemērs: Laika joslu apstrāde

    Pieņemsim, ka jūsu serveris saglabā notikumu laikus UTC. Jūs varat izmantot bibliotēku, piemēram, `moment-timezone`, lai parādītu notikuma laiku lietotāja vietējā laika joslā.

    // Servera puse (sūta notikuma laiku UTC)
    const moment = require('moment');
    
    io.on('connection', (socket) => {
     socket.on('request event', () => {
     const eventTimeUTC = moment.utc(); // Pašreizējais laiks UTC
     socket.emit('event details', {
     timeUTC: eventTimeUTC.toISOString(),
     description: 'Globāla konferences saruna'
     });
     });
    });
    
    // Klienta puse (attēlošana lietotāja vietējā laikā)
    const moment = require('moment-timezone');
    
    socket.on('event details', (data) => {
     const eventTimeLocal = moment.utc(data.timeUTC).tz(moment.tz.guess()); // Pārvērst uz lietotāja laika joslu
     document.getElementById('eventTime').textContent = eventTimeLocal.format('MMMM Do YYYY, h:mm:ss a z');
    });

    Piemērs: Valūtas formatēšana

    Lai pareizi parādītu valūtas vērtības, izmantojiet bibliotēku, piemēram, `Intl.NumberFormat`, lai formatētu valūtu atbilstoši lietotāja lokalizācijai.

    // Klienta puse
    const priceUSD = 1234.56;
    const userLocale = navigator.language || 'en-US'; // Noteikt lietotāja lokalizāciju
    
    const formatter = new Intl.NumberFormat(userLocale, {
     style: 'currency',
     currency: 'USD', // Izmantot USD kā sākumpunktu, pielāgot pēc nepieciešamības
    });
    
    const formattedPrice = formatter.format(priceUSD);
    
    document.getElementById('price').textContent = formattedPrice;
    
    //Lai parādītu cenas citā valūtā:
    const formatterEUR = new Intl.NumberFormat(userLocale, {
     style: 'currency',
     currency: 'EUR',
    });
    
    const priceEUR = 1100.00;
    const formattedPriceEUR = formatterEUR.format(priceEUR);
    
    document.getElementById('priceEUR').textContent = formattedPriceEUR;

    Noslēgums

    Socket.IO vienkāršo reāllaika datu straumēšanas ieviešanu tīmekļa lietotnēs. Izprotot Socket.IO pamatkoncepcijas, ieviešot labāko praksi un atbilstoši mērogojot savu lietotni, jūs varat izveidot robustas un mērogojamas reāllaika lietotnes, kas atbilst mūsdienu digitālās vides prasībām. Neatkarīgi no tā, vai veidojat tērzēšanas lietotni, reāllaika analītikas paneli vai sadarbības rediģēšanas rīku, Socket.IO nodrošina nepieciešamos rīkus un elastību, lai radītu saistošu un atsaucīgu lietotāja pieredzi globālai auditorijai.