SlideShare a Scribd company logo
The HTML5 WebSocket API
Stockholm Web Monkeys
$ whoami
 David Lindkvist
   kontain.com/david-lindkvist
   twitter.com/ffdead


 Application Developer @F_i
   Web development is my passion!


 Drummer
   myspace.com/vildhjarta
   myspace.com/terminalfunction



                                    2
Agenda
 Why do we need WebSockets?

 What is it?

 How does it work?

 When can we use it?




                              3
Why?
       4

Recommended for you

Asynchronous Web Programming with HTML5 WebSockets and Java
Asynchronous Web Programming with HTML5 WebSockets and JavaAsynchronous Web Programming with HTML5 WebSockets and Java
Asynchronous Web Programming with HTML5 WebSockets and Java

(Talk originally given @ KCDC - http://kcdc.info ). Over the last decade, advances in web computing have removed many of the barriers to entry for developers. New languages, frameworks, and development methodologies have kickstarted new ideas and new ways to develop web applications to make modern life easier and more efficient. WebSockets (introduced as part of HTML5) is one such technology that enables a new class of scalable, super-responsive, collaborative, and real-time web applications with a wide range of uses. In this talk, we will first cover the basics of asynchronous web programming using WebSockets, including predecessors such as polling and long-polling, applications of WebSockets, its limitations and potential bottlenecks, and potential future improvements. Next, we will demo and dissect a real-world use case for realtime social data analytics, using the Apache Tomcat implementation of WebSockets and the Java-based Liferay Portal Server. This will include a discussion about development of WebSocket endpoints, its lifecycle within the application container and browser, debugging WebSockets, and scalability topics.

node.jsnodeliferay
WebSockets with Spring 4
WebSockets with Spring 4WebSockets with Spring 4
WebSockets with Spring 4

This document discusses WebSockets and Spring WebSockets. It begins by introducing WebSockets as a protocol for real-time full duplex communication over a single TCP connection. It then covers the WebSocket handshake process and JavaScript WebSocket API. Next, it discusses Java WebSocket implementations and how Spring 4 supports WebSockets and the fallback SockJS protocol. Finally, it introduces STOMP as a simple messaging protocol that can be used over WebSockets, and how Spring supports asynchronous messaging using STOMP over WebSockets.

springsockjsstomp
J web socket
J web socketJ web socket
J web socket

The document discusses WebSockets as a new technology for real-time communication on the web. It presents jWebSocket, an open source framework that supports WebSockets and allows for bidirectional communication between web applications and servers. The framework offers features like messaging, streaming, security and supports multiple platforms and browsers. WebSockets enable use cases like chats, remote monitoring and collaboration that were previously difficult to implement on the web.

Why?
 Today’s web apps demand reliable event-driven
 communications
   “Real-time” (minimal latency)
   Full duplex


 Examples:
   Social networking
   Online games
   Collaborative platforms
   Financial applications
   etc...


                                                 5
Why? Problems with HTTP...
 It’s hard to achieve real-time apps, primarily due to the
 limitations of HTTP

 HTTP is half-duplex (traffic flows in only one direction
 at a time)

 HTTP adds latency and message overhead




                                                        6
Why? Simulate real-time?
 Polling (AJAX)
    Poll server for updates, wait at client


 Long polling (Comet)
    Poll server for updates, wait at the server; uses two
    connections and requires unnecessary complexity


 Used in Ajax applications to simulate real-time
    Leads to poor resource utilization...




                                                            7
Why? Polling
                              #$%%&'()*+,-&./,.0+/




                                                       !""#$%&"'()'"'$*+&,!&')-

                                   (picture from Kaazing)
   !"#$"%$!$
   1)233")4 5667&'()8$+9$+6.&$'
   !"#$"%$!$                                   !"
                                                !"


                                                                                  8

Recommended for you

Websockets at tossug
Websockets at tossugWebsockets at tossug
Websockets at tossug

WebSockets allow for bidirectional communication between a client and server over a single TCP connection. They improve on older "Comet" techniques which used polling and long-polling to simulate real-time updates. With WebSockets, the client can open a WebSocket connection to the server which sends messages at any time without needing an explicit request. This enables real-time applications with constantly updating information. The document outlines the WebSocket protocol, provides examples of the API in browsers, and discusses frameworks for building WebSocket applications.

html5 websockets tossug
Web sockets in Java
Web sockets in JavaWeb sockets in Java
Web sockets in Java

The document discusses WebSocket in Java, including: 1. WebSocket is a protocol providing full-duplex communications over a single TCP connection and was standardized by IETF as RFC 6455. 2. Sample WebSocket applications are demonstrated using the JavaWebSocket library, Java EE 7 with Tomcat, and Spring 4 with SockJS for fallback support to older browsers. 3. Code snippets show how to set up WebSocket servers and handlers in each approach to handle connections, messages, and disconnections from clients.

javaspringjavaee
GWT Web Socket and data serialization
GWT Web Socket and data serializationGWT Web Socket and data serialization
GWT Web Socket and data serialization

This document discusses using WebSockets for bidirectional communication between a GWT client and server. It provides an overview of setting up WebSocket connections on both the client and server sides in GWT, including writing a JSNI wrapper to initialize the WebSocket on the client. It also discusses using GWT's existing RPC serialization mechanism to serialize and deserialize Java objects sent over the WebSocket connection, avoiding the need for additional serialization libraries. Code examples are provided for initializing the WebSocket and handling messages on both the client and server sides, as well as using GWT's serialization streams to serialize and deserialize objects between the client and server.

gwtwebsockethtml5
Why? Long Polling
                    #$%&'($))*%&+,-./*01.02-1




                                  (picture from Kaazing)

   !"#$"%$!$
   3+!""4+5 6778*%&+9$-:$-70*$%
   !"#$"%$!$                                 !"
                                             !"

                                                           9
Why? HTTP req/res overhead
GET /PollingStock//PollingStock HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.5)
Gecko/20091102 Firefox/3.5.5
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us
Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300	     691 chars
Connection: keep-alive
Referer: http://localhost:8080/PollingStock/
Cookie: showInheritedConstant=false;
    showInheritedProtectedConstant=false; showInheritedProperty=false;
    showInheritedProtectedProperty=false; showInheritedMethod=false;
    showInheritedProtectedMethod=false; showInheritedEvent=false; showInheritedStyle=false;
    showInheritedEffect=false
HTTP/1.x 200 OK
X-Powered-By: Servlet/2.5 Server: Sun Java System Application Server 9.1_02
Content-Type: text/html;charset=UTF-8
Content-Length: 321
Date: Sat, 07 Nov 2009 00:32:46 GMT
                                                                       Total 871 chars
                                                                            (example from Kaazing)


                                                                                      10
