SlideShare a Scribd company logo
1 of 11
SockJS Intro




               Ngoc Dao
Do you know WebSocket?
WebSocket
<script>
var sock = new WebSocket('ws://domain/my_prefix');

sock.onopen = function() {
  console.log('open');
};

sock.onmessage = function(e) {
  console.log('message', e.data);
};

sock.onclose = function() {
  console.log('close');               Server can push data
};                                  to browsers when it wants
</script>
WebSocket
    New browsers are required:
●   Internet Explorer: 10
●   Firefox: 6
●   Chrome: 4
●   Safari: 5
●   Opera: 12.10
SockJS
●   Provides WebSocket-like API
●   Supports all browsers, e.g. IE 6
●   Transports: websocket xhr-streaming xdr-
    streaming iframe-eventsource iframe-htmlfile
    xhr-polling xdr-polling iframe-xhr-polling jsonp-
    polling
●   Requires
     Client side: sockjs.js
     Server side: SockJS server side library
WebSocket vs SockJS
WebSocket                                        SockJS
<script>                                         <script>
var sock = new WebSocket('ws://domain/my_ws');   var sock = new SockJS('http://domain/my_prefix');
sock.onopen = function() {                       sock.onopen = function() {
 console.log('open');                             console.log('open');
};                                               };
sock.onmessage = function(e) {                   sock.onmessage = function(e) {
 console.log('message', e.data);                  console.log('message', e.data);
};                                               };
sock.onclose = function() {                      sock.onclose = function() {
 console.log('close');                            console.log('close');
};                                               };
</script>                                        </script>
Links
●   Client side:
    <script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
    https://github.com/sockjs/sockjs-client
●   Server side:
    Node.js: https://github.com/sockjs/sockjs-node
    Ruby: https://github.com/sockjs/sockjs-ruby
    Python: https://github.com/MrJoes/sockjs-tornado
    JVM:
     https://github.com/vert-x/vert.x
     https://github.com/ngocdaothanh/xitrum
    etc.
Links
●   Client side:
    <script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
    https://github.com/sockjs/sockjs-client
●   Server side:
    Node.js: https://github.com/sockjs/sockjs-node
    Ruby: https://github.com/sockjs/sockjs-ruby
    Python: https://github.com/MrJoes/sockjs-tornado
    JVM:
     https://github.com/vert-x/vert.x
     https://github.com/ngocdaothanh/xitrum
    etc.
Demo
https://github.com/sockjs/sockjs-node/tree/master/examples/echo
git clone git://github.com/sockjs/sockjs-node.git
cd sockjs-node/examples/echo
npm install
node server.js
SockJS protocol
If you want to implement a server side for SockJS,
or just want to know how SockJS works:
https://github.com/sockjs/sockjs-protocol
http://sockjs.github.com/sockjs-protocol/sockjs-protocol-0.3.3.html
SockJS vs Socket.IO
●   Socket.IO ≈ SockJS + α
●   SockJS is way simpler, closer to WebSocket
    => SockJS has lots of server side
    implementations for many languages

More Related Content

Viewers also liked

Using SockJS(Websocket) with Sencha Ext JS
Using SockJS(Websocket) with Sencha Ext JSUsing SockJS(Websocket) with Sencha Ext JS
Using SockJS(Websocket) with Sencha Ext JSKazuhiro Kotsutsumi
 
Spring + WebSocket integration
Spring + WebSocket integrationSpring + WebSocket integration
Spring + WebSocket integrationOleksandr Semenov
 
Spring Boot & WebSocket
Spring Boot & WebSocketSpring Boot & WebSocket
Spring Boot & WebSocketMing-Ying Wu
 
Client-OT в действии
Client-OT в действииClient-OT в действии
Client-OT в действииmyoffice_ru
 
Sometimes web sockets_dont_work
Sometimes web sockets_dont_workSometimes web sockets_dont_work
Sometimes web sockets_dont_workXMPPUK
 
