Ehitage reaalajas rakendus Socket.IO abil

Socket.IO on ilmselt reaalajas veebiraamistikest kõige tuntum. Koos Node.js-iga on see vastutav märkimisväärse teadlikkuse tõstmise eest „sündmusega veebi”, reaalajas andmete ja reaalajas interaktiivsete kasutajakogemuste eelistest.

Selles õpetuses vaatan, mis on uues Socket.IO 1.0-s ja näitan, kuidas seda saab kasutada rakenduse loomiseks reaalajas analüüsi jaoks.

Asjade lihtsuse huvides hõivame Modernizri (modernr.com) abil lehe URL-i ja paar brauserivõimalust. See teave saadetakse serverisse Socket.IO ühenduse kaudu.



Server teeb nende andmete kohta mõned põhianalüüsid, salvestab need ja avaldab andmed armatuurlaual. Juhtpaneel saab teabe kätte ja kuvab selle Epochi graafikute kogu abil (fastly.github.io/epoch).

Alustamine

Selle rakenduse jaoks vajate kõige vähem installitud Node.js v0.10.25 . Peate ka laadige alla „alustamise” zip . Pakkige see arhiiv lahti ja näete kataloogi node_modules koos kõigi selle juhendaja jaoks vajalike Node.js moodulitega.

Paneme kogu oma kliendipoolse koodi avalikku kataloogi - seal on kataloog bower_components, mis sisaldab kõiki JavaScripti teeke, millest meie rakendus sõltub. Samuti on armatuurlaua kataloog, kuhu me ehitame armatuurlaua esiosa.

Laseme seadistada Socket.IO ja luua testlehe, mis loob ühenduse töötava serveriga. Kõigepealt looge fail index.js oma töökataloogi juurest. Kuna me tahame armatuurlauda teenindada, alustame kõigepealt veebiserveri loomisest Ekspress , üks populaarsemaid Node.js veebiserveri pakette.

var express = require( ‘express’ ); var app = express(); app.use( express.static( __dirname + ‘/public’) ); var server = require( ‘http’ ).Server( app ); server.listen( 3000, function(){ console.log( ‘listening on *:3000’ ); } );

Deklaratsioonis index.js kasutame funktsiooni Express 'express.static, et deklareerida, et kõiki avalikus kaustas olevaid faile saab otse serveerida. Loome avalikus kataloogis capture.html.

Käivitage käsuviibalt oma töökataloogis sõlm index.js ja navigeerige brauseris saidile http: // localhost: 3000 / capture.html. Veenduge, et näete seda faili kättetoimetatuna. Nüüd saame lisada Socket.IO saidile index.js.

var server = require( ‘http’ ).Server( app ); var io = require( ‘socket.io’ )( server ); io.on( ‘connection’, function( socket ) { console.log( ‘We have a connection!’ ); } );

