SlideShare uma empresa Scribd logo
1 de 13
Baixar para ler offline
Meetup 2
Socket IO Real Time Applications
WIFI
Who Are We
Eddy
@eddydkim
eddy@drumbi.com
Farsheed
@captainatef
farsheed@drumbi.com
Overview
Last Meetup Recap
Why Node JS
Javascript Intro
Today
Realtime Web Application Aches
Socket IO Cure
Examples
Real Time Web Applications
Pretty Moving Graphs
Feeds (Twitter, News, etc.)
Chatrooms
Html5 Multiplayer Games
Limitations of HTML
HTML Designed for Request/Response
1. Browser -> Server
2. Server -> Browser
3. Repeat
Solutions
HTML Protocol Hacks:
● Short Polling
● Long Polling
○ <script>
○ AJAX Long Polling
● Streaming
○ XMLHttpRequest Multipart Chunks
○ Forever Iframe
Problems with Hacks
● HTTP Overhead for many small updates
● Resource Waste in opening and closing
connections
● Latency Overhead
● Different Implementations for Each Browser
WebSockets To Rescue!
● Full Web Standard
designed for two way
communication
● Minimal Overhead for each
message
● Most Modern Browsers
Support it
WebSocket Limitations
● HTTP Upgrade
Handshake Breaks some
older Proxies
● Many Gateways, Load
Balancers, Reverse
Proxies Servers dont
support websocket
● Some Firewalls block
Websockets
Socket IO Got You Covered
Socket IO Real Time
Communication Library for both
server and client
● Abstract Layer over Multiple
Transports
○ Long Polling
○ Streaming
○ Websockets
○ Flashsockets (BLEH)
● Auto Reconnect, Heartbeats,
Auto Chooses Best Transport
Other Good Alternatives
● socksjs
● nowjs
● engine.io (socket.io but naked)
How to Get Started
1. express example
2. enter example folder
3. npm install socket.io --save
Farsheedius Shall walk through the rest
For the impatient: echo example
https://github.com/eddify/socketio-starter

Mais conteúdo relacionado

Destaque

Building your First MEAN App
Building your First MEAN AppBuilding your First MEAN App
Building your First MEAN App
MongoDB
 
Building notification system in NodeJS + Redis
Building notification system in NodeJS + RedisBuilding notification system in NodeJS + Redis
Building notification system in NodeJS + Redis
Le Duc
 
Real-time Web Application with Socket.IO, Node.js, and Redis
Real-time Web Application with Socket.IO, Node.js, and RedisReal-time Web Application with Socket.IO, Node.js, and Redis
Real-time Web Application with Socket.IO, Node.js, and Redis
York Tsai
 

Destaque (19)

Socket io - JSZurich
Socket io - JSZurichSocket io - JSZurich
Socket io - JSZurich
 
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.ioNode worshop Realtime - Socket.io
Node worshop Realtime - Socket.io
 
Better d3 charts with tdd
Better d3 charts with tddBetter d3 charts with tdd
Better d3 charts with tdd
 
Realtime web applications with ExpressJS and SocketIO
Realtime web applications with ExpressJS and SocketIORealtime web applications with ExpressJS and SocketIO
Realtime web applications with ExpressJS and SocketIO
 
Data visualization
Data visualizationData visualization
Data visualization
 
tea
teatea
tea
 
Transforming WebSockets
Transforming WebSocketsTransforming WebSockets
Transforming WebSockets
 
Building your First MEAN App
Building your First MEAN AppBuilding your First MEAN App
Building your First MEAN App
 
Socket.io (part 1)
Socket.io (part 1)Socket.io (part 1)
Socket.io (part 1)
 
NodeJS & Socket IO on Microsoft Azure Cloud Web Sites - DWX 2014
NodeJS & Socket IO on Microsoft Azure Cloud Web Sites - DWX 2014NodeJS & Socket IO on Microsoft Azure Cloud Web Sites - DWX 2014
NodeJS & Socket IO on Microsoft Azure Cloud Web Sites - DWX 2014
 
Socket.IO - Alternative Ways for Real-time Application
Socket.IO - Alternative Ways for Real-time ApplicationSocket.IO - Alternative Ways for Real-time Application
Socket.IO - Alternative Ways for Real-time Application
 
Socket Programming
Socket ProgrammingSocket Programming
Socket Programming
 
Fun with D3.js: Data Visualization Eye Candy with Streaming JSON
Fun with D3.js: Data Visualization Eye Candy with Streaming JSONFun with D3.js: Data Visualization Eye Candy with Streaming JSON
Fun with D3.js: Data Visualization Eye Candy with Streaming JSON
 
Practical Use of MongoDB for Node.js
Practical Use of MongoDB for Node.jsPractical Use of MongoDB for Node.js
Practical Use of MongoDB for Node.js
 
Building notification system in NodeJS + Redis
Building notification system in NodeJS + RedisBuilding notification system in NodeJS + Redis
Building notification system in NodeJS + Redis
 
Real Time Communication using Node.js and Socket.io
Real Time Communication using Node.js and Socket.ioReal Time Communication using Node.js and Socket.io
Real Time Communication using Node.js and Socket.io
 