Why? Header traffic analysis
 Example network throughput for Polling HTTP req/resp
 headers:
   Use case A: 10,000 clients polling every 60 seconds
      Network throughput is (871 x 10,000)/60 = 145,166 bytes =
      1,161,328 bits per second (1.1 Mbps)
   Use case B: 10,000 clients polling every second
      Network throughput is (871 x 10,000)/1 = 8,710,000 bytes =
      69,680,000 bits per second (66 Mbps)
   Use case C: 100,000 clients polling every 10 seconds
      Network throughput is (871 x 100,000)/10 = 8,710,000 bytes =
      69,680,000 bits per second (66 Mbps)


                                                 (example statistics from Kaazing)


                                                                     11
What?
        12

Recommended for you

Getting Started with WebSocket and Server-Sent Events in Java
Getting Started with WebSocket and Server-Sent Events in JavaGetting Started with WebSocket and Server-Sent Events in Java
Getting Started with WebSocket and Server-Sent Events in Java

This document discusses WebSocket and Server-Sent Events (SSE) in Java. It provides an overview of WebSocket including the handshake process and lifecycle. It also covers the Java API for creating WebSocket endpoints and handling messages. The document then discusses SSE and the EventSource JavaScript API. Finally, it compares WebSocket and SSE, noting their differences in capabilities and use cases.

html5ssewebsocket
Ws
WsWs
Ws

This document discusses the purpose, background, and implementation status of web sockets. It describes how web sockets enable bidirectional communication between web applications and servers through a single TCP connection. This overcomes limitations of traditional HTTP where communication was typically one-way from server to client using polling. The document outlines the web socket protocol specification process involving the W3C and IETF and lists some potential application areas.

WebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
WebSockets: The Current State of the Most Valuable HTML5 API for Java DevelopersWebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
WebSockets: The Current State of the Most Valuable HTML5 API for Java Developers

WebSockets provide a standardized way for web browsers and servers to establish two-way communications channels over a single TCP connection. They allow for more efficient real-time messaging compared to older techniques like polling and long-polling. The WebSocket API defines client-side and server-side interfaces that allow for full-duplex communications that some popular Java application servers and web servers support natively. Common use cases that benefit from WebSockets include chat applications, online games, and real-time updating of social streams.

html5javajug
What is a WebSocket?
 W3C/IETF Standard

 Uses the WebSocket protocol instead of HTTP

 True full-duplex communication channel
   Both UTF-8 strings and binary frames can be sent in any
   direction at the same time


 It’s not a raw TCP socket



                                                             13
What is a WebSocket?
 Connection established by “upgrading” from HTTP to
 WebSocket protocol

 Runs via port 80/443 - Proxy/Firewall friendly
    HTTP-compatible handshake
    Integrates with Cookie based authentication


 WebSockets and Secure WebSockets
    ws://
    wss://



                                                  14
What? Upgrade handshake

// browser request to the server
GET /demo HTTP/1.1
Upgrade: WebSocket
Connection: Upgrade
Host: example.com
Origin: http://example.com
WebSocket-Protocol: sample

// server response
HTTP/1.1 101 Web Socket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
WebSocket-Origin: http://example.com
WebSocket-Location: ws://example.com/demo
WebSocket-Protocol: sample




                                             15
What? Reduces Network Traffic
 Each message (“frame”) has only 2 bytes of overhead

 No latency from establishing new TCP connections for
 each HTTP message

 No polling overhead - only sends messages when
 there is something to send




                                                  16

Recommended for you

HTML5 WebSocket for the Real-Time Web and the Internet of Things
HTML5 WebSocket for the Real-Time Weband the Internet of ThingsHTML5 WebSocket for the Real-Time Weband the Internet of Things
HTML5 WebSocket for the Real-Time Web and the Internet of Things

Abstract: In his talk Peter gives a brief introduction to WebSocket and discusses how real-time Web communications technologies can be applied to an always connected Web and mobile world. Then, he walks you through how to provide interactivity and collaboration by controlling physical objects remotely. The presentation features several live demonstrations of the concepts discussed throughout the session.

kaazingwebsockethtml5
WEB SOCKET 應用
WEB SOCKET 應用WEB SOCKET 應用
WEB SOCKET 應用

This document provides an overview of Jerromy Lee and his work developing interactive media applications and games using technologies like WebSockets, Bluetooth, and peer-to-peer networking. It summarizes Jerromy's background and experience, describes several projects he has worked on including games for McDonald's and Sony, and provides information on the tools and techniques used to develop these types of connected experiences, including JavaScript, EaselJS, Node.js, and Socket.io.

node.jswebsocketjerromy
WebSockets in JEE 7
WebSockets in JEE 7WebSockets in JEE 7
WebSockets in JEE 7

What are WebSockets and Why we need WebSockets. How can we develop bidirectional web apps in JEE using WebSockets.

karachihtml5java
What? Header traffic analysis
 Example network throughput for WebSocket req/res
 headers:
   Use case A: 10,000 frames every 60 seconds
      Network throughput is (2 x 10,000)/60 = 333 bytes = 2,664 bits
      per second (2.6 Kbps) [was 1.1 Mbps]
   Use case B: 10,000 frames every second
      Network throughput is (2 x 100,000)/1 = 20,000 bytes = 160,000
      bits per second (156 Kbps) [was 66 Mbps]
   Use case C: 100,000 frames every 10 seconds:
      Network throughput is (2 x 100,000)/10 = 20,000 bytes = 160,000
      bits per second (156 Kbps) [was 66 Mbps]

                                                  (example statistics from Kaazing)



                                                                       17
What? Overheard
 "Reducing kilobytes of data to 2 bytes...and reducing
 latency from 150ms to 50ms is far more than marginal.

 In fact, these two factors alone are enough to make
 WebSocket seriously interesting to Google.“

   - Ian Hickson (Google, HTML5 spec lead)




                                                       18
How?
       19
How? The WebSocket interface
[Constructor(in DOMString url, in optional DOMString protocol)]
interface WebSocket {
  readonly attribute DOMString URL;

  // ready state
  const unsigned short CONNECTING = 0;
  const unsigned short OPEN = 1;
  const unsigned short CLOSING = 2;
  const unsigned short CLOSED = 3;
  readonly attribute unsigned short readyState;
  readonly attribute unsigned long bufferedAmount;

  // networking
  attribute Function onopen;
  attribute Function onmessage;
  attribute Function onerror;
  attribute Function onclose;
  boolean send(in DOMString data);
  void close();
};
WebSocket implements EventTarget;




                                                                  20

Recommended for you

Websockets in Node.js - Making them reliable and scalable
Websockets in Node.js - Making them reliable and scalableWebsockets in Node.js - Making them reliable and scalable
Websockets in Node.js - Making them reliable and scalable

