Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Sockets - HTML5

1,679 views

Published on

With the HTML5 age a lot of new features came to help developers to create amazing apps and amazing user experience, one of these features is called web socket which provides new powers under the HTTP protocol.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Web Sockets - HTML5

  1. 1. Why should we use a socket ? HTTP ? The client side The server side Trying to join the parts together Agenda
  2. 2. FRONT-END x BACK-END
  3. 3. var mySocket= new WebSocket(‘ws://www.test.com’, [‘myProtocol’]); mySocket.onopen = function() {}; mysocket.onclose = function() {}; mySocket.onmessage = functino() {}; mySocket.onerror = function() {}; mySocket.send() {};
  4. 4. GET /hello-web-socket HTTP/1.1 Host: marabesi.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: myProtocol Sec-WebSocket-Version: 13 Origin: http://google.com
  5. 5. HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: myProtocol
  6. 6. Talk is cheap, show me the code.
  7. 7. if(preg_match("/Sec-WebSocket-Key: (.*)rn/",$hds,$matchs)){ $key = $matchs[1] . '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'; $key = base64_encode(sha1($key, true)); $headers = "HTTP/1.1 101 Switching Protocolsrn". "Upgrade: websocketrn". "Connection: Upgradern". "Sec-WebSocket-Accept: $key". "rnrn"; socket_write($msgsock, $headers); }
  8. 8. Matheus Marabesi github.com/marabesi twitter.com/MatheusMarabesi

×