JS-Everywhere - SSE Hands-on

•

1 gefällt mir•1,056 views

The document discusses using server-sent events (SSE) with HTML5 to push data from a server to a client browser. It provides tools and guidelines for a project to build a TODO list application that uses SSE to continuously update the list of TODOs in the browser. The project skeleton outlines the TODOs API on the server and resources for further information on SSE and localStorage APIs used in the project.

Technologie

Server push data
with HTML5 SSE
SUPINFO Hands-On 4

Saturday, November 17, 12

{JavaScript}
HTML5

Saturday, November 17, 12

Server Sent Event
Client Server
request

response
Update

response Update

With%streaming,%the%browser%sends%a%complete%request,%but%the%server%
maintains%an%open%response%that%is%con8nuously%updated %

Saturday, November 17, 12

Project Skeleton

Saturday, November 17, 12

The Web API

http://<MY-IP-ADDRESS>:3000/

• GET /todos
• Return all todos • GET /stream
• POST /todos • New todos stream
• Create a new todo
Saturday, November 17, 12

Resources
• About Server Sent Event:
https://developer.mozilla.org/en-US/docs/
Server-sent_events/Using_server-sent_events

• About localStorage:
https://developer.mozilla.org/en-US/
docs/DOM/Storage

Saturday, November 17, 12

For the fastest ones
• Add the Meta Viewport and test it with a
Mobile Browser (Opera Mobile Emulator)
http://dev.opera.com/articles/view/an-
introduction-to-meta-viewport-and-viewport/

• Make your code modular and use
RequireJS !

Saturday, November 17, 12

Need help ?

• If you are stuck or have any questions:
• Renaud
• Marc
• Adrien
• And me (Brice)

Saturday, November 17, 12

Download the
project !

Saturday, November 17, 12

Empfohlen

JS-Everywhere - LocalStorage Hands-onBrice Argenson

[DevDay 2017] Serverless Architecture - Speaker: Trung Huynh - Software Engin...DevDay.org

[DevDay 2017] ReactJS Hands on - Speaker: Binh Phan - Developer at mgm techno...DevDay.org

WebGL: Yesterday, Today, TomorrowBogdan Gorpynchuk

Cloud9 IDE Talk at meet.js Poznańzefhemel

AWS Finland meetup 2019 september - sponsored by ZalandoRolf Koski

Sre serverlessStanislav Pogrebnyak

$Less\sass done right in .NET$ $Less\sass done right in .NET$

Less\sass done right in .NETPawelPabich

Empfohlen

JS-Everywhere - LocalStorage Hands-onBrice Argenson

[DevDay 2017] Serverless Architecture - Speaker: Trung Huynh - Software Engin...DevDay.org

[DevDay 2017] ReactJS Hands on - Speaker: Binh Phan - Developer at mgm techno...DevDay.org

WebGL: Yesterday, Today, TomorrowBogdan Gorpynchuk

Cloud9 IDE Talk at meet.js Poznańzefhemel

AWS Finland meetup 2019 september - sponsored by ZalandoRolf Koski

Sre serverlessStanislav Pogrebnyak

$Less\sass done right in .NET$ $Less\sass done right in .NET$

Less\sass done right in .NETPawelPabich

Programming & The Web & Programming the WebVesa Vänskä

DevOps, PowerShell y Windows Containers - NET Conf UY v2016Victor Silva

Brief Intro to Phoenix - Elixir Meetup at BukaLapakRiza Fahmi

Ship It ! with Ruby/ Rails EcosystemYi-Ting Cheng

Experiences sharing about Lambda, Kinesis, and PostgresqlOkis Chuang

Developing Cross-Platform Web Apps with ASP.NET Core1.0EastBanc Tachnologies

Porting ASP.NET applications to Windows AzureGunnar Peipman

The 3rd Industrial Revolution: Transforming Healthcare as We Know It?garycmdpr

Building WebSocket and Server Side Events Applications using Atmospherejfarcand

Server-Sent Events (real-time HTTP push for HTML5 browsers)yay w00t

Websockets on the JVM: Atmosphere to the rescue!jfarcand

HTML5 Server Sent Events/JSF JAX 2011 ConferenceRoger Kitain

차세대 웹비즈니스를 위한 "HTML5"Changhwan Yi

Multiplatform, Promises and HTML5C4Media

living drupalJames Walker

Working With Social APIs - SoMeT12Mario Vasquez

Modern HTML & CSS Coding: Speed, Semantics & StructureRaven Tools

Software Libraries And NumbersRobert Reiz

Devops with the S for Sharing - Patrick DeboisJAX London