Blending django, Sockjs, Twisted, Celery, FTP and some magic sauce into a bla...
Blending django, Sockjs, Twisted, Celery, FTP and some magic sauce into a bla...Blending django, Sockjs, Twisted, Celery, FTP and some magic sauce into a bla...
Blending django, Sockjs, Twisted, Celery, FTP and some magic sauce into a bla...frog32
 
Максим Сабарня и Иван Дрижирук “Vert.x – tool-kit for building reactive app...
 	Максим Сабарня и Иван Дрижирук “Vert.x – tool-kit for building reactive app... 	Максим Сабарня и Иван Дрижирук “Vert.x – tool-kit for building reactive app...
Максим Сабарня и Иван Дрижирук “Vert.x – tool-kit for building reactive app...Anna Shymchenko
 
Big Data - Linked In_DEEPU
Big Data - Linked In_DEEPUBig Data - Linked In_DEEPU
Big Data - Linked In_DEEPUDeepu M
 
Realtime web application with java
Realtime web application with javaRealtime web application with java
Realtime web application with javaJeongHun Byeon
 
Vert.x using Groovy - Simplifying non-blocking code
Vert.x using Groovy - Simplifying non-blocking codeVert.x using Groovy - Simplifying non-blocking code
Vert.x using Groovy - Simplifying non-blocking codesascha_klein
 
Xitrum @ Scala Matsuri Tokyo 2014
Xitrum @ Scala Matsuri Tokyo 2014Xitrum @ Scala Matsuri Tokyo 2014
Xitrum @ Scala Matsuri Tokyo 2014Ngoc Dao
 
Xitrum HOWTOs
Xitrum HOWTOsXitrum HOWTOs
Xitrum HOWTOsNgoc Dao
 
How to write a web framework
How to write a web frameworkHow to write a web framework
How to write a web frameworkNgoc Dao
 

Viewers also liked (20)

Using SockJS(Websocket) with Sencha Ext JS
Using SockJS(Websocket) with Sencha Ext JSUsing SockJS(Websocket) with Sencha Ext JS
Using SockJS(Websocket) with Sencha Ext JS
 
Websockets and SockJS, Real time chatting
Websockets and SockJS, Real time chattingWebsockets and SockJS, Real time chatting
Websockets and SockJS, Real time chatting
 
WebSockets with Spring 4
WebSockets with Spring 4WebSockets with Spring 4
WebSockets with Spring 4
 
Spring + WebSocket integration
Spring + WebSocket integrationSpring + WebSocket integration
Spring + WebSocket integration
 
Spring Boot & WebSocket
Spring Boot & WebSocketSpring Boot & WebSocket
Spring Boot & WebSocket
 
Client-OT в действии
Client-OT в действииClient-OT в действии
Client-OT в действии
 
Sometimes web sockets_dont_work
Sometimes web sockets_dont_workSometimes web sockets_dont_work
Sometimes web sockets_dont_work
 
Blending django, Sockjs, Twisted, Celery, FTP and some magic sauce into a bla...
Blending django, Sockjs, Twisted, Celery, FTP and some magic sauce into a bla...Blending django, Sockjs, Twisted, Celery, FTP and some magic sauce into a bla...
Blending django, Sockjs, Twisted, Celery, FTP and some magic sauce into a bla...
 
Максим Сабарня и Иван Дрижирук “Vert.x – tool-kit for building reactive app...
 	Максим Сабарня и Иван Дрижирук “Vert.x – tool-kit for building reactive app... 	Максим Сабарня и Иван Дрижирук “Vert.x – tool-kit for building reactive app...
Максим Сабарня и Иван Дрижирук “Vert.x – tool-kit for building reactive app...
 
Big Data - Linked In_DEEPU
Big Data - Linked In_DEEPUBig Data - Linked In_DEEPU
Big Data - Linked In_DEEPU
 
Vert.x
Vert.xVert.x
Vert.x
 
