HTML5 og Web Sockets

November 3  by Eliza

Web stikkontakter er en av de mest teknisk avanserte tilskuddene til HTML5, og de har også potensial til å ha råd til den mest dramatiske endringen i måten Internet arbeidet er gjort.

Lenge før nettet slik vi kjenner det, programmerere skulle bruke en idé kalt sockets å tillate eksterne datamaskiner til å kommunisere med en vedvarende forbindelse. Hvis du noen gang har brukt en Telnet, FTP eller SSH klient, har du brukt et program som bruker stikkontakter. Vanligvis bygger programmereren to typer sockets: En som bor på serveren (a - vent på det - server socket) og en som lever på klienten (du gjettet det - en klient socket.) Disse to programmene kommuniserer ved en forhåndsbestemt stilisert kommunikasjonsavtale, som kalles en kommunikasjonsprotokoll. Faktisk, Telnet, FTP, HTTP, og mange andre Internett-verktøy er egentlig flere protokoller enn programvare. En Telnet-programmet er faktisk en flerbruks socket klient, og det kan brukes til å teste mange forskjellige typer server stikkontakter. Webserveren i seg selv er en spesialisert server som i hovedsak snakker HTTP-protokollen, og nettleseren er en spesialisert klient som snakker HTTP.

Du kan bruke en socket verktøy som Telnet til å koble til en HTTP-server. For å teste dette, kjører du følgende kode fra kommandolinjen. (Det skal fungere likt på alle store plattformer: De har alle en grunnleggende Telnet program bygget i.)

telnet aharrisbooks.net 80

Du har koblet til serveren ved hjelp av port 80 (standard webserver port). Du vil se en reaksjon som ser ut som følgende. (Fet indikerer at dette kommer fra serveren.)

Prøver 66.40.52.176 ...
Koblet til www.aharrisbooks.net.
Nødutgangtegnet er ^] '.

Nå serveren synes du er en nettleser. For å få en bestemt side, må du sende den samme forespørsel leseren ville sende. For å få indeksen for Javascript og AJAX For Dummies av Andy Harris, bruker denne forespørselen:

GET /jad/index.html HTTP / 1.1
vert: www.aharrisbooks.net

Trykk på Enter-tasten to ganger etter siste linje for å sende inn forespørselen. Du vil se en lang streng med HTML-kode - all koden som gjør opp på siden. Selvfølgelig vil du bare se koden fordi dette ikke er en ekte nettleser. På slutten, vil du se denne linjen:

Tilkobling avsluttet av utenlandsk vert.

Dette skjer alltid fordi HTTP er en statsløs protokoll.

Web sockets gi en tilleggsprotokoll. Du kan fortsatt koble til websiden på vanlig måte, men når du implementerer en Web-kontakt, skriver du kode i din webside som kan koble til en server socket og kommunisere med den. Mens selve siden fortsatt bruker den statsløse HTTP-protokollen, forblir socket-tilkobling på plass så lenge siden er aktiv, noe som åpner for komplett toveis kommunikasjon uten å re-etablere en forbindelse.

Hvilken type tilkobling du får med denne mekanismen er ideell for applikasjoner som krever en god del av klient-server-kommunikasjon, som for eksempel chat programmer og flerspillerspill.

Selvfølgelig, for å bygge en web-socket-tilkobling, må du ha både en klient og en server. Vanligvis er serveren skrevet i et språk som PHP eller Python. Du trenger også kunnskap om både socket programmering og språket serveren er bygget med å bygge en server socket. Mange moderne språk støtter en generisk kontakten modus som kan benyttes for å skape en spesialisert nettkontakt.

Koden for et program som lar brukeren å legge inn informasjon som sendes til serveren og ekko tilbake er litt lang, men ikke veldig komplisert:

<! DOCTYPE HTML>
<Html lang = "no">
<Head>
<Title> WebSocket Test </ title>
<Meta charset = "UTF-8" />
<Style type = "text / css">
h1 {
text-align: center;
}
.error {
color: red;
}
.response {
color: blue;
}
fieldset {
width: 80%;
margin: auto;
text-align: center;
-moz-box-shadow: 10px 10px 10px # 000000;
-webkit-box-shadow: 10px 10px 10px # 000000;
}
#output {
font-family: monospace;
width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
background-color: #eeeeee;
padding: 1em;
border: 5px groove #cccccc;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: 10px 10px 10px # 000000;
-webkit-box-shadow: 10px 10px 10px # 000000;
}
</ Style>
<Script language = "javascript" type = "text / javascript">
Var utgang;
Var WebSocket;
funksjon init () {
output = document.getElementById ("output");
} // End init
funksjonen koble () {
// Åpen socket
if ("WebSocket" i vinduet) {
WebSocket = ny WebSocket ("ws: //echo.websocket.org/");
// Oppmerksom på denne serveren gjør ingenting, men ekko hva ble vedtatt
// Bruke en mer forseggjort server for mer interessant oppførsel

output.innerHTML = "kobler til ...";

// Feste hendelsesbehandlinger
websocket.onopen = VedÅpning;
websocket.onclose = onClose;
websocket.onmessage = onMessage;
websocket.onerror = onError;
} Else {
alert ("WebSockets støttes ikke i nettleseren din.");
} // End if
} // End koble
funksjon VedÅpning (evt) {
// Oppringt så snart en tilkobling er åpnet
output.innerHTML = "<p> koblet til server </ p>";
} // End VedÅpning
funksjon onClose (evt) {
// Kalles når tilkoblingen er kuttet
output.innerHTML + = "<p> DISCONNECTED </ p>";
} // End onClose;
funksjon onMessage (evt) {
// Kalt ved mottak av melding
output.innerHTML + = "<p class =" svar "> SVAR:"
+ Evt.data + "</ p>";
} // End onMessage
funksjon onError (evt) {
// Oppfordret feil
output.innerHTML + = "<p class =" feil "> FEIL:"
+ Evt.data + "</ p>";
} // End onError
funksjon Sendmessage () {
// Få melding fra tekstfeltet
txtMessage = document.getElementById ("txtMessage");
message = txtMessage.value;
// Pass melding til serveren
websocket.send (melding);
output.innerHTML + = "<p> Melding sendt:" + message + "</ p>";
} // End Sendmessage

</ Script>
</ Head>
<Body onload = "init ()">
<H1> Web Socket Echo Chamber </ h1>
<Form action = "">
<Fieldset>
<-knappen Type = "button"
onclick = "connect ()">
koble til serveren
</ Knapp>
<Label for = "txtMessage">
<Input type = "text"
id = "txtMessage"
value = "HTML5 hurtigreferanse for Dummies" />
</ Label>
<-knappen Type = "button"
onclick = "Sendmessage ()">
sende melding
</ Knapp>
<-knappen Type = "button"
onclick = "websocket.close ()">
frakobling
</ Knapp>
</ Fieldset>
</ Form>
<Div id = "output"> Klikk "connect" knappen for å koble </ div>
</ Body>
</ Html>