Big app design for Node.jsSergi Mansilla

Adapt and respond: keeping responsive into the futureChris Mills

Las maravillas de Google App Enginecoto

Weitere ähnliche Inhalte

Was ist angesagt?

Programming & The Web & Programming the WebVesa Vänskä

DevOps, PowerShell y Windows Containers - NET Conf UY v2016Victor Silva

Brief Intro to Phoenix - Elixir Meetup at BukaLapakRiza Fahmi

Ship It ! with Ruby/ Rails EcosystemYi-Ting Cheng

Experiences sharing about Lambda, Kinesis, and PostgresqlOkis Chuang

Developing Cross-Platform Web Apps with ASP.NET Core1.0EastBanc Tachnologies

Porting ASP.NET applications to Windows AzureGunnar Peipman

Was ist angesagt? (7)

Programming & The Web & Programming the Web

DevOps, PowerShell y Windows Containers - NET Conf UY v2016

Brief Intro to Phoenix - Elixir Meetup at BukaLapak

Ship It ! with Ruby/ Rails Ecosystem

Experiences sharing about Lambda, Kinesis, and Postgresql

Developing Cross-Platform Web Apps with ASP.NET Core1.0

Porting ASP.NET applications to Windows Azure

Andere mochten auch

The 3rd Industrial Revolution: Transforming Healthcare as We Know It?garycmdpr

Building WebSocket and Server Side Events Applications using Atmospherejfarcand

Server-Sent Events (real-time HTTP push for HTML5 browsers)yay w00t

Websockets on the JVM: Atmosphere to the rescue!jfarcand

HTML5 Server Sent Events/JSF JAX 2011 ConferenceRoger Kitain

차세대 웹비즈니스를 위한 "HTML5"Changhwan Yi

Andere mochten auch (6)

The 3rd Industrial Revolution: Transforming Healthcare as We Know It?

Building WebSocket and Server Side Events Applications using Atmosphere

Server-Sent Events (real-time HTTP push for HTML5 browsers)

Websockets on the JVM: Atmosphere to the rescue!

HTML5 Server Sent Events/JSF JAX 2011 Conference

차세대 웹비즈니스를 위한 "HTML5"

Ähnlich wie JS-Everywhere - SSE Hands-on

Multiplatform, Promises and HTML5C4Media

living drupalJames Walker

Working With Social APIs - SoMeT12Mario Vasquez

Modern HTML & CSS Coding: Speed, Semantics & StructureRaven Tools

Software Libraries And NumbersRobert Reiz

Devops with the S for Sharing - Patrick DeboisJAX London

Big app design for Node.jsSergi Mansilla

Adapt and respond: keeping responsive into the futureChris Mills

Las maravillas de Google App Enginecoto

Java performance: What's the big deal? - Trisha GeeJAX London

Lightning talks percona live mysql_2012Giuseppe Maxia

DrupalCampNYC 10 - Native mobile apps with Drupalzroger

Optimizing your site for contextual ads: SEO, Design and ContentRaven Tools

Html5 new sword for interactive appYohan Totting

Scrum und CraftsmanshipStefan ROOCK

HTML5 and Sencha TouchPatrick Sheridan

Scaling PinterestC4Media

Hammering Responsive Web Design Into ShapeKen Tabor

import continuous.delivery.*Anton Arhipov

Fast & Furious: Speed in the Opera browserAndreas Bovens

Ähnlich wie JS-Everywhere - SSE Hands-on (20)

Multiplatform, Promises and HTML5

living drupal

Working With Social APIs - SoMeT12

Modern HTML & CSS Coding: Speed, Semantics & Structure

Software Libraries And Numbers

Devops with the S for Sharing - Patrick Debois

Big app design for Node.js

Adapt and respond: keeping responsive into the future

Las maravillas de Google App Engine

Java performance: What's the big deal? - Trisha Gee

Lightning talks percona live mysql_2012

DrupalCampNYC 10 - Native mobile apps with Drupal

Optimizing your site for contextual ads: SEO, Design and Content

Html5 new sword for interactive app

Scrum und Craftsmanship

HTML5 and Sencha Touch

Scaling Pinterest

Hammering Responsive Web Design Into Shape

import continuous.delivery.*

Fast & Furious: Speed in the Opera browser

Mehr von Brice Argenson

RSpock Testing Framework for RubyBrice Argenson

Serverless ApplicationsBrice Argenson

Serverless - Lunch&Learn CleverToday - Mars 2017Brice Argenson

Docker 1.13 - Docker meetup février 2017Brice Argenson

