html websockets

Problem with http

  • Half-duplex communication
  • Client driven
  • New TCP connection for every request
  • Too much overhead data sent with every request

sample http request

GET /en-US/docs/Web/API/WebSocket HTTP/1.1
Host: developer.mozilla.org
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
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/41.0.2272.89 Safari/537.36
DNT: 1
Referer: https://developer.mozilla.org/en-US/docs/WebSockets/WebSockets_reference
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6
Cookie: optimizelyEndUserId=oeu1414035707459r0.8018952487036586; __utma=150903082.553603326.1414035708.1414467317.1415679468.2; __utmz=150903082.1415679468.2.2.utmcsr=codingforums.com|utmccn=(referral)|utmcmd=referral|utmcct=/dom-json-scripting/61921-tabindex-firefox.html; _gat=1; optimizelySegments=%7B%22237061344%22%3A%22none%22%2C%22237321400%22%3A%22gc%22%2C%22237335298%22%3A%22search%22%2C%22237485170%22%3A%22false%22%2C%22245617832%22%3A%22none%22%2C%22245677587%22%3A%22gc%22%2C%22245875585%22%3A%22search%22%2C%22246048108%22%3A%22false%22%2C%22704844240%22%3A%22true%22%2C%22743670347%22%3A%22true%22%2C%22869421433%22%3A%22true%22%2C%221623833307%22%3A%22true%22%2C%221894310134%22%3A%22true%22%2C%222083660019%22%3A%22true%22%7D; optimizelyBuckets=%7B%7D; _ga=GA1.2.553603326.1414035708

sample http response (header)

HTTP/1.1 200 OK
Server: Apache
Vary: Cookie, Accept-Encoding
X-Backend-Server: developer3.webapp.scl3.mozilla.com
Content-Type: text/html; charset=utf-8
Access-Control-Allow-Credentials: false
Content-Encoding: gzip
Date: Tue, 17 Mar 2015 23:09:10 GMT
Keep-Alive: timeout=5, max=995
X-kuma-revision: 752533
Transfer-Encoding: chunked
Access-Control-Allow-Origin: *
ETag: "6ca26ecfcf64c3499ee56a5c00dc23570ad5f5a1"
Connection: Keep-Alive
X-Frame-Options: DENY
Last-Modified: Mon, 23 Feb 2015 13:10:35 GMT
Access-Control-Allow-Methods: GET
X-Cache-Info: not cacheable; response had too large vary data

HTML Websockets to the rescue

  • Full-duplex communication
  • After handshake, both client and server and peers
  • Single TCP connection
  • No verbose headers sent during communication

Sample handshake request

GET ws://echo.websocket.org/?encoding=text HTTP/1.1 
Origin: http://websocket.org 
Cookie: __utma=99as 
Connection: Upgrade 
Host: echo.websocket.org 
Sec-WebSocket-Key: uRovscZjNol/umbTt5uKmw== 
Upgrade: websocket 
Sec-WebSocket-Version: 13

Sample handshake response

HTTP/1.1 101 WebSocket Protocol Handshake 
Date: Fri, 10 Feb 2012 17:38:18 GMT 
Connection: Upgrade 
Server: Kaazing Gateway 
Upgrade: WebSocket 
Access-Control-Allow-Origin: http://websocket.org Access-Control-Allow-Credentials: true 
Sec-WebSocket-Accept: rLHCkw/SKsO9GAH/ZSFhBATDKrU= 
Access-Control-Allow-Headers: content-type

How websocket works

Cool :)

can i use it now?

On the client side (browser)

demo

https://kiosklogin.herokuapp.com/experience

joesmith@example.com/password

Made with Slides.com