SlideShare a Scribd company logo
Ruby on Rails &
WebSocket
Le Hoai Phuong
Nguyen Huy Hung Hoang Van Quan
Cao Duy Khanh Vu Van Chuyen
Timeless
● WebSocket Overview
● Benefit
● How does WS work?
● Pros & Cons
● WebSocket on Rails
● Summary
Content
WebSocket Overview
● Full-duplex channels over a single TCP
connection
● Was standardized in 2011
● Use an HTTP Upgrade request for
handshaking
Upgrade Request
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat
Client Request
Server Response
WebSocket Benefit
● Overhead of HTTP
○ 1 HTTP request/response Header: 871 bytes
○ 1 WS frame: 2 bytes
● Low Latency
How does it work?
Pros & Cons
● Pros
○ Realtime
○ Lightweight
○ Low latency
○ Full duplex
● Cons
○ Still in working progress
○ Not suitable for streaming large data (HD video)
○ Hard to control multi-channels
WebSocket on Rails
● Web server
○ Event Based
○ or Client WS simulation using JavaScript
● Many gems: websocket-rails, em-websocket,
evma_httpserver
Reactor pattern
Request
EventMachine
(demultiplexer
- dispatcher)
Thin
(Web Server)
Rack Rails
adapter
Rack Thin
handler
Rails
A demo coding with gem websocket-rails
Summary
● Realtime
● New
● Lightweight
● Full duplex
Timeless - Websocket on Rails

More Related Content

What's hot

REST in the shade of WCF
REST in the shade of WCFREST in the shade of WCF
REST in the shade of WCF
SzymonPobiega
 
DEV301- Web Service Programming with WCF 3.5
DEV301- Web Service Programming with WCF 3.5DEV301- Web Service Programming with WCF 3.5
DEV301- Web Service Programming with WCF 3.5
Eyal Vardi
 
Building+restful+webservice
Building+restful+webserviceBuilding+restful+webservice
Building+restful+webservice
lonegunman
 
Seting Database Dreamveaver
Seting Database DreamveaverSeting Database Dreamveaver
Seting Database Dreamveaver
Don Komo Studio
 
Programming WebSockets - April 20 2010
Programming WebSockets - April 20 2010Programming WebSockets - April 20 2010
Programming WebSockets - April 20 2010
sullis
 

What's hot (20)

REST in the shade of WCF
REST in the shade of WCFREST in the shade of WCF
REST in the shade of WCF
 
Writing services in Ballerina_Ballerina Day CMB 2018
Writing services in Ballerina_Ballerina Day CMB 2018Writing services in Ballerina_Ballerina Day CMB 2018
Writing services in Ballerina_Ballerina Day CMB 2018
 
Synchronous communication using jms back channel
Synchronous communication using jms back channelSynchronous communication using jms back channel
Synchronous communication using jms back channel
 
HTTP2 is Here!
HTTP2 is Here!HTTP2 is Here!
HTTP2 is Here!
 
Getting the most out of WebPageTest
Getting the most out of WebPageTestGetting the most out of WebPageTest
Getting the most out of WebPageTest
 
Web performance across the HTTP to HTTPS transition
Web performance across the HTTP to HTTPS transitionWeb performance across the HTTP to HTTPS transition
Web performance across the HTTP to HTTPS transition
 
Websocket protocol overview
Websocket protocol overviewWebsocket protocol overview
Websocket protocol overview
 
COMET in Plone
COMET in PloneCOMET in Plone
COMET in Plone
 
DEV301- Web Service Programming with WCF 3.5
DEV301- Web Service Programming with WCF 3.5DEV301- Web Service Programming with WCF 3.5
DEV301- Web Service Programming with WCF 3.5
 
Scaling Front-End Performance - Velocity 2016
Scaling Front-End Performance - Velocity 2016Scaling Front-End Performance - Velocity 2016
Scaling Front-End Performance - Velocity 2016
 
WebSockets - Today, in the Past, in Future and in Production.
WebSockets - Today, in the Past, in Future and in Production.WebSockets - Today, in the Past, in Future and in Production.
WebSockets - Today, in the Past, in Future and in Production.
 
Building+restful+webservice
Building+restful+webserviceBuilding+restful+webservice
Building+restful+webservice
 