Going realtime with Socket.IO
Going realtime with Socket.IOGoing realtime with Socket.IO
Going realtime with Socket.IO
 
Real-time Web Application with Socket.IO, Node.js, and Redis
Real-time Web Application with Socket.IO, Node.js, and RedisReal-time Web Application with Socket.IO, Node.js, and Redis
Real-time Web Application with Socket.IO, Node.js, and Redis
 
Mongo DBを半年運用してみた
Mongo DBを半年運用してみたMongo DBを半年運用してみた
Mongo DBを半年運用してみた
 

Semelhante a Node js oc meetup 2 socket io intro

Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...
Corey Clark, Ph.D.
 

Semelhante a Node js oc meetup 2 socket io intro (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
 
Comet: Making The Web a 2-Way Medium
Comet: Making The Web a 2-Way MediumComet: Making The Web a 2-Way Medium
Comet: Making The Web a 2-Way Medium
 
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)
 
How Web Pages Work
How Web Pages Work How Web Pages Work
How Web Pages Work
 
Real-Time with Flowdock
Real-Time with FlowdockReal-Time with Flowdock
Real-Time with Flowdock
 
Speed = $$$
Speed = $$$Speed = $$$
Speed = $$$
 
HTTP, WebSocket, SPDY: evoluzione dei protocolli web by Simone Bordet
HTTP, WebSocket, SPDY: evoluzione dei protocolli web by Simone BordetHTTP, WebSocket, SPDY: evoluzione dei protocolli web by Simone Bordet
HTTP, WebSocket, SPDY: evoluzione dei protocolli web by Simone Bordet
 
Ws
WsWs
Ws
 
JUG louvain websockets
JUG louvain websocketsJUG louvain websockets
JUG louvain websockets
 
Monkey Server
Monkey ServerMonkey Server
Monkey Server
 
Introduction to Web Sockets
Introduction to Web SocketsIntroduction to Web Sockets
Introduction to Web Sockets
 
Real time web: is there a life without socket.io and node.js?
Real time web: is there a life without socket.io and node.js?Real time web: is there a life without socket.io and node.js?
Real time web: is there a life without socket.io and node.js?
 
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...
 
From Data Push to WebSockets
From Data Push to WebSocketsFrom Data Push to WebSockets
From Data Push to WebSockets
 
SPDY and What to Consider for HTTP/2.0
SPDY and What to Consider for HTTP/2.0SPDY and What to Consider for HTTP/2.0
SPDY and What to Consider for HTTP/2.0
 
Turbot - A Next Generation Botnet
Turbot - A Next Generation BotnetTurbot - A Next Generation Botnet
Turbot - A Next Generation Botnet
 
HTTP/2 turns 3 years old // Web Performance Meetup wao.io 20180612
HTTP/2 turns 3 years old // Web Performance Meetup wao.io 20180612HTTP/2 turns 3 years old // Web Performance Meetup wao.io 20180612
HTTP/2 turns 3 years old // Web Performance Meetup wao.io 20180612
 
Asynchronous Ruby
Asynchronous RubyAsynchronous Ruby
Asynchronous Ruby
 
introduction to web application development
introduction to web application developmentintroduction to web application development
introduction to web application development
 
Real time web
Real time webReal time web
Real time web
 

Último

CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 

Último (20)

Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 

Node js oc meetup 2 socket io intro

  • 1. Meetup 2 Socket IO Real Time Applications
  • 4. Overview Last Meetup Recap Why Node JS Javascript Intro Today Realtime Web Application Aches Socket IO Cure Examples
  • 5. Real Time Web Applications Pretty Moving Graphs Feeds (Twitter, News, etc.) Chatrooms Html5 Multiplayer Games
  • 6. Limitations of HTML HTML Designed for Request/Response 1. Browser -> Server 2. Server -> Browser 3. Repeat
  • 7. Solutions HTML Protocol Hacks: ● Short Polling ● Long Polling ○ <script> ○ AJAX Long Polling ● Streaming ○ XMLHttpRequest Multipart Chunks ○ Forever Iframe
  • 8. Problems with Hacks ● HTTP Overhead for many small updates ● Resource Waste in opening and closing connections ● Latency Overhead ● Different Implementations for Each Browser
  • 9. WebSockets To Rescue! ● Full Web Standard designed for two way communication ● Minimal Overhead for each message ● Most Modern Browsers Support it
  • 10. WebSocket Limitations ● HTTP Upgrade Handshake Breaks some older Proxies ● Many Gateways, Load Balancers, Reverse Proxies Servers dont support websocket ● Some Firewalls block Websockets
  • 11. Socket IO Got You Covered Socket IO Real Time Communication Library for both server and client ● Abstract Layer over Multiple Transports ○ Long Polling ○ Streaming ○ Websockets ○ Flashsockets (BLEH) ● Auto Reconnect, Heartbeats, Auto Chooses Best Transport
  • 12. Other Good Alternatives ● socksjs ● nowjs ● engine.io (socket.io but naked)
  • 13. How to Get Started 1. express example 2. enter example folder 3. npm install socket.io --save Farsheedius Shall walk through the rest For the impatient: echo example https://github.com/eddify/socketio-starter