Viide töötavale serverile saadakse nõude ('http') kaudu. Server (rakendus) ja Socket.IO saavad seejärel selle serveriga manustada var io = need ('socket.io') (server) abil. Seondume ka ühenduse sündmusega, kasutades io.on ('ühendus, funktsioon () {}) ja logime ühenduse, kui sündmus käivitatakse. See sündmus tähendab, et klienti on tuvastatud.

Lõpuks peame lisamiseks lisama JavaScripti. HTML Socket.IO-ga ühenduse loomiseks.

var socket = io( 'localhost:3000' ); socket.on( 'connect', function() { console.log( 'connected' ); } );

Selle saavutamiseks oleme lisanud Socket.IO kliendikogu, loonud io ('localhost: 3000') abil uue sokliühenduse ja ühendatud ühenduse sündmusega, nii et teame, millal serveriühendus on loodud.

kuidas illustraatoris ruudustikku teha

Ühendage logiteate kontrollimiseks uuesti püüdmine.html ja avage JavaScripti konsool. Vaadake viiba, mida kasutasite sõlme index.js käivitamiseks, ja näete, et meil on ühendus!

Andmete hõivamine

Kui põhitõed on paigas, saame nüüd hakata kliendilt andmeid koguma. Selle funktsiooni väljatöötamiseks ja testimiseks kasutame lehte capt.html.

Teave, mida me jäädvustame ja lõpuks kuvame, on järgmine: ühendus on loodud, millist lehe URL-i kasutaja vaatab ja paar kasutaja brauseri võimalust, näiteks Touch ja HTML5 Video.

var socket = io( 'localhost:3000/capture' ); socket.on( 'connect', function() { var data = { url: window.location.href, touch: Modernizr.touch, video: Modernizr.video }; socket.emit( 'client-data', data ); } );

URL, millega me ühendust loome, on localhost: 3000 / capture, kus / capture on näide Socket.IO nimeruumist (netm.ag/nimed-258). Nimeruumid on andmete jagamiseks käepärased - siin tuvastavad nad andmete hõivamiseks sidekanali.

Ühenda sündmuse tagasihelistamises loome andmeobjekti, millele salvestame kogu rakenduse soovitud teabe; lehe URL on salvestatud aadressile data.url ja Modernizrit kasutatakse andmete.touch ja data.video väärtuste hõivamisel. Lõpuks saadetakse teave serverile socket.emit ('klient-andmed', andmed) abil.

Saadame nüüd kõik andmed, mida tahame hõivata, serverisse. Värskendame serveri koodi failis index.js, et tõestada, et ta saab neid andmeid:

var io = require( 'socket.io' )( server ); var capture = io.of( '/capture' ); capture.on( 'connection', function( socket ) { socket.on( 'client-data', function( data ) { console.log( data ); } ); } );

Märkate, et ka serverikoodi on värskendatud, et see nüüd viidaks nimeruumi / capture. On oluline, et kasutaksime nimeruumi või arvestame selle loomisel ka ühendused meie armatuurlauale.

Seondume kliendiandmete sündmusega, mis peegeldab sündmust, mille me kliendile emiteerime. Kui taaskäivitate sõlmprotsessi ja värskendate capture.html, näete, et hõivatud teave logitakse käsureale.

Statistiliste andmete salvestamine

Serveris tahame jälgida ühendusi ja seotud andmeid, et saaksime statistikat arvutada.

var socketData = {}; var stats = { connections: 0, touch: 0, video: 0, pages: {} }; var capture = io.of( '/capture' ); capture.on( 'connection', function( socket ) { ++stats.connections; socket.on( 'client-data', function( data ) ); } );

Esiteks suureneb ühenduse arv, kui kasutaja loob ühenduse / hõivab nimeruumiga. Muutujat socketData kasutatakse sokli kaardistamiseks seotud statistiliste andmetega unikaalse socket.id abil.

Salvestamine toimub kliendi-andmete sündmuse tagasihelistamisel. puudutus- ja videoväärtusi suurendatakse, kui klient neid toetab. Igal lehel olevate ühenduste arv salvestatakse atribuudis stats.pages URL-i järgi.

Samuti peame statistikat värskendama, kuna ühendused kaovad. Ühenduse tagasihelistamise kaudu ühendage sokliobjekti ühenduse katkestamise sündmus:

stats.pages[ data.url ] = ++pageCount; } ); socket.on( 'disconnect', function() { --stats.connections; stats.touch -= ( socketData[ socket.id ].touch? 1 : 0 ); stats.video -= ( socketData[ socket.id ].video? 1 : 0 ); --stats.pages[ socketData[ socket.id ].url ]; delete socketData[ socket.id ]; } );

Samamoodi, nagu suurendasime ühenduse tagasihelistamise väärtusi, vähendasime tagasihelistamise väärtusi.

Andmete avaldamine

Nüüd, kui kõik andmed on salvestatud, soovime need avaldada, et armatuurlaud saaks statistikat tarbida ja kuvada. Kuna kõik andmed on juba stats-objektis salvestatud, peame need lihtsalt avaldama. Selleks kasutame / armatuurlaua nimeruumi.

var stats = { connections: 0, touch: 0, video: 0, pages: {} }; var dashboard = io.of( '/dashboard' ); dashboard.on( 'connection', function( socket ) { socket.emit( 'stats-updated', stats ); } );

