, begynder at anvende html5 websockets i dag,,,,, 39,,,,,,,,, 43,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, en af de bedste nye elementer i html5 er websockets, lad os tale med serveren uden anvendelse af ajax anmodninger.i denne forelæsning, vi gennemgår processen for at websocket server i folkesundhedsprogrammet og så bygge en klient til at sende og modtage meddelelser til det i websocket protokol.,,,,,, hvad der er websockets?,, websockets er en teknik til tovejskommunikation over (tcp) sokkel, en slags skubbe teknologi.i øjeblikket er det stadig er standardiseret med w3c, men de seneste udgaver af krom og safari er støtte til websockets.,,,, hvad websockets erstatte?,, websockets kan erstatte længe undersøgelser.det er et interessant koncept, kunden, sender en anmodning herom til server – nu snarere end serveren reagerer med data, er det ikke, det stort set holder forbindelsen åben, indtil den nye, ajourførte data er klar til at blive sendt - klient næste modtager dette, og sender en anden anmodning.det har sine fordele: nedsat reaktionstid er en af dem, som en forbindelse, der allerede er blevet åbnet, kræver ikke en ny forbindelse, fastlægges.men lang meningsmålinger er ikke et stykke af smarte teknologi. det er også muligt for en anmodning om time - out, og dermed vil der være behov for en ny forbindelse alligevel.,, mange ajax ansøgninger gør brug af ovennævnte – dette kan ofte tilskrives dårlig anvendelse af fællesskabets ressourcer.,, ville det ikke være fantastisk, hvis serveren kunne vågne op en morgen og sende oplysninger til kunder, der er villige til at lytte uden en eller anden form for på forhånd fastsatte forbindelse?velkommen til verden - teknologi.,,, trin 1: kom websocket server, denne forelæsning vil fokusere mere på kunden, bygning og ikke - gennemførelse.,, jeg bruger xampp på windows 7 til at løbe på den server lokalt.tag en kopi af phpwebsockets, som er en websocket server i folkesundhedsprogrammet.(bemærk: jeg havde nogle problemer med den version, jeg har lavet nogle ændringer til det og vil medtage det i kilde filer), der er forskellige websocket implementeringer, hvis man ikke virker, kan du prøve en anden eller bare fortsætte med den tutor.,,, jwebsocket (java -), web sokkel ruby (") stik den, knude (node. j 'er), start apache - serveren,,,, trin 2: ændring af ip - adresser og havne, ændre server i henhold til din fælde, for eksempel i fælde. klasse. php:,, offentlig funktion __construct ($vært ='localhost, $havn = 8000, - max = 100) ($- > createsocket ($vært, $havn)}, kigge i filerne og foretage ændringer, hvor det er relevant,.,,, trin 3: begynd at bygge den kunde, lad os få en grundlæggende model, det er min client.php file:,, <!doctype html > < html > < head > < manuskript src = "http: //ajax. googleapis. kom /ajax /libs /jquery /1.4.2 /jquery. min.js" > < /manuskript > < afsnit > websockets klient < /afsnit > < /head > < krop > < div id = "papir" > < div id = "containere" > < h1 > websockets klient < ///////h1 > < div id = "chatlog" > < /div > <!-&#chatlog - > < p id = "eksempler" > f.eks. prøv med "hej", "navn", "alder", "i dag" < /p > < input id = "tekst" type = "tekst" /> < og "id =" fjern "> afbryde < /knap > < /div > <!-- #container --> </div> </body> </html>, ,So in this code we're creating a simple template: we have a box for the chat log, an input box, and one disconnect button., , ,Step 4: Add Some CSS, ,Nothing fancy, just space some elements out., ,body { \tfont-family:Arial, Helvetica, sans-serif; } #container{ \tborder:5px solid grey; \twidth:800px; \tmargin:0 auto; \tpadding:10px; } #chatLog{ \tpadding:5px; \tborder:1px solid black; } #chatLog p { \tmargin:0; } .event { \tcolor:#999; } .warning{ \tfont-weight:bold; \tcolor:#CCC; }, , ,Step 5: WebSocket Events, ,First, let's try and understand the idea of WebSocket events., , ,The Events, ,We'll be using three events:, , ,onopen:, When a sockethar åbnet, onmessage:, når en meddelelse er modtaget, onclose: når en stikkontakt er blevet lukket, men hvordan kan vi gennemføre det her?,, skaber en websocket objekt, var sokkel = nye websocket (nb: //localhost: 8000 /port /server - /startdaemon. folkesundhedsprogrammet "), og kontrol af begivenheder, er ganske enkelt:,, socket.onopen = function() (varsling (" stik er åbnet! ");), men hvad med når vi modtager en besked?,, socket.onmessage = funktion (msg) (indberetning (msg); //fedt!}, dog, lad os undgå at bruge indberetning, kasser og integrere det, vi har lært i kundens side.,,, trin 6: javascript, okay, så lad os komme i gang.vi satte vores kode i jquery er nummer klar funktion, må vi undersøge, om brugeren har en websockets mulighed for browser.hvis de ikke gør det, vedlægges et link til krom i html. $(dokument). klar (function() (hvis (!("websocket" i vindue)) ($('# chatlog, input,&#eksempler). fadeout ("fast"); $(< p > nej, du har brug for en browser, der støtter websockets.hvad med < en href = "http: //www.google. kom /krom" > google krom < /a >?< /p > '). appendto ('&#beholder)} andre (//brugeren har websockets connect(); funktion connect() (//- funktion, koden er nedenfor)), som du kan se, hvis brugeren har websockets så ringer vi til en connect() funktion.det er kernen i den funktion: vi begynder med den åbne, tæt og modtage begivenheder.,, vi vil definere url af vores server, var fatningen var vært = "nb: //localhost: 8000 /port /server - /startdaemon. folkesundhedsprogrammet", vent, hvor er, adressen, i og med at url?åh ja, det er en websocket url, så det er ved hjælp af en anden protokol.her er en fordeling af de dele af vores url:,,, lad os fortsætte med vores connect() funktion.vi vil sætte vores adfærdskodeks i en prøve /catcher block, så hvis noget går galt, kan vi lade brugeren ved.vi skaber en ny websocket og videregive budskabet til en besked funktion, som jeg forklarer senere.vi skaber vores onopen, onmessage og onclose funktioner.bemærk, at vi også vise brugeren stikkontakten status; det er ikke nødvendigt, men det er også det, som det kan være nyttigt for fejlfinding.,,, der forbinder = 0, åbne = 1, lukket = 2,,, funktion connect() (prøve (var - port, var vært = "nb: ////////localhost: 8000 /port /server - /startdaemon. folkesundhedsprogrammet" var sokkel = nye websocket (vært) meddelelse (< p - klassen = "begivenhed" > sokkel status: + stikkontakt. readystate); socket.onopen = function() {besked (< p - klassen = "begivenhed". > sokkel status: + stikkontakt. readystate + (åben) ');} socket.onmessage = funktion (msg) (meddelelse (< p - klassen = "budskab" > modtaget: + mng. data)} socket.onclose = function() {besked (< pklasse = "begivenhed" > sokkel status: + stikkontakt. readystate + (lukket) ');}} fangst (undtagelse) {besked (< p > fejl + undtagelse);}},, message() funktion er relativt simpelt, det tager i en tekst, der vi ønsker at vise brugeren og vedlægges den til chatlog.vi skaber den relevante klasse for punkt mærker i stikkontakten, hvis funktioner, som er grunden til, at der kun er én afsluttende punkt mærke i meddelelsen funktion.,, funktionsmeddelelses (msg) ($('# chatlog). både (msg + < /p >');},,, så langt... og, hvis du har fulgt op på dette punkt, godt klaret!vi har formået at skabe en grundlæggende /html /css skabelon, skabe og etablere en websocket forbindelse og holde brugeren ajourføres som fremskridt i den forbindelse.,,,, trin 7: at sende data, nu i stedet for at få et stille knap, vi kan spore, hvor brugeren trykker afkast på deres tastatur og løb de sender funktion.The '13' you see below is the ASCII key for the enter button., ,$('#text').keypress(function(event) { if (event.keyCode == '13') { \t\tsend(); } });, ,And here's the send() function:, ,function send(){ var text = $('#text').val(); if(text==""){ message('<p class="warning">Please enter a message'); return; } try{ socket.send(text); message('<p class="event">Sent: '+text) } catch(exception){ \tmessage('<p class="warning"> Error:' + exception); } $('#text').val(""); }, ,Remember what you see above may be a chunky bit of code, but in reality, the code we really need is:, ,socket.send(); //Thanks JavaScript, ,The extra code is gør en række ting: at opdage, hvis brugeren ikke ind i noget, men slår stadig tilbage, at input kasse, og kalder det budskab, funktioner,.,,, trin 8: sidste led, sidste led er forholdsvis ligetil: lægger et klik kontakt til vores afbryde knap, - - og vi er færdige.,,, $('# frakobling«). klik (function() (sokkel. close().});,,, afsluttet javascript, $(dokument). klar (function() (hvis (!("websocket" i vindue)) ($('# chatlog, input,&#eksempler). fadeout ("fast"); $(< p > nej, du har brug for en browser, der støtter websockets.hvad med < en href = "http: //www.google. kom /krom" > google krom < /a >?< /p > '). appendto ('&#beholder)} andre (//brugeren har websockets connect(); funktion connect() (var - port, var vært = "nb: //localhost: 8000 /port /server - /startdaemon. folkesundhedsprogrammet" prøve (var - sokkel = nye websocket (vært) meddelelse (< p - klassen = "begivenhed" > sokkel status: + stikkontakt. readystate); socket.onopen = function() {besked (< p - klassen = "begivenhed" > sokkel status: + stikkontakt. readystate + (åben) ');} socket.onmessage = funktion (msg) (meddelelse (< p - klassen = "budskab" > modtaget: + mng. data)} socket.onclose = function() {message ("< p - klassen = "begivenhed" > sokkel status: + stikkontakt. readystate + (lukket) ');}} fangst (undtagelse) {besked (< p > fejl + undtagelse);} funktion send() {var tekst = $('&#tekst). val(), hvis tekst (= = ") (meddelelse (< p - klassen =" advarsel "> anfør venligst en besked"); tilbage;} prøve (sokkel. send (tekst); meddelelse (< p - klassen = "begivenhed" > sendte: + tekst) fangst (undtagelse) {besked (< p - klassen = "advarsel" > ');} $('&#tekst). val ("");} funktionsmeddelelses (msg) {%('# chatlog). både (msg + < /p >');} $('# tekst). keypress (funktion (ref.) (hvis (event.keycode = =' 13 ') (send();}}); $('&#frakobling«). klik (function() (sokkel. close().})} //ende forbindes} //ende andet}), trin 9: løb websocket server, får vi brug for kommando linjen adgang.heldigvis har en fiks xampp shell mulighed.klik på "skal" på xampp kontrolpanel og type i:,, php - q vej. til. server.php, du nu har indledt en websocket server.,,,, færdig, når side belastninger, en websocket forbindelse vil forsøge at blive etableret (prøve at redigere den kode, så brugeren har forbinde /afbryde option).så, brugeren kan komme ind i meddelelser og modtage meddelelser fra serveren.,,,,,,, det er det!, tak for at læse. jeg håber, du nød det tutor.kan du huske, så spændende, som websockets kan være, tingene kan ændre sig.man kan her henvise til at holde trit med w3c websocket api - grænseflade.
