WELCOME!

A STORY OF HOW JAVASCRIPT JOINED THE BIG LEAGUE:

WEBSOCKETSAND OTHER GOODIES

Created by Alexandru Carcea & Radu Macovei

A FEW WORDS ABOUT

JAVASCRIPT

HISTORYOF JAVASCRIPT

OBJECTS AND CLASSESIN JAVASCRIPT

DOM MANIPULATIONIN JAVASCRIPT

EVENTSIN JAVASCRIPT

REAL TIME WEBWHEN USERS ALMOST FORGOT ABOUT

REFRESHING WEB PAGES

HTTPTHE PROTOCOL THAT ENABLES THE WEB

AND ITS SHORTCOMINGS

ALMOST REAL TIMEHACKS TO SIMULATE REAL TIME WEB

XMLHTTPREQUESTAND AJAX

RETRIEVING DATA WITHOUT FULL PAGE REFRESH

POLLING AND

LONG POLLINGTRYING TO ACHIEVE REAL TIME

WEBSOCKETSTHE PROTOCOL THAT PROVIDES REAL TIME, FULL-DUPLEX

COMMUNICATION

WS VS HTTPGETTING RID OF HEADERS THAT ARE NOT NEEDED

TMI! TMFI!GET / HTTP/1.1Host: www.example.comConnection: keep‐aliveAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8User‐Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2194.2 Safari/537.36Accept‐Encoding: gzip, deflate, sdchAccept‐Language: ro‐RO,ro;q=0.8,en‐US;q=0.6,en;q=0.4X‐Custom‐Headers: Whoa, overhead!

... AND THIS HAPPENSEVERY SINGLE TIME!

HTTP/1.1 200 OKAccept‐Ranges: bytesCache‐Control: max‐age=604800Content‐Type: text/htmlDate: Thu, 15 Jan 1970 00:00:00 GMTEtag: "359670651"Expires: Sat, 31 Jan 1970 00:00:00 GMTLast‐Modified: Thu, 01 Jan 1970 00:00:00 GMTServer: ApacheContent‐Length: 51

Hello World! My payload includes a trailing CRLF.

LET'S TRY WITHWEBSOCKETS

GET /chat HTTP/1.1Host: server.example.comUpgrade: websocketConnection: UpgradeSec‐WebSocket‐Key: x3JJHMbDL1EzLkh9GBhXDw==Sec‐WebSocket‐Protocol: chat, superchatSec‐WebSocket‐Version: 13Origin: http://example.com

THAT'S BETTER...HTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: UpgradeSec‐WebSocket‐Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=Sec‐WebSocket‐Protocol: chat

JAVASCRIPTWEBSOCKETS

CLIENT APIWRITE WEBSOCKET CLIENT APPLICATIONS USING

WEBSOCKET CLASS

WEBSOCKET APIEVENTS

1. open2. message3. close4. error

WEBSOCKET APIMETHODS1. send(data)2. close()

WEBSOCKET APIif ("WebSocket" in window) {  // WebSocket is supported  var ws = new WebSocket("[ws|wss]://[host]:[port]/[uri]", [protocol(s)]);  ws.onopen = function (event) { ... };  ws.onmessage = function (event) { ... };  ws.onclose = function (event) { ... };  ws.onerror = function (event) { ... };    ws.send(data);  // ws.close(); when finished} else {  // WebSocket NOT supported}

WEBSOCKETS CLIENT

LIBRARIESwsengine.iosocket.ioprimus

USES FOR WEBSOCKETSSocial feedsMultiplayer gamesCollaborative toolsFinancial appsSports apps... and many more ...

A SMALL WEBSOCKETS

DEMO

USING NODE.JS AND SOCKET.IO

Q&A

THANK YOU!