Viidatakse / armatuurlaua nimeruumile ja uue ühenduse tuvastamisel väljastatakse praegune statistika ainult äsja ühendatud pistikupessa.

Samuti peame käivitama sündmuse kõigile juhtpaneeli klientidele, kui statistika värskendatakse - näiteks pärast kliendi-andmete sündmuse vastuvõtmist ja töötlemist või kui / püüdmise ühendus käivitab ühenduse katkestamise sündmuse. Selleks eraldage armatuurlaua nimeruumis lihtsalt vastava tagasihelistamise lõpus statistika värskendatud sündmus:

dashboard.emit( 'stats-updated', stats );

Reaalajas analüütika juhtpaneel

Ainus, mis nüüd alles on, on armatuurlaua ehitamine. Kui avate public / dashboard / index.html, näete, et see sisaldab Epochi graafikute kogu, selle stiililehte ja sõltuvusi.

Sellest failist leiate ka mitmed elemendi kohahoidjad, millel on meie reaalajas analüütiliste diagrammide jaoks selgelt nimetatud id-atribuudid: külastajate ala diagramm ühenduste arvu jaoks, lehtede ribadiagramm populaarsete lehtede jaoks, puutetundlikud ja videomõõturid vastavalt puutetugi ja videoelemendi tugi .

Failile js / dashboard.js on viidatud ka saidilt index.html. Avage see ja vormindage Epochi graafikud.

var visitors = $('#visitors').epoch( { type: 'time.area', axes: ['left', 'bottom', 'right'], data: [ { values: [ { time: Date.now()/1000, y: 0 } ] } ], } ); var pages = $( '#pages' ).epoch( { type: 'bar' } ); var touch = $( '#touch' ).epoch( { type: 'time.gauge' } ); var video = $( '#video' ).epoch( { type: 'time.gauge' } );

Server avaldab statistikat juba niipea, kui see on tal olemas, nii et nende andmete saamiseks peame tellima / armatuurlaua nimeruumi ja seonduma statistika värskendatud sündmusega.

Lõpetamine

Lõpuks peame värskendusest eraldama soovitud andmed ja ütlema, et meie graafikud värskendaksid.

kuidas india tindiga joonistada
var video = $( '#video' ).epoch( { type: 'time.gauge' } ); var dashboard = io( 'localhost:3000/dashboard' ); dashboard.on( 'stats-updated', function( update ) { visitors.push( [ { time: Date.now()/1000, y: update.connections } ] ); var pagesData = []; for( var url in update.pages ) { pagesData.push( { x: url, y: update.pages[ url ] } ); } pages.update( [ { values: pagesData } ] ); touch.update( update.touch / update.connections || 0 ); video.update( update.video / update.connections || 0 ); } );

Külastajate diagrammi värskendamiseks viidatakse update.connections'ile ja värskendatakse külastajate graafikut. Me läheme üle update.pages ja vormindame andmed, kus x on lehe URL ja y on selle lehe ühenduste arv. Puute- ja videomõõtureid värskendatakse väärtusega 0 kuni 1, tuginedes statistika ja ühenduste suhtele.

Kui kõik on paigas, saate nüüd sõlmprotsessi taaskäivitada ja armatuurlaua nägemiseks laadida lehe http: // localhost: 3000 / dashboard / index.html. Andmete püüdmise alustamiseks ja juhtpaneelil koheselt kuvatud jäädvustatud andmete vaatamiseks avage ühel või mitmel vahelehel http: // localhost: 3000 / capture.html.

Järeldus

Oleme ainult selle rakenduse ning Socket.IO 1.0 uute tööriistade ja funktsioonidega saavutatavat pinda kriimustanud. Kuid loodetavasti on see õpetus teile proovinud, kui võimas ja lihtne võib olla reaalajas tehnoloogiate kasutamine oma veebirakendustes.

Sõnad: Phil Leggetter

Phil Leggetter on reaalajas veebitehnoloogiate, JavaScripti, HTML5 ekspert. Jälgi teda Twitteris aadressil @leggetter .

Nagu nii? Loe seda!