Realtime web application with java
Realtime web application with javaRealtime web application with java
Realtime web application with java
 
Vert.x using Groovy - Simplifying non-blocking code
Vert.x using Groovy - Simplifying non-blocking codeVert.x using Groovy - Simplifying non-blocking code
Vert.x using Groovy - Simplifying non-blocking code
 
Vert.x 3
Vert.x 3Vert.x 3
Vert.x 3
 
WebSockets and Java
WebSockets and JavaWebSockets and Java
WebSockets and Java
 
Vert.x
Vert.xVert.x
Vert.x
 
Vert.x devoxx london 2013
Vert.x devoxx london 2013Vert.x devoxx london 2013
Vert.x devoxx london 2013
 
Xitrum @ Scala Matsuri Tokyo 2014
Xitrum @ Scala Matsuri Tokyo 2014Xitrum @ Scala Matsuri Tokyo 2014
Xitrum @ Scala Matsuri Tokyo 2014
 
Xitrum HOWTOs
Xitrum HOWTOsXitrum HOWTOs
Xitrum HOWTOs
 
How to write a web framework
How to write a web frameworkHow to write a web framework
How to write a web framework
 

Similar to SockJS Intro

Nodejs and WebSockets
Nodejs and WebSocketsNodejs and WebSockets
Nodejs and WebSocketsGonzalo Ayuso
 
Introduction to Vert.x
Introduction to Vert.xIntroduction to Vert.x
Introduction to Vert.xYiguang Hu
 
soft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.jssoft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.jssoft-shake.ch
 
Event-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineEvent-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineRicardo Silva
 
GWT Web Socket and data serialization
GWT Web Socket and data serializationGWT Web Socket and data serialization
GWT Web Socket and data serializationGWTcon
 
An opinionated intro to Node.js - devrupt hospitality hackathon
An opinionated intro to Node.js - devrupt hospitality hackathonAn opinionated intro to Node.js - devrupt hospitality hackathon
An opinionated intro to Node.js - devrupt hospitality hackathonLuciano Mammino
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?Remy Sharp
 
KSDG-iSlide App 開發心得分享
KSDG-iSlide App 開發心得分享KSDG-iSlide App 開發心得分享
KSDG-iSlide App 開發心得分享Chia Wei Tsai
 
Going realtime with Socket.IO
Going realtime with Socket.IOGoing realtime with Socket.IO
Going realtime with Socket.IOChristian Joudrey
 
Writing robust Node.js applications
Writing robust Node.js applicationsWriting robust Node.js applications
Writing robust Node.js applicationsTom Croucher
 
Websockets talk at Rubyconf Uruguay 2010
Websockets talk at Rubyconf Uruguay 2010Websockets talk at Rubyconf Uruguay 2010
Websockets talk at Rubyconf Uruguay 2010Ismael Celis
 
What's new in Java EE 7? From HTML5 to JMS 2.0
What's new in Java EE 7? From HTML5 to JMS 2.0What's new in Java EE 7? From HTML5 to JMS 2.0
What's new in Java EE 7? From HTML5 to JMS 2.0Bruno Borges
 
Plack perl superglue for web frameworks and servers
Plack perl superglue for web frameworks and serversPlack perl superglue for web frameworks and servers
Plack perl superglue for web frameworks and serversTatsuhiko Miyagawa
 
Node.js - A practical introduction (v2)
Node.js  - A practical introduction (v2)Node.js  - A practical introduction (v2)
Node.js - A practical introduction (v2)Felix Geisendörfer
 

Similar to SockJS Intro (20)

Nodejs and WebSockets
Nodejs and WebSocketsNodejs and WebSockets
Nodejs and WebSockets
 
Introduction to Vert.x
Introduction to Vert.xIntroduction to Vert.x
Introduction to Vert.x
 
soft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.jssoft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.js
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
 
Event-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineEvent-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 Engine
 
GWT Web Socket and data serialization
GWT Web Socket and data serializationGWT Web Socket and data serialization
GWT Web Socket and data serialization
 
