1 / 7

Real Time Web

Real Time Web. Part 2. Web Sockets. New HTML 5 protocol full-duplex bi-directional TCP connection client – server interaction. Web Socket Protocol. Designed to work with existing Web infrastructure ws : or wss : ws ://html5Rocks.websocket.org/echo Client makes GET request

luther
Download Presentation

Real Time Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Real Time Web Part 2

  2. Web Sockets • New HTML 5 protocol • full-duplex • bi-directional • TCP connection • client – server interaction

  3. Web Socket Protocol • Designed to work with existing Web infrastructure ws: or wss: • ws://html5Rocks.websocket.org/echo • Client makes GET request • Server responds with Upgrade header • Client – Server connected over underlying TCP/IP connection

  4. Client Side • JavaScript • URL to server • Optional subprotocols • Event handlers similar to Server-Sent Events varconnection = newWebSocket(‘ws://html5rocks.websocket.org/echo’, [‘soap’, ‘xmpp’]); connection.onopen = function () { connection.send(‘Ping’); // Send the message Ping to the server } connection.onerror = function (error) { console.log(‘WebSocket Error ‘ + error); } connection.onmessage = function (e) { console.log(‘Server: ‘ + e.data); }

  5. Communicating with Server • Send data to Server with ‘send’ function // Sending a String connection.send(‘an interesting message’); // Sending canvas ImageData as ArrayBuffer varimg = canvas_content.getImageData(0, 0, 400, 300); varbinary = new Uint8Array(img.data.length); for (vari = 0; i < img.data.length; i++) { binary[i] = img.data[i]; } connection.send(binary.buffer); // Sending file as Blob varfile = document.querySelector(‘input[type=“file”]’).files[0]; connection.send(file);

  6. Web Socket Information • Supported Protocols • Supported Extensions varconnection = newWebSocket(‘ws://html5rocks.websocket.org/echo’, [‘soap’, ‘xmpp’]); // print protocols to console console.log(connection.protocol); varconnection = newWebSocket(‘ws://html5rocks.websocket.org/echo’, [‘soap’, ‘xmpp’]); // print extensions to console console.log(connection.extensions);

  7. Remember • Web Sockets are like regular Sockets • Both sides must agree on what is sent • They must handle the data on the socket • They are very powerful

More Related