Seting Database Dreamveaver
Seting Database DreamveaverSeting Database Dreamveaver
Seting Database Dreamveaver
 
JUG louvain websockets
JUG louvain websocketsJUG louvain websockets
JUG louvain websockets
 
Programming WebSockets - April 20 2010
Programming WebSockets - April 20 2010Programming WebSockets - April 20 2010
Programming WebSockets - April 20 2010
 
Spring + WebSocket integration
Spring + WebSocket integrationSpring + WebSocket integration
Spring + WebSocket integration
 
Stored procedure in Mule
Stored procedure in MuleStored procedure in Mule
Stored procedure in Mule
 
Rails hosting
Rails hostingRails hosting
Rails hosting
 
Plone Web Services
Plone Web ServicesPlone Web Services
Plone Web Services
 
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
 

Viewers also liked (7)

Game Development with Pygame
Game Development with PygameGame Development with Pygame
Game Development with Pygame
 
CSS3 Lovers, Gather Together
CSS3 Lovers, Gather TogetherCSS3 Lovers, Gather Together
CSS3 Lovers, Gather Together
 
Dreamers defense
Dreamers defenseDreamers defense
Dreamers defense
 
Racer Mice - Game Team
Racer Mice - Game TeamRacer Mice - Game Team
Racer Mice - Game Team
 
Introduction to JRuby And JRuby on Rails
Introduction to JRuby And JRuby on RailsIntroduction to JRuby And JRuby on Rails
Introduction to JRuby And JRuby on Rails
 
Some ways to DRY in Rails
Some ways to DRY in Rails Some ways to DRY in Rails
Some ways to DRY in Rails
 
Functional Programming With Elixir
Functional Programming With ElixirFunctional Programming With Elixir
Functional Programming With Elixir
 

Similar to Timeless - Websocket on Rails

Interactive web. O rly?
Interactive web. O rly?Interactive web. O rly?
Interactive web. O rly?
timbc
 
Article http over transport protocols
Article   http over transport protocolsArticle   http over transport protocols
Article http over transport protocols
Icaro Camelo
 

Similar to Timeless - Websocket on Rails (20)

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
 
HTTP
HTTPHTTP
HTTP
 
Java EE 8: What Servlet 4.0 and HTTP/2 mean to you
Java EE 8: What Servlet 4.0 and HTTP/2 mean to youJava EE 8: What Servlet 4.0 and HTTP/2 mean to you
Java EE 8: What Servlet 4.0 and HTTP/2 mean to you
 
Introduction to HTTP/2
Introduction to HTTP/2Introduction to HTTP/2
Introduction to HTTP/2
 
Http smuggling 1 200523064027
Http smuggling 1 200523064027Http smuggling 1 200523064027
Http smuggling 1 200523064027
 
HTTP Request Smuggling
HTTP Request SmugglingHTTP Request Smuggling
HTTP Request Smuggling
 
Http2 kotlin
Http2   kotlinHttp2   kotlin
Http2 kotlin
 
Using Communication and Messaging API in the HTML5 World
Using Communication and Messaging API in the HTML5 WorldUsing Communication and Messaging API in the HTML5 World
Using Communication and Messaging API in the HTML5 World
 
WebSockets On Fire
WebSockets On FireWebSockets On Fire
WebSockets On Fire
 
SPDY - or maybe HTTP2.0
SPDY - or maybe HTTP2.0SPDY - or maybe HTTP2.0
SPDY - or maybe HTTP2.0
 
Cleaning Up the Dirt of the Nineties - How New Protocols are Modernizing the Web
Cleaning Up the Dirt of the Nineties - How New Protocols are Modernizing the WebCleaning Up the Dirt of the Nineties - How New Protocols are Modernizing the Web
Cleaning Up the Dirt of the Nineties - How New Protocols are Modernizing the Web
 
Ws
WsWs
Ws
 
Http/2
Http/2Http/2
Http/2
 
Interactive web. O rly?
Interactive web. O rly?Interactive web. O rly?
Interactive web. O rly?
 
Websocket
WebsocketWebsocket
Websocket
 
