share
Stack OverflowWhat are good resources for learning HTML5 WebSocket?
[+150] [7] Enrico Pallazzo
[2010-11-24 00:52:25]
[ html5 websocket learning-resources ]
[ http://stackoverflow.com/questions/4262543/what-are-good-resources-for-learning-html5-websocket ] [DELETED]

What are good resources for learning HTML5 WebSocket?

(2) Make it a community wiki then! - Paul Creasey
(1) @Enrico Pallazzo Explicitly making it Community Wiki has been removed. Simply edit or answer it enough times. :) - alex
(1) Added a link over at the Node.js TagWiki: stackoverflow.com/tags/node.js/info It's already a common question on the tag and there will be a lot more in the future when WebSockets gain traction - Ivo Wetzel
Nice job! You could have considered asking a question and then answer it yourself. - Jonas Elfström
(3) It would be better to put this on the [websocket] tag wiki page. - Jonas
im confused - where is the question??? - RPM1984
I've changed a bit so now it's a question. - Enrico Pallazzo
(1) @Enrico It's still not a question, it's a blog post, and doesn't belong here. - meagar
@meagar It's an FAQ, go ahead and tell the C++ guys to delete all there FAQs (like stackoverflow.com/questions/4227328/… ). Also this here can be updated by anyone, a blog post cannot. And the blog post can vanish, while this here will stay. - Ivo Wetzel
@Ivo The question you linked has nothing in common with this one. SO is a Q/A site. A FAQ is (quite obviously) a question which this is not. This does not belong here. - meagar
Meagar, it's a question now and no blog post.. (Talking about blog posts: stackoverflow.com/questions/3737139/…) - Enrico Pallazzo
@meagar What's your problem? Why's a FAQ a bad thing? We should get rid of Tag Wikis too then... without such an FAQ you only re-answers the same questions over and over again. - Ivo Wetzel
(1) @Ivo The tag wikis are exactly what this kind of thing is for. Your argument about this type of massive post preventing questions from being re-asked is utterly wrong: A single specific question, clearly asked, is more likely to turn up in a Google search and prevent duplicate questions than a massive wall of text like this. This is the fundamental idea on which Stack Overflow is based. - meagar
@Enrico You'll note that I also voted to close that question. - meagar
@meagar You can still put a link to this in the Tag Wiki, without blowing up the wiki... But feel free to throw in a close vote here and over at the PHP thing linked above. - Ivo Wetzel
[+118] [2010-11-24 08:46:29] Enrico Pallazzo [ACCEPTED]

HTML5 WebSockets?

WebSockets is a technology providing for bi-directional, full-duplex communications channels, over a single Transmission Control Protocol (TCP) socket. It is designed to be implemented in web browsers and web servers but it can be used by any client or server application. The WebSocket API is being standardized by the W3C and the WebSocket protocol is being standardized by the IETF. Since ordinary TCP connections to ports other than 80 are frequently blocked by administrators outside of home environments it can be used as a way to overcome these restrictions and provide similar functionality with some additional protocol overhead while multiplexing several WebSocket services over a single TCP port.

Used source: Wikipedia [1]

You can find the official W3C documentation about HTML5 Websockets here [2].

Why this new technology?

This technology enables programmers to create interactive real-time web applications, quickly and reliably.

Browser support

  • Chrome 4.0
  • Firefox 4.0 beta
  • Opera 11 (or 10.70) alpha
  • Safari 5.0.2
  • iOS 4.2 (Mobile Safari)
  • Other browsers with Flash support can use web-socket-js [3] fall-back.

Used source: Stackoverflow [4]

caniuse.com [5] has an up-to-date table of WebSockets support in browsers.

Browser polyfills for WebSocket support

Source: HTML5 Cross browser Polyfills [9]

How do I test browser support?

These links will report WebSockets support:

This Javascript will report if your browser supports HTML5 WebSockets:

if (window.WebSocket) {
  alert("WebSockets is supported in your browser.");
} else {
  alert("WebSockets is NOT supported in your browser.");
}

or for Firefox use:

if (window.MozWebSocket) {
  alert("WebSockets is supported in your browser.");
} else {
  alert("WebSockets is NOT supported in your browser.");
}

Used source: Pro HTML5 Programming (book) [10]

Simple JavaScript Example

if ("WebSocket" in window) {
    var ws = new WebSocket("ws://echo.websockets.org/");
    ws.onopen = function() {
        console.log("WebSockets connection opened");
        ws.send("a test message");
    }
    ws.onmessage = function(e) {
        console.log("Got WebSockets message: " + e.data);
    }
    ws.onclose = function() {
        console.log("WebSockets connection closed");
    }
} else {
    alert("No WebSockets support");
}

Existing WebSocket servers

Tutorials and references

StackOverflow community wiki resources

Websocket vs ____

Demos

Videos

Useful Books