An opinionated intro to Node.js - devrupt hospitality hackathon
An opinionated intro to Node.js - devrupt hospitality hackathonAn opinionated intro to Node.js - devrupt hospitality hackathon
An opinionated intro to Node.js - devrupt hospitality hackathon
 
5.node js
5.node js5.node js
5.node js
 
Socket.IO
Socket.IOSocket.IO
Socket.IO
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?
 
KSDG-iSlide App 開發心得分享
KSDG-iSlide App 開發心得分享KSDG-iSlide App 開發心得分享
KSDG-iSlide App 開發心得分享
 
Going realtime with Socket.IO
Going realtime with Socket.IOGoing realtime with Socket.IO
Going realtime with Socket.IO
 
Writing robust Node.js applications
Writing robust Node.js applicationsWriting robust Node.js applications
Writing robust Node.js applications
 
Server Side Swift: Vapor
Server Side Swift: VaporServer Side Swift: Vapor
Server Side Swift: Vapor
 
Serverless Java on Kubernetes
Serverless Java on KubernetesServerless Java on Kubernetes
Serverless Java on Kubernetes
 
Websockets talk at Rubyconf Uruguay 2010
Websockets talk at Rubyconf Uruguay 2010Websockets talk at Rubyconf Uruguay 2010
Websockets talk at Rubyconf Uruguay 2010
 
What's new in Java EE 7? From HTML5 to JMS 2.0
What's new in Java EE 7? From HTML5 to JMS 2.0What's new in Java EE 7? From HTML5 to JMS 2.0
What's new in Java EE 7? From HTML5 to JMS 2.0
 
Plack perl superglue for web frameworks and servers
Plack perl superglue for web frameworks and serversPlack perl superglue for web frameworks and servers
Plack perl superglue for web frameworks and servers
 
NodeJS
NodeJSNodeJS
NodeJS
 
Node.js - A practical introduction (v2)
Node.js  - A practical introduction (v2)Node.js  - A practical introduction (v2)
Node.js - A practical introduction (v2)
 

More from Ngoc Dao

Model with actors and implement with Akka
Model with actors and implement with AkkaModel with actors and implement with Akka
Model with actors and implement with AkkaNgoc Dao
 
I18nize Scala programs à la gettext
I18nize Scala programs à la gettextI18nize Scala programs à la gettext
I18nize Scala programs à la gettextNgoc Dao
 
Develop realtime web with Scala and Xitrum
Develop realtime web with Scala and XitrumDevelop realtime web with Scala and Xitrum
Develop realtime web with Scala and XitrumNgoc Dao
 
BIG DATA サービス と ツール
BIG DATA サービス と ツールBIG DATA サービス と ツール
BIG DATA サービス と ツールNgoc Dao
 
Actor-based concurrency and Akka Fundamentals
Actor-based concurrency and Akka FundamentalsActor-based concurrency and Akka Fundamentals
Actor-based concurrency and Akka FundamentalsNgoc Dao
 
Xitrum @ Scala Conference in Japan 2013
Xitrum @ Scala Conference in Japan 2013Xitrum @ Scala Conference in Japan 2013
Xitrum @ Scala Conference in Japan 2013Ngoc Dao
 
Easy distributed load test with Tsung
Easy distributed load test with TsungEasy distributed load test with Tsung
Easy distributed load test with TsungNgoc Dao
 
How to start using Scala
How to start using ScalaHow to start using Scala
How to start using ScalaNgoc Dao
 
Cloud Erlang
Cloud ErlangCloud Erlang
Cloud ErlangNgoc Dao
 
Xitrum internals
Xitrum internalsXitrum internals
Xitrum internalsNgoc Dao
 
Những lỗi bảo mật web thường gặp ở phần application
Những lỗi bảo mật web thường gặp ở phần applicationNhững lỗi bảo mật web thường gặp ở phần application
Những lỗi bảo mật web thường gặp ở phần applicationNgoc Dao
 