Article http over transport protocols
Article   http over transport protocolsArticle   http over transport protocols
Article http over transport protocols
 
Hypertext Transfer Protocol
Hypertext Transfer ProtocolHypertext Transfer Protocol
Hypertext Transfer Protocol
 
HTTP/2 for Developers
HTTP/2 for DevelopersHTTP/2 for Developers
HTTP/2 for Developers
 
SPDY
SPDYSPDY
SPDY
 
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)
 

More from Framgia Vietnam

Build public private cloud using openstack
Build public private cloud using openstackBuild public private cloud using openstack
Build public private cloud using openstack
Framgia Vietnam
 
Create 3D objects insite Cocos2d-x
Create 3D objects insite Cocos2d-xCreate 3D objects insite Cocos2d-x
Create 3D objects insite Cocos2d-x
Framgia Vietnam
 
View, Store Procedure & Function and Trigger in MySQL - Thaipt
View, Store Procedure & Function and Trigger in MySQL - ThaiptView, Store Procedure & Function and Trigger in MySQL - Thaipt
View, Store Procedure & Function and Trigger in MySQL - Thaipt
Framgia Vietnam
 
Organize directories for applications with front-end and back-end with yii - ...
Organize directories for applications with front-end and back-end with yii - ...Organize directories for applications with front-end and back-end with yii - ...
Organize directories for applications with front-end and back-end with yii - ...
Framgia Vietnam
 
What is new in PHP 5.5 - HuyenNT
What is new in PHP 5.5 - HuyenNTWhat is new in PHP 5.5 - HuyenNT
What is new in PHP 5.5 - HuyenNT
Framgia Vietnam
 
Audited activerecord - QuanHV
Audited activerecord - QuanHVAudited activerecord - QuanHV
Audited activerecord - QuanHV
Framgia Vietnam
 
Client side validations gem - KhanhHD
Client side validations gem - KhanhHDClient side validations gem - KhanhHD
Client side validations gem - KhanhHD
Framgia Vietnam
 
Backbone.js and rails - BanLV
Backbone.js and rails - BanLVBackbone.js and rails - BanLV
Backbone.js and rails - BanLV
Framgia Vietnam
 
Jenkins and rails app - Le Dinh Vu
Jenkins and rails app - Le Dinh VuJenkins and rails app - Le Dinh Vu
Jenkins and rails app - Le Dinh Vu
Framgia Vietnam
 
Canvas in html5 - TungVD
Canvas in html5 - TungVDCanvas in html5 - TungVD
Canvas in html5 - TungVD
Framgia Vietnam
 
Memory management in cocos2d x - Le Duy Vu
Memory management in cocos2d x - Le Duy VuMemory management in cocos2d x - Le Duy Vu
Memory management in cocos2d x - Le Duy Vu
Framgia Vietnam
 
JMS and ActiveMQ - VuNV 201307
JMS and ActiveMQ - VuNV 201307JMS and ActiveMQ - VuNV 201307
JMS and ActiveMQ - VuNV 201307
Framgia Vietnam
 

More from Framgia Vietnam (20)

Java 8 new features
Java 8 new features Java 8 new features
Java 8 new features
 
Build public private cloud using openstack
Build public private cloud using openstackBuild public private cloud using openstack
Build public private cloud using openstack
 
HTML5 DRAG AND DROP
HTML5 DRAG AND DROPHTML5 DRAG AND DROP
HTML5 DRAG AND DROP
 
Create 3D objects insite Cocos2d-x
Create 3D objects insite Cocos2d-xCreate 3D objects insite Cocos2d-x
Create 3D objects insite Cocos2d-x
 
View, Store Procedure & Function and Trigger in MySQL - Thaipt
View, Store Procedure & Function and Trigger in MySQL - ThaiptView, Store Procedure & Function and Trigger in MySQL - Thaipt
View, Store Procedure & Function and Trigger in MySQL - Thaipt
 
Organize directories for applications with front-end and back-end with yii - ...
Organize directories for applications with front-end and back-end with yii - ...Organize directories for applications with front-end and back-end with yii - ...
Organize directories for applications with front-end and back-end with yii - ...
 
What is new in PHP 5.5 - HuyenNT
What is new in PHP 5.5 - HuyenNTWhat is new in PHP 5.5 - HuyenNT
What is new in PHP 5.5 - HuyenNT
 