This document discusses implementing websockets in Node.js. It covers popular websocket libraries like Socket.io and Engine.io, considerations for reliability and scalability, and using Redis for pub/sub to allow messages to be passed between servers and achieve scalable websockets. Code examples are provided for setting up websockets on both the client and server sides using Engine.io and Redis.

websocketsnodejs
HTML5 WebSockets
HTML5 WebSocketsHTML5 WebSockets
HTML5 WebSockets

The document discusses the history and development of WebSockets. It describes how earlier protocols like HTTP, AJAX, and polling had limitations for real-time full-duplex communication needs. WebSockets were created as a new protocol to allow persistent connections and transmission of data between a client and server with low overhead. The document outlines the WebSocket handshake process and API, discusses security considerations, and provides examples of how WebSockets have been used in online games, visualization tools, and other real-time applications.

html5data communicationswebsockets
Going Live! with Comet
Going Live! with CometGoing Live! with Comet
Going Live! with Comet

Simon Willison gave a presentation on Comet, a technique for enabling live data updates in web applications. Comet allows a web server to push events to connected browsers in real-time. It has faced many technical challenges due to browser limitations. Key techniques discussed include streaming, long polling, and the Bayeaux protocol which provides a common way for Comet clients and servers to communicate. The presentation showed how to easily build a basic Comet application using Jetty and Dojo in just a few lines of code.

