Alex carcea, radu macovei a story of how java script joined the big league
0 likes332 views
This document introduces WebSockets and how they enabled real-time communication on the web. It discusses the limitations of HTTP for real-time applications and how earlier technologies like polling tried to solve this problem. WebSockets provide a standardized solution through a full-duplex protocol that avoids header overhead and allows for persistent connections. The document demonstrates how to use the WebSocket API in JavaScript and introduces common WebSocket client libraries.
![WEBSOCKET API
if ("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
}](https://image.slidesharecdn.com/alexcarcearadumacovei-astoryofhowjavascriptjoinedthebigleague-141120132038-conversion-gate02/85/Alex-carcea-radu-macovei-a-story-of-how-java-script-joined-the-big-league-28-320.jpg)
Alex carcea, radu macovei a story of how java script joined the big league
- 2. WELCOME!
- 4. A STORY OF HOW JAVASCRIPT JOINED THE BIG LEAGUE: WEBSOCKETS AND OTHER GOODIES Created by Alexandru Carcea & Radu Macovei
- 6. A FEW WORDS ABOUT JAVASCRIPT
- 9. OBJECTS AND CLASSES IN JAVASCRIPT
- 10. DOM MANIPULATION IN JAVASCRIPT
- 12. REAL TIME WEB WHEN USERS ALMOST FORGOT ABOUT REFRESHING WEB PAGES
- 13. HTTP THE PROTOCOL THAT ENABLES THE WEB AND ITS SHORTCOMINGS
- 15. ALMOST REAL TIME HACKS TO SIMULATE REAL TIME WEB
- 16. XMLHTTPREQUEST AND AJAX RETRIEVING DATA WITHOUT FULL PAGE REFRESH
- 17. POLLING AND LONG POLLING TRYING TO ACHIEVE REAL TIME
- 18. WEBSOCKETS THE PROTOCOL THAT PROVIDES REAL TIME, FULL-DUPLEX COMMUNICATION
- 20. WS VS HTTP GETTING RID OF HEADERS THAT ARE NOT NEEDED
- 21. TMI! TMFI! GET / HTTP/1.1 Host: www.example.com Connection: keep‐alive Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 User‐Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2194.2 Safari/Accept‐Encoding: gzip, deflate, sdch Accept‐Language: ro‐RO,ro;q=0.8,en‐US;q=0.6,en;q=0.4 X‐Custom‐Headers: Whoa, overhead!
- 22. ... AND THIS HAPPENS EVERY SINGLE TIME! HTTP/1.1 200 OK Accept‐Ranges: bytes Cache‐Control: max‐age=604800 Content‐Type: text/html Date: Thu, 15 Jan 1970 00:00:00 GMT Etag: "359670651" Expires: Sat, 31 Jan 1970 00:00:00 GMT Last‐Modified: Thu, 01 Jan 1970 00:00:00 GMT Server: Apache Content‐Length: 51 Hello World! My payload includes a trailing CRLF.
- 23. LET'S TRY WITH WEBSOCKETS GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec‐WebSocket‐Key: x3JJHMbDL1EzLkh9GBhXDw== Sec‐WebSocket‐Protocol: chat, superchat Sec‐WebSocket‐Version: 13 Origin: http://example.com
- 24. THAT'S BETTER... HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec‐WebSocket‐Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec‐WebSocket‐Protocol: chat
- 25. JAVASCRIPT WEBSOCKETS CLIENT API WRITE WEBSOCKET CLIENT APPLICATIONS USING WEBSOCKET CLASS
- 26. WEBSOCKET API EVENTS 1. open 2. message 3. close 4. error
- 27. WEBSOCKET API METHODS 1. send(data) 2. close()
- 28. WEBSOCKET API if ("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 }
- 29. WEBSOCKETS CLIENT LIBRARIES ws engine.io socket.io primus
- 30. USES FOR WEBSOCKETS Social feeds Multiplayer games Collaborative tools Financial apps Sports apps ... and many more ...
- 31. A SMALL WEBSOCKETS DEMO
- 32. USING NODE.JS AND SOCKET.IO
- 34. Q&A
- 35. THANK YOU!