An idea - NghiaLV
An idea - NghiaLVAn idea - NghiaLV
An idea - NghiaLV
 
Audited activerecord - QuanHV
Audited activerecord - QuanHVAudited activerecord - QuanHV
Audited activerecord - QuanHV
 
Delegate - KhanhLD
Delegate - KhanhLDDelegate - KhanhLD
Delegate - KhanhLD
 
Client side validations gem - KhanhHD
Client side validations gem - KhanhHDClient side validations gem - KhanhHD
Client side validations gem - KhanhHD
 
Backbone.js and rails - BanLV
Backbone.js and rails - BanLVBackbone.js and rails - BanLV
Backbone.js and rails - BanLV
 
Jenkins and rails app - Le Dinh Vu
Jenkins and rails app - Le Dinh VuJenkins and rails app - Le Dinh Vu
Jenkins and rails app - Le Dinh Vu
 
Canvas in html5 - TungVD
Canvas in html5 - TungVDCanvas in html5 - TungVD
Canvas in html5 - TungVD
 
Auto it - AnhPC
Auto it - AnhPCAuto it - AnhPC
Auto it - AnhPC
 
Memory management in cocos2d x - Le Duy Vu
Memory management in cocos2d x - Le Duy VuMemory management in cocos2d x - Le Duy Vu
Memory management in cocos2d x - Le Duy Vu
 
JMS and ActiveMQ - VuNV 201307
JMS and ActiveMQ - VuNV 201307JMS and ActiveMQ - VuNV 201307
JMS and ActiveMQ - VuNV 201307
 
Jquery validate - TuanNA
Jquery validate - TuanNAJquery validate - TuanNA
Jquery validate - TuanNA
 
Continuous integration - ThangTD
Continuous integration - ThangTDContinuous integration - ThangTD
Continuous integration - ThangTD
 
Seminar globalize3 - DungNV
Seminar globalize3 - DungNVSeminar globalize3 - DungNV
Seminar globalize3 - DungNV
 

Recently uploaded

Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
Bhaskar Mitra
 

Recently uploaded (20)

Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 
In-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT ProfessionalsIn-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT Professionals
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
 
НАДІЯ ФЕДЮШКО БАЦ «Професійне зростання QA спеціаліста»
НАДІЯ ФЕДЮШКО БАЦ  «Професійне зростання QA спеціаліста»НАДІЯ ФЕДЮШКО БАЦ  «Професійне зростання QA спеціаліста»
НАДІЯ ФЕДЮШКО БАЦ «Професійне зростання QA спеціаліста»
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 

Timeless - Websocket on Rails

  • 1. Ruby on Rails & WebSocket Le Hoai Phuong Nguyen Huy Hung Hoang Van Quan Cao Duy Khanh Vu Van Chuyen Timeless
  • 2. ● WebSocket Overview ● Benefit ● How does WS work? ● Pros & Cons ● WebSocket on Rails ● Summary Content
  • 3. WebSocket Overview ● Full-duplex channels over a single TCP connection ● Was standardized in 2011 ● Use an HTTP Upgrade request for handshaking
  • 4. Upgrade Request GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 Origin: http://example.com HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat Client Request Server Response
  • 5. WebSocket Benefit ● Overhead of HTTP ○ 1 HTTP request/response Header: 871 bytes ○ 1 WS frame: 2 bytes ● Low Latency
  • 6.
  • 7. How does it work?
  • 8. Pros & Cons ● Pros ○ Realtime ○ Lightweight ○ Low latency ○ Full duplex ● Cons ○ Still in working progress ○ Not suitable for streaming large data (HD video) ○ Hard to control multi-channels
  • 9. WebSocket on Rails ● Web server ○ Event Based ○ or Client WS simulation using JavaScript ● Many gems: websocket-rails, em-websocket, evma_httpserver
  • 10. Reactor pattern Request EventMachine (demultiplexer - dispatcher) Thin (Web Server) Rack Rails adapter Rack Thin handler Rails
  • 11. A demo coding with gem websocket-rails
  • 12. Summary ● Realtime ● New ● Lightweight ● Full duplex