Docker 1.12 & Swarm Mode [Montreal Docker Meetup Sept. 2016]Brice Argenson

Packagez et déployez vos applications avec Docker - Montréal CloudFoundry Mee...Brice Argenson

The Patterns to boost your time to market - An introduction to DevOpsBrice Argenson

Introduction to Continuous Integration with JenkinsBrice Argenson

Java EE - Servlets APIBrice Argenson

Effective JavaBrice Argenson

Soutenance mémoire : Implémentation d'un DSL en entrepriseBrice Argenson

Mehr von Brice Argenson (11)

RSpock Testing Framework for Ruby

Serverless Applications

Serverless - Lunch&Learn CleverToday - Mars 2017

Docker 1.13 - Docker meetup février 2017

Docker 1.12 & Swarm Mode [Montreal Docker Meetup Sept. 2016]

Packagez et déployez vos applications avec Docker - Montréal CloudFoundry Mee...

The Patterns to boost your time to market - An introduction to DevOps

Introduction to Continuous Integration with Jenkins

Java EE - Servlets API

Effective Java

Soutenance mémoire : Implémentation d'un DSL en entreprise

Kürzlich hochgeladen

Corporate and higher education May webinar.pptxRustici Software

Architecting Cloud Native ApplicationsWSO2

MS Copilot expands with MS Graph connectorsNanddeep Nachan

Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...apidays

Exploring Multimodal Embeddings with MilvusZilliz

Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya

CNIC Information System with Pakdata Cf In Pakistandanishmna97

Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer

Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Zilliz

Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea

EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWERMadyBayot

Apidays New York 2024 - The value of a flexible API Management solution for O...apidays

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra

Cyberprint. Dark Pink Apt Group [EN].pdfOverkill Security

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfOrbitshub

TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software

[BuildWithAI] Introduction to Gemini.pdfSandro Moreira

Kürzlich hochgeladen (20)

Corporate and higher education May webinar.pptx

Architecting Cloud Native Applications

MS Copilot expands with MS Graph connectors

Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...

Exploring Multimodal Embeddings with Milvus

Artificial Intelligence Chap.5 : Uncertainty

CNIC Information System with Pakdata Cf In Pakistan

Axa Assurance Maroc - Insurer Innovation Award 2024

Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...

Finding Java's Hidden Performance Traps @ DevoxxUK 2024

EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER

Apidays New York 2024 - The value of a flexible API Management solution for O...

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving

Cyberprint. Dark Pink Apt Group [EN].pdf

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

[BuildWithAI] Introduction to Gemini.pdf

JS-Everywhere - SSE Hands-on

1. Server push data with HTML5 SSE SUPINFO Hands-On 4 Saturday, November 17, 12

2. {JavaScript} HTML5 Saturday, November 17, 12

3. Server Sent Event Client Server request response Update response Update With%streaming,%the%browser%sends%a%complete%request,%but%the%server% maintains%an%open%response%that%is%con8nuously%updated % Saturday, November 17, 12

4. Your mission Saturday, November 17, 12

5. Your tools Saturday, November 17, 12

6. Your tools ... Saturday, November 17, 12

7. Your tools ... Saturday, November 17, 12

8. To guide you Saturday, November 17, 12

9. To guide you Saturday, November 17, 12

10. Design Saturday, November 17, 12

11. Design Saturday, November 17, 12

12. Design Saturday, November 17, 12

13. Project Skeleton Saturday, November 17, 12

14. Project Skeleton Saturday, November 17, 12

15. Project Skeleton Saturday, November 17, 12

16. Project Skeleton Saturday, November 17, 12

17. Project Skeleton Saturday, November 17, 12

18. The Web API http://<MY-IP-ADDRESS>:3000/ • GET /todos • Return all todos • GET /stream • POST /todos • New todos stream • Create a new todo Saturday, November 17, 12

19. Resources • About Server Sent Event: https://developer.mozilla.org/en-US/docs/ Server-sent_events/Using_server-sent_events • About localStorage: https://developer.mozilla.org/en-US/ docs/DOM/Storage Saturday, November 17, 12

20. For the fastest ones • Add the Meta Viewport and test it with a Mobile Browser (Opera Mobile Emulator) http://dev.opera.com/articles/view/an- introduction-to-meta-viewport-and-viewport/ • Make your code modular and use RequireJS ! Saturday, November 17, 12

21. Need help ? • If you are stuck or have any questions: • Renaud • Marc • Adrien • And me (Brice) Saturday, November 17, 12

22. Questions ? Saturday, November 17, 12

23. Download the project ! Saturday, November 17, 12