[1] http://en.wikipedia.org/wiki/WebSockets
[2] http://dev.w3.org/html5/websockets/
[3] https://github.com/gimite/web-socket-js
[4] http://stackoverflow.com/questions/1253683/websocket-for-html5
[5] http://caniuse.com/#feat=websockets
[6] http://socket.io/
[7] http://github.com/gimite/web-socket-js/
[8] http://jfarcand.wordpress.com/2010/06/15/using-atmospheres-jquery-plug-in-to-build-applicationsupporting-both-websocket-and-comet/
[9] https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
[10] http://rads.stackoverflow.com/amzn/click/1430227907
[11] http://jwebsocket.org/
[12] http://github.com/gimite/web-socket-ruby
[13] http://github.com/LearnBoost/Socket.IO-node
[14] https://github.com/Worlize/WebSocket-Node
[15] http://nodejs.org/
[16] http://www.kaazing.com/products/kaazing-websocket-gateway.html
[17] http://code.google.com/p/pywebsocket/
[18] http://jboss.org/netty
[19] http://jetty.codehaus.org/jetty/
[20] https://github.com/kanaka/noVNC/tree/master/utils/
[21] http://bitbucket.org/denis/websocket
[22] https://github.com/kanaka/websockify
[23] http://www.tavendo.de/autobahn
[24] https://github.com/rlotun/txWebSocket
[25] https://github.com/zaphoyd/websocketpp
[26] https://github.com/purplefox/vert.x
[27] http://superwebsocket.codeplex.com/
[28] https://github.com/Olivine-Labs/Alchemy-Websockets
[29] http://aria2.sourceforge.net/README.html#websocket
[30] http://www.html5rocks.com/tutorials/websockets/basics/
[31] http://www.websockets.org
[32] http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/
[33] http://dev.w3.org/2009/dap/camera/
[34] http://www.w3.org/TR/html5/video.html
[35] http://www.w3.org/TR/html-markup/audio.html
[36] http://www.flynsarmy.com/2010/05/php-web-socket-chat-application/
[37] http://www.tavendo.de/autobahn/tutorials.html
[38] http://tutorial.kaazing.com
[39] http://stackoverflow.com/questions/8125507/how-can-i-send-and-receive-websocket-messages
[40] http://www.infoq.com/news/2008/12/websockets-vs-comet-ajax
[41] http://www.thewildernessdowntown.com/
[42] http://www.chromeexperiments.com/
[43] http://websocket.org/echo.html
[44] http://kaazing.me/
[45] http://mrdoob.com/projects/multiuserpad
[46] http://mrdoob.com/blog/post/701
[47] http://rumpetroll.com/
[48] http://wordsquared.com/
[49] http://html5demos.com/
[50] http://html5gallery.com/
[51] http://www.youtube.com/watch?v=XhMN0wlITLk
[52] http://www.youtube.com/watch?v=64TcBiqmVko
[53] https://labs.ericsson.com/developer-community/blog/video-websocket-difference
[54] http://softwareas.com/video-sync-with-websocket-and-node
[55] http://www.youtube.com/watch?v=icVpGOvh4tc
[56] http://vimeo.com/13681309
[57] http://vimeo.com/16459612
[58] http://channel9.msdn.com/Events/MIX/MIX11/HTM10
[59] http://rads.stackoverflow.com/amzn/click/1430247401
[60] http://rads.stackoverflow.com/amzn/click/1430227907
[61] http://rads.stackoverflow.com/amzn/click/0596806027
[62] http://rads.stackoverflow.com/amzn/click/0321687299

1
[+15] [2010-11-25 02:52:59] Enrico Pallazzo

Q&A's on Stackoverflow

HTML5

Development & How-to's

HTML5 Websockets

Websocket Server

Browser/(i)OS Support

Webbased Instant Messaging with audio/video (webcam) support

Security