Erlang Web
Erlang WebErlang Web
Erlang WebNgoc Dao
 
Nitrogen Web Framework
Nitrogen Web FrameworkNitrogen Web Framework
Nitrogen Web FrameworkNgoc Dao
 
スポイトができるまで
スポイトができるまでスポイトができるまで
スポイトができるまでNgoc Dao
 
Camellia General
Camellia GeneralCamellia General
Camellia GeneralNgoc Dao
 
Nhập môn BDD
Nhập môn BDDNhập môn BDD
Nhập môn BDDNgoc Dao
 
何でRuby
何でRuby何でRuby
何でRubyNgoc Dao
 
Sinh hoat CLB tin hoc Komaba lan 2 - Phat bieu cua Ngoc
Sinh hoat CLB tin hoc Komaba lan 2 - Phat bieu cua NgocSinh hoat CLB tin hoc Komaba lan 2 - Phat bieu cua Ngoc
Sinh hoat CLB tin hoc Komaba lan 2 - Phat bieu cua NgocNgoc Dao
 
Sinh hoat CLB tin hoc Komaba lan 1 - Phat bieu cua G
Sinh hoat CLB tin hoc Komaba lan 1 - Phat bieu cua GSinh hoat CLB tin hoc Komaba lan 1 - Phat bieu cua G
Sinh hoat CLB tin hoc Komaba lan 1 - Phat bieu cua GNgoc Dao
 
Sinh hoat CLB tin hoc Komaba lan 1 - Phat bieu cua Ngoc
Sinh hoat CLB tin hoc Komaba lan 1 - Phat bieu cua NgocSinh hoat CLB tin hoc Komaba lan 1 - Phat bieu cua Ngoc
Sinh hoat CLB tin hoc Komaba lan 1 - Phat bieu cua NgocNgoc Dao
 

More from Ngoc Dao (20)

Model with actors and implement with Akka
Model with actors and implement with AkkaModel with actors and implement with Akka
Model with actors and implement with Akka
 
I18nize Scala programs à la gettext
I18nize Scala programs à la gettextI18nize Scala programs à la gettext
I18nize Scala programs à la gettext
 
Develop realtime web with Scala and Xitrum
Develop realtime web with Scala and XitrumDevelop realtime web with Scala and Xitrum
Develop realtime web with Scala and Xitrum
 
BIG DATA サービス と ツール
BIG DATA サービス と ツールBIG DATA サービス と ツール
BIG DATA サービス と ツール
 
Actor-based concurrency and Akka Fundamentals
Actor-based concurrency and Akka FundamentalsActor-based concurrency and Akka Fundamentals
Actor-based concurrency and Akka Fundamentals
 
Xitrum @ Scala Conference in Japan 2013
Xitrum @ Scala Conference in Japan 2013Xitrum @ Scala Conference in Japan 2013
Xitrum @ Scala Conference in Japan 2013
 
Easy distributed load test with Tsung
Easy distributed load test with TsungEasy distributed load test with Tsung
Easy distributed load test with Tsung
 
How to start using Scala
How to start using ScalaHow to start using Scala
How to start using Scala
 
Cloud Erlang
Cloud ErlangCloud Erlang
Cloud Erlang
 
Xitrum internals
Xitrum internalsXitrum internals
Xitrum internals
 
Những lỗi bảo mật web thường gặp ở phần application
Những lỗi bảo mật web thường gặp ở phần applicationNhững lỗi bảo mật web thường gặp ở phần application
Những lỗi bảo mật web thường gặp ở phần application
 
Erlang Web
Erlang WebErlang Web
Erlang Web
 
Nitrogen Web Framework
Nitrogen Web FrameworkNitrogen Web Framework
Nitrogen Web Framework
 
スポイトができるまで
スポイトができるまでスポイトができるまで
スポイトができるまで
 
Camellia General
Camellia GeneralCamellia General
Camellia General
 