brightoncomet
How? The Javascript client
connect: function () {
    try {
        this.ws = new WebSocket(’ws://www.example.com’);
        this.ws.onopen = function (event) {/*...*/};
        this.ws.onclose = function (event) {/*...*/};
        this.ws.onmessage = messageListener;
    }
    catch(exception) {}
},
	
messageListener: function (event) {
    alert(’New message: ’ + event.data)
},

send: function (message) {
    if (this.ws) {
        this.ws.send(message);
    }
},




                                                           21
How? The server
 Server implementations (mostly experimental):

   Kaazing WebSocket Gateway (production since april 2009)
   phpwebsockets
   web-socket-ruby
   mod_pywebsocket
   JWebSocket
   Jetty WebSocketServlet

   and many more...




                                                         22
How? Jetty server example

public class MyServlet extends HttpServlet implements Servlet
{

     // trigger on HTTP GET request
     public void doGet(HttpServletRequest req, HttpServletResponse res) {}

     // trigger on HTTP POST request
     public void doPost(HttpServletRequest req, HttpServletResponse res) {}



    // doWebSocket() ???

}




                                                                              23
How? Jetty server example
public class ChatServiceServlet extends WebSocketServlet implements Servlet
{
    public void doGet(HttpServletRequest req, HttpServletResponse res) {}
    public void doPost(HttpServletRequest req, HttpServletResponse res) {}



    // trigger on request to upgrade to WebSocket connection
    protected WebSocket doWebSocketConnect(HttpServletRequest req, String arg) {
	     	    return new ChatWebSocket();
    }



    // shared resource - needs to be thread safe!
    Set<ChatWebSocket> clients = new CopyOnWriteArraySet<ChatWebSocket>();
    class ChatWebSocket implements WebSocket {
         /* impl on next slide... */
    }

}




                                                                                   24

Recommended for you

Time for Comet?
Time for Comet?Time for Comet?
Time for Comet?

Presented at the Yahoo! Web Development Summit in December 2007. Comet is the new name for the old trick of streaming events down to the browser from the server. This talk introduces Comet and shows how, despite the terrifying browser tricks needed, it's actually now very simple to build against.

Getting Started with WebSockets and Server-Sent Events
Getting Started with WebSockets and Server-Sent EventsGetting Started with WebSockets and Server-Sent Events
Getting Started with WebSockets and Server-Sent Events

This document discusses WebSocket and Server-Sent Events (SSE) for building interactive web applications. It provides an overview of WebSocket including how it enables full-duplex communication over a single TCP connection and the handshake process. It also discusses the Java API for WebSocket including annotated endpoints and custom payloads. Finally, it covers SSE, the EventSource API, and an example SSE implementation in Java.

wildflyhtml5sse
Nodejs and WebSockets
Nodejs and WebSocketsNodejs and WebSockets
Nodejs and WebSockets

Node.js is an asynchronous event-driven JavaScript runtime that allows JavaScript to be used on the server-side. It uses a non-blocking I/O model that makes it suitable for real-time web applications. WebSockets provide a standardized way for the browser and server to establish two-way communication. However, not all browsers support WebSockets yet. Socket.io addresses this by providing a WebSocket-like experience across all browsers through fallbacks like long-polling. It allows real-time applications to be developed more easily.

node.jsnodehtml5
How? Jetty server example
class ChatWebSocket implements WebSocket {

    Outbound outbound;

    public void onConnect(Outbound outbound) {
        this.outbound = outbound;
        clients.add(this);
    }

    public void onMessage(byte frame, String data) {
        for (ChatWebSocket socket : clients) {
            try {
                socket.outbound.sendMessage(frame, data);
            }
            catch(IOException e) {}
        }
    }

    public void onDisconnect() {
        clients.remove(this);
    }
}




                                                            25
How? It’s not a silver bullet
 How should we handle the “close” event?

 Application must be prepared to reopen connection if
 close event was triggered unexpectedly
   Idle timeout
   Network errors




                                                    26
How? It’s not a silver bullet
 Keep-alives

   Sending keep-alive messages to prevent closing due to an idle
   timeout

   No timeout discovery available on the WebSocket

   Keep-alives don’t avoid the need for handling “close” events
      WiFi connections and mobile devices




                                                             27
How? It’s not a silver bullet
 Queues

   Buffer messages that failed to send due to a transient network
   problem

   Resend queue when connection is restored

   Important for both server and client




                                                             28

Recommended for you

KSDG-iSlide App 開發心得分享
KSDG-iSlide App 開發心得分享KSDG-iSlide App 開發心得分享
KSDG-iSlide App 開發心得分享

This document summarizes a hackathon event where a team worked on developing an iSlide presentation platform. They explored using websockets to enable real-time sharing and editing of slides. They also discussed dynamically generating QR codes and accessing the local network IP address from within Android applications to access the iSlide server.

Web-Socket
Web-SocketWeb-Socket
Web-Socket

WebSocket is a protocol that provides full-duplex communication channels over a single TCP connection. It was standardized in 2011 and allows for real-time data exchange between a client and server. The document discusses how WebSocket works, compares it to previous techniques like polling which had limitations, and outlines how to implement WebSocket in Java using JSR 356 and in Spring using the WebSocket API and STOMP protocol.

javascriptjava
Pushing Datatothe Browserwith Comet Ajax W
Pushing Datatothe Browserwith Comet Ajax WPushing Datatothe Browserwith Comet Ajax W
Pushing Datatothe Browserwith Comet Ajax W

The document discusses pushing data from a server to a browser using Comet techniques like long polling and streaming. It describes how Comet allows for real-time updates without polling by keeping connections open. The Bayeux protocol is presented as an open standard for implementing Comet with publish/subscribe messaging on both the client-side and server-side in Java. Examples of using Comet for chat applications and sensor data updates are provided.

ajaxworld-2008ajaxworld-2008ajaxworld-2008
How? It’s not a silver bullet
 Timeouts

   Not all network problems are transient

   Can’t allow queues to grow for ever

   Applications need a timeout when user is considered to be
   disconnected

   Need to implement an explicit close message for application to
   distinguish between network failures and an orderly close



                                                               29
How? It’s not a silver bullet
 Message Retries

   Even with queues we can’t know for sure messages are
   delivered due to race condition
      If close event is triggered soon after a message was sent?


   For quality of service to be guaranteed an acknowledge
   message would have to be sent for each message

   Ideally a future version of WebSockets would support an
   orderly close event



                                                                   30
How? It’s not a silver bullet
 onclose handing, keep-alives, message queues,
 timeouts and retries, introduce more problems:

   If server goes down client will loop trying to reconnect
      Needs a retry backoff algorithm to reduce retries over time


   Message size can cause connection to die if it exceeds some
   resource limit on client or server
      Looks like a transient network error...
      Connection is restored and retries to send same message from
      queue...
      Infinite loop!



                                                                    31
When?
        32

Recommended for you

Websockets - DevFestX May 19, 2012
Websockets - DevFestX May 19, 2012Websockets - DevFestX May 19, 2012
Websockets - DevFestX May 19, 2012

The document discusses Websockets and compares them to HTTP. It provides an overview of Websockets including how they work, specifications, and examples of using Websockets in JavaScript, Android Java, and Java server-side code with the jquery-websocket library. Benefits highlighted include full-duplex communication, lower overhead than HTTP, and lower latency.

devfestxhtml5google
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocketV2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket

Peter Lubbers from Kaazing gave a presentation on HTML5 WebSocket and communication technologies to the San Francisco Java User Group. He discussed the limitations of traditional HTTP for real-time applications and how technologies like polling and long polling add complexity. He then introduced HTML5 WebSocket as a new standard that enables true full-duplex communication with low latency. Finally, he briefly covered other HTML5 communication features like Server-Sent Events, XMLHttpRequest Level 2, and Cross Document Messaging.

Non-blocking I/O, Event loops and node.js
Non-blocking I/O, Event loops and node.jsNon-blocking I/O, Event loops and node.js
Non-blocking I/O, Event loops and node.js

This 15 minute presentation discusses non-blocking I/O, event loops, and Node.js. It builds on previous work by Ryan Dahl, explaining how threads can be expensive due to context switching and memory usage, and how Node.js uses an event-driven, non-blocking model to avoid these costs. Code examples demonstrate getting and printing a policy object, handling HTTP requests asynchronously without blocking additional connections, and using callbacks to chain asynchronous actions together.

When?
 Current browser support:




                   CHROME

                            33
When? Browser support
 Status of native WebSocket support for other browsers
 (2010-04-11):

   Firefox - targeted for the v3.7 release but not yet in 3.7a4pre

   Safari - announced for 4.x but no target date yet

   Opera - 10.x already 95% HTML5 compatible but WebSockets
   missing

   IE 8.x - 9.x unknown
                                                   (reference: jWebSocket project)



                                                                    34
When?
 Graceful degradation for the next ~10 years....

    Realtime apps:
       Java Applet TCP Socket
       Flash XMLSockets over TCP
       Long polling over HTTP

    Not so realtime apps:
       Polling using periodical pulls over HTTP




                                                   35
When?
 Providing fallbacks mean more work.

 More works sucks..

 Solution: Look for a client library which implements the
 WebSocket interface!
    Kaazing
    jWebSocket

    Users will be able to take advantage of true WebSockets when
    their browser supports it


                                                            36

Recommended for you

Cape Cod Web Technology Meetup - 2
Cape Cod Web Technology Meetup - 2Cape Cod Web Technology Meetup - 2
Cape Cod Web Technology Meetup - 2

Text Editors (Atom / Sublime) Apache Server (sftp/ssh/php) – Todd's Server! CPanel / Wordpress (server side details) Working with any Web API (Mapping Example) (facebook, linkedin, twitter, maps, d3.js, jquary) JSON and HTML &lt;img> GIT http://www.github.com

apacheatomgit
WebSockets Everywhere: the Future Transport Protocol for Everything (Almost)
WebSockets Everywhere: the Future Transport Protocol for Everything (Almost)WebSockets Everywhere: the Future Transport Protocol for Everything (Almost)
WebSockets Everywhere: the Future Transport Protocol for Everything (Almost)

WebSockets couples the performance and flexibility of TCP with the reach of HTTP Prediction: WebSockets will replace simple TCP as preferred underlying protocol. To see how Websockets are used in a popular HTML5-based remote access solution, by visiting the following URL: http://j.mp/1luquBQ

websocketscommunication protocolweb security
Building Next Generation Real-Time Web Applications using Websockets
Building Next Generation Real-Time Web Applications using WebsocketsBuilding Next Generation Real-Time Web Applications using Websockets
Building Next Generation Real-Time Web Applications using Websockets

This document discusses real-time web applications and the technologies needed to enable them. It describes how HTTP is half-duplex and led to hacks like long polling to simulate real-time behavior. The WebSocket protocol provides full-duplex communications by upgrading the HTTP handshake. This allows real-time messaging over a single connection. The document also covers asynchronous programming, event-driven architectures, and frameworks like Spring that support WebSockets and asynchronous APIs.

web design and developmentwebsocketjava
When?
 Or... roll your own!

 Introducing the Graceful WebSocket:

    A jQuery plugin implementing the WebSocket interface

       One interface = one implementation

    Uses the native WebSocket if available

    Automatic fallback on HTTP polling



                                                           37
Get involved?
 Visit the Graceful WebSocket project over at Google
 Code:
   http://code.google.com/p/jquery-graceful-websocket/




                                                         38
Summary
 Allows us to write real-time, event driven applications

 Better resource utilization, less latency, less network
 overhead

 Browser support so far is poor

 Specification is not finalized




                                                       39
References?
 W3C The WebSocket API
 HTML5 Communications - Frank Greco (Kaazing)
 jfokus 2010
 http://en.wikipedia.org/wiki/Web_Sockets
 Greg Wilkins Jetty WebSocket Server
 Greg Wilkins Websocket Chat
 http://jwebsocket.org/




                                                40

Recommended for you

Real-Time Python Web: Gevent and Socket.io
Real-Time Python Web: Gevent and Socket.ioReal-Time Python Web: Gevent and Socket.io
Real-Time Python Web: Gevent and Socket.io

The document discusses using Gevent and Socket.io for building real-time web applications, providing code examples for building a chat application that uses Gevent for asynchronous programming, Socket.io for client-server communication, and ZeroMQ for inter-process communication between greenlets. It describes the design and implementation of a web-based chat application that allows clients to send and receive messages in real-time using these technologies.

socket.iozeromqprogramming
WebSockets wiith Scala and Play! Framework
WebSockets wiith Scala and Play! FrameworkWebSockets wiith Scala and Play! Framework
WebSockets wiith Scala and Play! Framework

A WebSockets HOW-TO using Scala and Play!Framework. Links to example repositories and other resources. Created for the AmsterdamScala meetup.

play frameworkactorsakka
Analyzing the Performance of Mobile Web
Analyzing the Performance of Mobile WebAnalyzing the Performance of Mobile Web
Analyzing the Performance of Mobile Web

This document discusses techniques for analyzing the performance of mobile web applications. It covers challenges like network variability, different device hardware, and continuous integration. Approaches mentioned include benchmarking, injecting instrumentation, emulation, and remote inspection. Strategies suggested are reducing complexity, replicating analysis on desktop, and tweaking at the system level. Tools mentioned include the Nexus One, Gingerbread, PhantomJS, and headless WebKit. The document provides examples and caveats for analyzing areas like network traffic, graphics commands, garbage collection, and JavaScript parsing.

Thanks! oh... and we are hiring!
 http://www.f-i.com/careers




                                   41

More Related Content

What's hot

WebSocket protocol
WebSocket protocolWebSocket protocol
WebSocket protocol
Kensaku Komatsu
 
Nuts and Bolts of WebSocket Devoxx 2014
Nuts and Bolts of WebSocket Devoxx 2014Nuts and Bolts of WebSocket Devoxx 2014
Nuts and Bolts of WebSocket Devoxx 2014
Arun Gupta
 
Php push notifications
Php push notificationsPhp push notifications
Php push notifications
Mohammed Shurrab
 
Asynchronous Web Programming with HTML5 WebSockets and Java
Asynchronous Web Programming with HTML5 WebSockets and JavaAsynchronous Web Programming with HTML5 WebSockets and Java
Asynchronous Web Programming with HTML5 WebSockets and Java
James Falkner
 
WebSockets with Spring 4
WebSockets with Spring 4WebSockets with Spring 4
WebSockets with Spring 4
Sergi Almar i Graupera
 
J web socket
J web socketJ web socket
J web socket
Hiroshi Ochi
 
Websockets at tossug
Websockets at tossugWebsockets at tossug
Websockets at tossug
clkao
 
Web sockets in Java
Web sockets in JavaWeb sockets in Java
Web sockets in Java
Pance Cavkovski
 
GWT Web Socket and data serialization
GWT Web Socket and data serializationGWT Web Socket and data serialization
GWT Web Socket and data serialization
GWTcon
 
Getting Started with WebSocket and Server-Sent Events in Java
Getting Started with WebSocket and Server-Sent Events in JavaGetting Started with WebSocket and Server-Sent Events in Java
Getting Started with WebSocket and Server-Sent Events in Java
Arun Gupta
 
Ws
WsWs
WebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
WebSockets: The Current State of the Most Valuable HTML5 API for Java DevelopersWebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
WebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
Viktor Gamov
 
HTML5 WebSocket for the Real-Time Web and the Internet of Things
HTML5 WebSocket for the Real-Time Weband the Internet of ThingsHTML5 WebSocket for the Real-Time Weband the Internet of Things
HTML5 WebSocket for the Real-Time Web and the Internet of Things
Peter Moskovits
 
WEB SOCKET 應用
WEB SOCKET 應用WEB SOCKET 應用
WEB SOCKET 應用
Jerromy Lee
 
WebSockets in JEE 7
WebSockets in JEE 7WebSockets in JEE 7
WebSockets in JEE 7
Shahzad Badar
 
Websockets in Node.js - Making them reliable and scalable
Websockets in Node.js - Making them reliable and scalableWebsockets in Node.js - Making them reliable and scalable
Websockets in Node.js - Making them reliable and scalable
Gareth Marland
 
HTML5 WebSockets
HTML5 WebSocketsHTML5 WebSockets
HTML5 WebSockets
Harri Hämäläinen
 
Going Live! with Comet
Going Live! with CometGoing Live! with Comet
Going Live! with Comet
Simon Willison
 
Time for Comet?
Time for Comet?Time for Comet?
Time for Comet?
Simon Willison
 
Getting Started with WebSockets and Server-Sent Events
Getting Started with WebSockets and Server-Sent EventsGetting Started with WebSockets and Server-Sent Events
Getting Started with WebSockets and Server-Sent Events
Arun Gupta
 

What's hot (20)

WebSocket protocol
WebSocket protocolWebSocket protocol
WebSocket protocol
 
Nuts and Bolts of WebSocket Devoxx 2014
Nuts and Bolts of WebSocket Devoxx 2014Nuts and Bolts of WebSocket Devoxx 2014
Nuts and Bolts of WebSocket Devoxx 2014
 
Php push notifications
Php push notificationsPhp push notifications
Php push notifications
 
Asynchronous Web Programming with HTML5 WebSockets and Java
Asynchronous Web Programming with HTML5 WebSockets and JavaAsynchronous Web Programming with HTML5 WebSockets and Java
Asynchronous Web Programming with HTML5 WebSockets and Java
 
WebSockets with Spring 4
WebSockets with Spring 4WebSockets with Spring 4
WebSockets with Spring 4
 
J web socket
J web socketJ web socket
J web socket
 
Websockets at tossug
Websockets at tossugWebsockets at tossug
Websockets at tossug
 
Web sockets in Java
Web sockets in JavaWeb sockets in Java
Web sockets in Java
 
GWT Web Socket and data serialization
GWT Web Socket and data serializationGWT Web Socket and data serialization
GWT Web Socket and data serialization
 
Getting Started with WebSocket and Server-Sent Events in Java
Getting Started with WebSocket and Server-Sent Events in JavaGetting Started with WebSocket and Server-Sent Events in Java
Getting Started with WebSocket and Server-Sent Events in Java
 
Ws
WsWs
Ws
 
WebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
WebSockets: The Current State of the Most Valuable HTML5 API for Java DevelopersWebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
WebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
 
HTML5 WebSocket for the Real-Time Web and the Internet of Things
HTML5 WebSocket for the Real-Time Weband the Internet of ThingsHTML5 WebSocket for the Real-Time Weband the Internet of Things
HTML5 WebSocket for the Real-Time Web and the Internet of Things
 
WEB SOCKET 應用
WEB SOCKET 應用WEB SOCKET 應用
WEB SOCKET 應用
 
WebSockets in JEE 7
WebSockets in JEE 7WebSockets in JEE 7
WebSockets in JEE 7
 
Websockets in Node.js - Making them reliable and scalable
Websockets in Node.js - Making them reliable and scalableWebsockets in Node.js - Making them reliable and scalable
Websockets in Node.js - Making them reliable and scalable
 
HTML5 WebSockets
HTML5 WebSocketsHTML5 WebSockets
HTML5 WebSockets
 
Going Live! with Comet
Going Live! with CometGoing Live! with Comet
Going Live! with Comet
 
Time for Comet?
Time for Comet?Time for Comet?
Time for Comet?
 
Getting Started with WebSockets and Server-Sent Events
Getting Started with WebSockets and Server-Sent EventsGetting Started with WebSockets and Server-Sent Events
Getting Started with WebSockets and Server-Sent Events
 

Similar to The HTML5 WebSocket API

Nodejs and WebSockets
Nodejs and WebSocketsNodejs and WebSockets
Nodejs and WebSockets
Gonzalo Ayuso
 
KSDG-iSlide App 開發心得分享
KSDG-iSlide App 開發心得分享KSDG-iSlide App 開發心得分享
KSDG-iSlide App 開發心得分享
Chia Wei Tsai
 
Web-Socket
Web-SocketWeb-Socket
Pushing Datatothe Browserwith Comet Ajax W
Pushing Datatothe Browserwith Comet Ajax WPushing Datatothe Browserwith Comet Ajax W
Pushing Datatothe Browserwith Comet Ajax W
rajivmordani
 
Websockets - DevFestX May 19, 2012
Websockets - DevFestX May 19, 2012Websockets - DevFestX May 19, 2012
Websockets - DevFestX May 19, 2012
Sameer Segal
 
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocketV2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
brent bucci
 
Non-blocking I/O, Event loops and node.js
Non-blocking I/O, Event loops and node.jsNon-blocking I/O, Event loops and node.js
Non-blocking I/O, Event loops and node.js
Marcus Frödin
 
Cape Cod Web Technology Meetup - 2
Cape Cod Web Technology Meetup - 2Cape Cod Web Technology Meetup - 2
Cape Cod Web Technology Meetup - 2
Asher Martin
 
WebSockets Everywhere: the Future Transport Protocol for Everything (Almost)
WebSockets Everywhere: the Future Transport Protocol for Everything (Almost)WebSockets Everywhere: the Future Transport Protocol for Everything (Almost)
WebSockets Everywhere: the Future Transport Protocol for Everything (Almost)
Ericom Software
 
Building Next Generation Real-Time Web Applications using Websockets
Building Next Generation Real-Time Web Applications using WebsocketsBuilding Next Generation Real-Time Web Applications using Websockets
Building Next Generation Real-Time Web Applications using Websockets
Naresh Chintalcheru
 
Real-Time Python Web: Gevent and Socket.io
Real-Time Python Web: Gevent and Socket.ioReal-Time Python Web: Gevent and Socket.io
Real-Time Python Web: Gevent and Socket.io
Rick Copeland
 
WebSockets wiith Scala and Play! Framework
WebSockets wiith Scala and Play! FrameworkWebSockets wiith Scala and Play! Framework
WebSockets wiith Scala and Play! Framework
Fabio Tiriticco
 
Analyzing the Performance of Mobile Web
Analyzing the Performance of Mobile WebAnalyzing the Performance of Mobile Web
Analyzing the Performance of Mobile Web
Ariya Hidayat
 
jWebSocket MobileTechCon 2010 - WebSockets on Android, Symbian and BlackBerry
jWebSocket MobileTechCon 2010 - WebSockets on Android, Symbian and BlackBerryjWebSocket MobileTechCon 2010 - WebSockets on Android, Symbian and BlackBerry
jWebSocket MobileTechCon 2010 - WebSockets on Android, Symbian and BlackBerry
Innotrade GmbH, jWebSocket.org, Alexander Schulze
 
Jwebsocketmobiletechcon2010en 100912071225 Phpapp01
Jwebsocketmobiletechcon2010en 100912071225 Phpapp01Jwebsocketmobiletechcon2010en 100912071225 Phpapp01
Jwebsocketmobiletechcon2010en 100912071225 Phpapp01
purans
 
WebSockets On Fire
WebSockets On FireWebSockets On Fire
WebSockets On Fire
Jef Claes
 
Enhancing Mobile User Experience with WebSocket
Enhancing Mobile User Experience with WebSocketEnhancing Mobile User Experience with WebSocket
Enhancing Mobile User Experience with WebSocket
Mauricio "Maltron" Leal
 
Socket.io
Socket.ioSocket.io
Socket.io
Diego Pacheco
 
Lecture 6 Web Sockets
Lecture 6   Web SocketsLecture 6   Web Sockets
Lecture 6 Web Sockets
Fahad Golra
 
Original slides from Ryan Dahl's NodeJs intro talk
Original slides from Ryan Dahl's NodeJs intro talkOriginal slides from Ryan Dahl's NodeJs intro talk
Original slides from Ryan Dahl's NodeJs intro talk
Aarti Parikh
 

Similar to The HTML5 WebSocket API (20)

Nodejs and WebSockets
Nodejs and WebSocketsNodejs and WebSockets
Nodejs and WebSockets
 
KSDG-iSlide App 開發心得分享
KSDG-iSlide App 開發心得分享KSDG-iSlide App 開發心得分享
KSDG-iSlide App 開發心得分享
 
Web-Socket
Web-SocketWeb-Socket
Web-Socket
 
Pushing Datatothe Browserwith Comet Ajax W
Pushing Datatothe Browserwith Comet Ajax WPushing Datatothe Browserwith Comet Ajax W
Pushing Datatothe Browserwith Comet Ajax W
 
Websockets - DevFestX May 19, 2012
Websockets - DevFestX May 19, 2012Websockets - DevFestX May 19, 2012
Websockets - DevFestX May 19, 2012
 
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocketV2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
 
Non-blocking I/O, Event loops and node.js
Non-blocking I/O, Event loops and node.jsNon-blocking I/O, Event loops and node.js
Non-blocking I/O, Event loops and node.js
 
Cape Cod Web Technology Meetup - 2
Cape Cod Web Technology Meetup - 2Cape Cod Web Technology Meetup - 2
Cape Cod Web Technology Meetup - 2
 
WebSockets Everywhere: the Future Transport Protocol for Everything (Almost)
WebSockets Everywhere: the Future Transport Protocol for Everything (Almost)WebSockets Everywhere: the Future Transport Protocol for Everything (Almost)
WebSockets Everywhere: the Future Transport Protocol for Everything (Almost)
 
Building Next Generation Real-Time Web Applications using Websockets
Building Next Generation Real-Time Web Applications using WebsocketsBuilding Next Generation Real-Time Web Applications using Websockets
Building Next Generation Real-Time Web Applications using Websockets
 
Real-Time Python Web: Gevent and Socket.io
Real-Time Python Web: Gevent and Socket.ioReal-Time Python Web: Gevent and Socket.io
Real-Time Python Web: Gevent and Socket.io
 
WebSockets wiith Scala and Play! Framework
WebSockets wiith Scala and Play! FrameworkWebSockets wiith Scala and Play! Framework
WebSockets wiith Scala and Play! Framework
 
Analyzing the Performance of Mobile Web
Analyzing the Performance of Mobile WebAnalyzing the Performance of Mobile Web
Analyzing the Performance of Mobile Web
 
jWebSocket MobileTechCon 2010 - WebSockets on Android, Symbian and BlackBerry
jWebSocket MobileTechCon 2010 - WebSockets on Android, Symbian and BlackBerryjWebSocket MobileTechCon 2010 - WebSockets on Android, Symbian and BlackBerry
jWebSocket MobileTechCon 2010 - WebSockets on Android, Symbian and BlackBerry
 
Jwebsocketmobiletechcon2010en 100912071225 Phpapp01
Jwebsocketmobiletechcon2010en 100912071225 Phpapp01Jwebsocketmobiletechcon2010en 100912071225 Phpapp01
Jwebsocketmobiletechcon2010en 100912071225 Phpapp01
 
WebSockets On Fire
WebSockets On FireWebSockets On Fire
WebSockets On Fire
 
Enhancing Mobile User Experience with WebSocket
Enhancing Mobile User Experience with WebSocketEnhancing Mobile User Experience with WebSocket
Enhancing Mobile User Experience with WebSocket
 
Socket.io
Socket.ioSocket.io
Socket.io
 
Lecture 6 Web Sockets
Lecture 6   Web SocketsLecture 6   Web Sockets
Lecture 6 Web Sockets
 
Original slides from Ryan Dahl's NodeJs intro talk
Original slides from Ryan Dahl's NodeJs intro talkOriginal slides from Ryan Dahl's NodeJs intro talk
Original slides from Ryan Dahl's NodeJs intro talk
 

Recently uploaded

Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
Matthew Sinclair
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
Awais Yaseen
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 

Recently uploaded (20)

Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 

The HTML5 WebSocket API

  • 1. The HTML5 WebSocket API Stockholm Web Monkeys
  • 2. $ whoami David Lindkvist kontain.com/david-lindkvist twitter.com/ffdead Application Developer @F_i Web development is my passion! Drummer myspace.com/vildhjarta myspace.com/terminalfunction 2
  • 3. Agenda Why do we need WebSockets? What is it? How does it work? When can we use it? 3
  • 4. Why? 4
  • 5. Why? Today’s web apps demand reliable event-driven communications “Real-time” (minimal latency) Full duplex Examples: Social networking Online games Collaborative platforms Financial applications etc... 5
  • 6. Why? Problems with HTTP... It’s hard to achieve real-time apps, primarily due to the limitations of HTTP HTTP is half-duplex (traffic flows in only one direction at a time) HTTP adds latency and message overhead 6
  • 7. Why? Simulate real-time? Polling (AJAX) Poll server for updates, wait at client Long polling (Comet) Poll server for updates, wait at the server; uses two connections and requires unnecessary complexity Used in Ajax applications to simulate real-time Leads to poor resource utilization... 7
  • 8. Why? Polling #$%%&'()*+,-&./,.0+/ !""#$%&"'()'"'$*+&,!&')- (picture from Kaazing) !"#$"%$!$ 1)233")4 5667&'()8$+9$+6.&$' !"#$"%$!$ !" !" 8
  • 9. Why? Long Polling #$%&'($))*%&+,-./*01.02-1 (picture from Kaazing) !"#$"%$!$ 3+!""4+5 6778*%&+9$-:$-70*$% !"#$"%$!$ !" !" 9
  • 10. Why? HTTP req/res overhead GET /PollingStock//PollingStock HTTP/1.1 Host: localhost:8080 User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 691 chars Connection: keep-alive Referer: http://localhost:8080/PollingStock/ Cookie: showInheritedConstant=false; showInheritedProtectedConstant=false; showInheritedProperty=false; showInheritedProtectedProperty=false; showInheritedMethod=false; showInheritedProtectedMethod=false; showInheritedEvent=false; showInheritedStyle=false; showInheritedEffect=false HTTP/1.x 200 OK X-Powered-By: Servlet/2.5 Server: Sun Java System Application Server 9.1_02 Content-Type: text/html;charset=UTF-8 Content-Length: 321 Date: Sat, 07 Nov 2009 00:32:46 GMT Total 871 chars (example from Kaazing) 10
  • 11. Why? Header traffic analysis Example network throughput for Polling HTTP req/resp headers: Use case A: 10,000 clients polling every 60 seconds Network throughput is (871 x 10,000)/60 = 145,166 bytes = 1,161,328 bits per second (1.1 Mbps) Use case B: 10,000 clients polling every second Network throughput is (871 x 10,000)/1 = 8,710,000 bytes = 69,680,000 bits per second (66 Mbps) Use case C: 100,000 clients polling every 10 seconds Network throughput is (871 x 100,000)/10 = 8,710,000 bytes = 69,680,000 bits per second (66 Mbps) (example statistics from Kaazing) 11
  • 12. What? 12
  • 13. What is a WebSocket? W3C/IETF Standard Uses the WebSocket protocol instead of HTTP True full-duplex communication channel Both UTF-8 strings and binary frames can be sent in any direction at the same time It’s not a raw TCP socket 13
  • 14. What is a WebSocket? Connection established by “upgrading” from HTTP to WebSocket protocol Runs via port 80/443 - Proxy/Firewall friendly HTTP-compatible handshake Integrates with Cookie based authentication WebSockets and Secure WebSockets ws:// wss:// 14
  • 15. What? Upgrade handshake // browser request to the server GET /demo HTTP/1.1 Upgrade: WebSocket Connection: Upgrade Host: example.com Origin: http://example.com WebSocket-Protocol: sample // server response HTTP/1.1 101 Web Socket Protocol Handshake Upgrade: WebSocket Connection: Upgrade WebSocket-Origin: http://example.com WebSocket-Location: ws://example.com/demo WebSocket-Protocol: sample 15
  • 16. What? Reduces Network Traffic Each message (“frame”) has only 2 bytes of overhead No latency from establishing new TCP connections for each HTTP message No polling overhead - only sends messages when there is something to send 16
  • 17. What? Header traffic analysis Example network throughput for WebSocket req/res headers: Use case A: 10,000 frames every 60 seconds Network throughput is (2 x 10,000)/60 = 333 bytes = 2,664 bits per second (2.6 Kbps) [was 1.1 Mbps] Use case B: 10,000 frames every second Network throughput is (2 x 100,000)/1 = 20,000 bytes = 160,000 bits per second (156 Kbps) [was 66 Mbps] Use case C: 100,000 frames every 10 seconds: Network throughput is (2 x 100,000)/10 = 20,000 bytes = 160,000 bits per second (156 Kbps) [was 66 Mbps] (example statistics from Kaazing) 17
  • 18. What? Overheard "Reducing kilobytes of data to 2 bytes...and reducing latency from 150ms to 50ms is far more than marginal. In fact, these two factors alone are enough to make WebSocket seriously interesting to Google.“ - Ian Hickson (Google, HTML5 spec lead) 18
  • 19. How? 19
  • 20. How? The WebSocket interface [Constructor(in DOMString url, in optional DOMString protocol)] interface WebSocket { readonly attribute DOMString URL; // ready state const unsigned short CONNECTING = 0; const unsigned short OPEN = 1; const unsigned short CLOSING = 2; const unsigned short CLOSED = 3; readonly attribute unsigned short readyState; readonly attribute unsigned long bufferedAmount; // networking attribute Function onopen; attribute Function onmessage; attribute Function onerror; attribute Function onclose; boolean send(in DOMString data); void close(); }; WebSocket implements EventTarget; 20
  • 21. How? The Javascript client connect: function () { try { this.ws = new WebSocket(’ws://www.example.com’); this.ws.onopen = function (event) {/*...*/}; this.ws.onclose = function (event) {/*...*/}; this.ws.onmessage = messageListener; } catch(exception) {} }, messageListener: function (event) { alert(’New message: ’ + event.data) }, send: function (message) { if (this.ws) { this.ws.send(message); } }, 21
  • 22. How? The server Server implementations (mostly experimental): Kaazing WebSocket Gateway (production since april 2009) phpwebsockets web-socket-ruby mod_pywebsocket JWebSocket Jetty WebSocketServlet and many more... 22
  • 23. How? Jetty server example public class MyServlet extends HttpServlet implements Servlet { // trigger on HTTP GET request public void doGet(HttpServletRequest req, HttpServletResponse res) {} // trigger on HTTP POST request public void doPost(HttpServletRequest req, HttpServletResponse res) {} // doWebSocket() ??? } 23
  • 24. How? Jetty server example public class ChatServiceServlet extends WebSocketServlet implements Servlet { public void doGet(HttpServletRequest req, HttpServletResponse res) {} public void doPost(HttpServletRequest req, HttpServletResponse res) {} // trigger on request to upgrade to WebSocket connection protected WebSocket doWebSocketConnect(HttpServletRequest req, String arg) { return new ChatWebSocket(); } // shared resource - needs to be thread safe! Set<ChatWebSocket> clients = new CopyOnWriteArraySet<ChatWebSocket>(); class ChatWebSocket implements WebSocket { /* impl on next slide... */ } } 24
  • 25. How? Jetty server example class ChatWebSocket implements WebSocket { Outbound outbound; public void onConnect(Outbound outbound) { this.outbound = outbound; clients.add(this); } public void onMessage(byte frame, String data) { for (ChatWebSocket socket : clients) { try { socket.outbound.sendMessage(frame, data); } catch(IOException e) {} } } public void onDisconnect() { clients.remove(this); } } 25
  • 26. How? It’s not a silver bullet How should we handle the “close” event? Application must be prepared to reopen connection if close event was triggered unexpectedly Idle timeout Network errors 26
  • 27. How? It’s not a silver bullet Keep-alives Sending keep-alive messages to prevent closing due to an idle timeout No timeout discovery available on the WebSocket Keep-alives don’t avoid the need for handling “close” events WiFi connections and mobile devices 27
  • 28. How? It’s not a silver bullet Queues Buffer messages that failed to send due to a transient network problem Resend queue when connection is restored Important for both server and client 28
  • 29. How? It’s not a silver bullet Timeouts Not all network problems are transient Can’t allow queues to grow for ever Applications need a timeout when user is considered to be disconnected Need to implement an explicit close message for application to distinguish between network failures and an orderly close 29
  • 30. How? It’s not a silver bullet Message Retries Even with queues we can’t know for sure messages are delivered due to race condition If close event is triggered soon after a message was sent? For quality of service to be guaranteed an acknowledge message would have to be sent for each message Ideally a future version of WebSockets would support an orderly close event 30
  • 31. How? It’s not a silver bullet onclose handing, keep-alives, message queues, timeouts and retries, introduce more problems: If server goes down client will loop trying to reconnect Needs a retry backoff algorithm to reduce retries over time Message size can cause connection to die if it exceeds some resource limit on client or server Looks like a transient network error... Connection is restored and retries to send same message from queue... Infinite loop! 31
  • 32. When? 32
  • 33. When? Current browser support: CHROME 33
  • 34. When? Browser support Status of native WebSocket support for other browsers (2010-04-11): Firefox - targeted for the v3.7 release but not yet in 3.7a4pre Safari - announced for 4.x but no target date yet Opera - 10.x already 95% HTML5 compatible but WebSockets missing IE 8.x - 9.x unknown (reference: jWebSocket project) 34
  • 35. When? Graceful degradation for the next ~10 years.... Realtime apps: Java Applet TCP Socket Flash XMLSockets over TCP Long polling over HTTP Not so realtime apps: Polling using periodical pulls over HTTP 35
  • 36. When? Providing fallbacks mean more work. More works sucks.. Solution: Look for a client library which implements the WebSocket interface! Kaazing jWebSocket Users will be able to take advantage of true WebSockets when their browser supports it 36
  • 37. When? Or... roll your own! Introducing the Graceful WebSocket: A jQuery plugin implementing the WebSocket interface One interface = one implementation Uses the native WebSocket if available Automatic fallback on HTTP polling 37
  • 38. Get involved? Visit the Graceful WebSocket project over at Google Code: http://code.google.com/p/jquery-graceful-websocket/ 38
  • 39. Summary Allows us to write real-time, event driven applications Better resource utilization, less latency, less network overhead Browser support so far is poor Specification is not finalized 39
  • 40. References? W3C The WebSocket API HTML5 Communications - Frank Greco (Kaazing) jfokus 2010 http://en.wikipedia.org/wiki/Web_Sockets Greg Wilkins Jetty WebSocket Server Greg Wilkins Websocket Chat http://jwebsocket.org/ 40
  • 41. Thanks! oh... and we are hiring! http://www.f-i.com/careers 41

Editor's Notes