[1] http://stackoverflow.com/questions/1076897/html5-syntax-html-vs-xhtml
[2] http://stackoverflow.com/questions/3277671/css-reset-for-html5
[3] http://stackoverflow.com/questions/1194784/which-browsers-support-html5-offline-storage
[4] http://stackoverflow.com/questions/3135580/is-it-too-early-to-use-html5
[5] http://stackoverflow.com/questions/186264/is-it-time-to-start-using-html5
[6] http://stackoverflow.com/questions/2560375/where-can-i-find-good-documentations-about-html5
[7] http://stackoverflow.com/questions/2990845/html5-or-flash
[8] http://stackoverflow.com/questions/1032006/will-html5-allow-web-apps-to-make-peer-to-peer-http-connections
[9] http://stackoverflow.com/questions/1055214/is-there-a-way-to-make-html5-video-fullscreen
[10] http://stackoverflow.com/questions/2637930/any-good-visual-html5-editor-or-ide
[11] http://stackoverflow.com/questions/4121920/how-can-i-create-a-websocket-on-google-app-engine-for-html5
[12] http://stackoverflow.com/questions/2064641/is-there-a-websocket-client-implemented-for-net
[13] http://stackoverflow.com/questions/1850162/is-there-an-open-source-websockets-javascript-xmpp-library
[14] http://stackoverflow.com/questions/2419346/can-nginx-be-used-as-a-reverse-proxy-for-a-backend-websocket-server
[15] http://stackoverflow.com/questions/2609717/gwt-html5-video-in-mobile-safari
[16] http://stackoverflow.com/questions/3319537/html5-websockets-what-should-i-know-about-sockets-before-using-websockets
[17] http://stackoverflow.com/questions/2172626/how-can-html5-replace-flash
[18] http://stackoverflow.com/questions/1967943/will-html5-websockets-be-crippled-by-firewalls
[19] http://stackoverflow.com/questions/1530023/html5-websocket-need-server
[20] http://stackoverflow.com/questions/2924991/what-popular-webservers-have-support-for-html5-websocket
[21] http://stackoverflow.com/questions/4188825/porting-node-js-server-side-code-to-html5-websockets
[22] http://stackoverflow.com/questions/8125507/how-can-i-send-and-receive-websocket-messages-on-the-server-side
[23] http://stackoverflow.com/questions/1253683/websocket-for-html5
[24] http://stackoverflow.com/questions/3805284/apple-ios-lack-of-html5-websockets-support
[25] http://stackoverflow.com/questions/3798359/html5-websocket-on-iphone-3gs
[26] http://stackoverflow.com/questions/4220672/implementing-webbased-real-time-video-chat-using-html5-websockets
[27] http://stackoverflow.com/questions/3595282/why-are-websockets-without-sec-websocket-key1-insecure

2
[+12] [2010-12-04 15:09:22] Enrico Pallazzo

HTML5 Web Sockets and Proxy Servers

WebSocket connections use standard HTTP ports (80 and 443), which has prompted many to call it a "proxy server and firewall-friendly protocol." Therefore, HTML5 Web Sockets do not require new hardware to be installed, or new ports to be opened on corporate networks--two things that would stop the adoption of any new protocol dead in its tracks. Without any intermediary servers (proxy or reverse proxy servers, firewalls, load-balancing routers and so on) between the browser and the WebSocket server, a WebSocket connection can be established smoothly, as long as both the server and the client understand the Web Socket protocol. However, in real environments, lots of network traffic is routed through intermediary servers.

A picture is worth a thousand words. Figure 1 shows a simplified network topology in which clients use a browser to access back-end TCP-based services using a full-duplex HTML5 WebSocket connection. Some clients are located inside a corporate network, protected by a corporate firewall and configured to access the Internet through explicit, or known, proxy servers, which may provide content caching and security; while other clients access the WebSocket server directly over the Internet. In both cases, the client requests may be routed through transparent, or unknown, proxy servers (for example, a proxy server in a data center or a reverse proxy server in front of the remote server). It is even possible for proxy servers to have their own explicit proxy servers, increasing the number of hops the WebSocket traffic has to make.

Figure 1—Web Sockets architecture with explicit and transparent proxy servers

Unlike regular HTTP traffic, which uses a request/response protocol, WebSocket connections can remain open for a long time. Proxy servers may allow this and handle it gracefully, but they can also throw a monkey wrench in the works.

Source: How HTML5 Web Sockets Interact With Proxy Servers [1]

[1] http://www.infoq.com/articles/Web-Sockets-Proxy-Servers

From the article - infoq.com/articles/Web-Sockets-Proxy-Servers, it looks like the ability to use websockets is pretty much at the mercy of proxy servers. Is that still the case ? - sandeep
3
[+5] [2010-11-25 17:58:37] jonnii

Can I suggest a section for third party tools? I've been using pusherapp [1] which is currently in public beta and so far have had nothing but a fantastic experience with it. It makes writing real time web apps super easy.

[1] http://pusherapp.com

Third party tools are often at a higher abstraction layer that limits or mitigates the learning curve. Because the question is about learning HTML 5 Web Sockets, I'd suggest a new question devoted to tools for HTML 5 Web Sockets. - John K
4
[+1] [2012-01-09 00:43:41] Enrico Pallazzo

Here's a new and great tutorial for a real time survey using html5 websockets

http://www.netmagazine.com/tutorials/code-real-time-survey-html5-websockets


5
[0] [2010-11-28 13:34:47] Age Mooij

The Atmosphere framework [1] also implements a WebSocket server.

[1] http://github.com/Atmosphere/atmosphere

6
[0] [2011-09-30 06:20:26] Roger F. Gay

HLL WebSocket Server Demonstration (Java) [1] : Includes online and downloadable framed browser based GUI for testing server interaction.

[1] http://highlevellogic.blogspot.com/2011/09/websocket-server-demonstration_26.html

7