Nhập môn BDD
Nhập môn BDDNhập môn BDD
Nhập môn BDD
 
何でRuby
何でRuby何でRuby
何でRuby
 
Sinh hoat CLB tin hoc Komaba lan 2 - Phat bieu cua Ngoc
Sinh hoat CLB tin hoc Komaba lan 2 - Phat bieu cua NgocSinh hoat CLB tin hoc Komaba lan 2 - Phat bieu cua Ngoc
Sinh hoat CLB tin hoc Komaba lan 2 - Phat bieu cua Ngoc
 
Sinh hoat CLB tin hoc Komaba lan 1 - Phat bieu cua G
Sinh hoat CLB tin hoc Komaba lan 1 - Phat bieu cua GSinh hoat CLB tin hoc Komaba lan 1 - Phat bieu cua G
Sinh hoat CLB tin hoc Komaba lan 1 - Phat bieu cua G
 
Sinh hoat CLB tin hoc Komaba lan 1 - Phat bieu cua Ngoc
Sinh hoat CLB tin hoc Komaba lan 1 - Phat bieu cua NgocSinh hoat CLB tin hoc Komaba lan 1 - Phat bieu cua Ngoc
Sinh hoat CLB tin hoc Komaba lan 1 - Phat bieu cua Ngoc
 

SockJS Intro

  • 1. SockJS Intro Ngoc Dao
  • 2. Do you know WebSocket?
  • 3. WebSocket <script> var sock = new WebSocket('ws://domain/my_prefix'); sock.onopen = function() { console.log('open'); }; sock.onmessage = function(e) { console.log('message', e.data); }; sock.onclose = function() { console.log('close'); Server can push data }; to browsers when it wants </script>
  • 4. WebSocket New browsers are required: ● Internet Explorer: 10 ● Firefox: 6 ● Chrome: 4 ● Safari: 5 ● Opera: 12.10
  • 5. SockJS ● Provides WebSocket-like API ● Supports all browsers, e.g. IE 6 ● Transports: websocket xhr-streaming xdr- streaming iframe-eventsource iframe-htmlfile xhr-polling xdr-polling iframe-xhr-polling jsonp- polling ● Requires Client side: sockjs.js Server side: SockJS server side library
  • 6. WebSocket vs SockJS WebSocket SockJS <script> <script> var sock = new WebSocket('ws://domain/my_ws'); var sock = new SockJS('http://domain/my_prefix'); sock.onopen = function() { sock.onopen = function() { console.log('open'); console.log('open'); }; }; sock.onmessage = function(e) { sock.onmessage = function(e) { console.log('message', e.data); console.log('message', e.data); }; }; sock.onclose = function() { sock.onclose = function() { console.log('close'); console.log('close'); }; }; </script> </script>
  • 7. Links ● Client side: <script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script> https://github.com/sockjs/sockjs-client ● Server side: Node.js: https://github.com/sockjs/sockjs-node Ruby: https://github.com/sockjs/sockjs-ruby Python: https://github.com/MrJoes/sockjs-tornado JVM: https://github.com/vert-x/vert.x https://github.com/ngocdaothanh/xitrum etc.
  • 8. Links ● Client side: <script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script> https://github.com/sockjs/sockjs-client ● Server side: Node.js: https://github.com/sockjs/sockjs-node Ruby: https://github.com/sockjs/sockjs-ruby Python: https://github.com/MrJoes/sockjs-tornado JVM: https://github.com/vert-x/vert.x https://github.com/ngocdaothanh/xitrum etc.
  • 10. SockJS protocol If you want to implement a server side for SockJS, or just want to know how SockJS works: https://github.com/sockjs/sockjs-protocol http://sockjs.github.com/sockjs-protocol/sockjs-protocol-0.3.3.html
  • 11. SockJS vs Socket.IO ● Socket.IO ≈ SockJS + α ● SockJS is way simpler, closer to WebSocket => SockJS has lots of server side implementations for many languages