js-everywhere - sse hands-on
DESCRIPTION
The starter project and the correction are available here: https://github.com/bargenson/JS.Everywhere_HandsOn/tree/master/Hands-On_4TRANSCRIPT
![Page 1: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/1.jpg)
Server push data with HTML5 SSE
SUPINFO Hands-On 4
Saturday, November 17, 12
![Page 2: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/2.jpg)
{JavaScript}HTML5
Saturday, November 17, 12
![Page 3: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/3.jpg)
Server Sent Event
With%streaming,%the%browser%sends%a%complete%request,%but%the%server%maintains%an%open%response%that%is%con8nuously%updated%
Client Server
Update
Update
request
response
response
Saturday, November 17, 12
![Page 4: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/4.jpg)
Your mission
Saturday, November 17, 12
![Page 5: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/5.jpg)
Your tools
Saturday, November 17, 12
![Page 6: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/6.jpg)
Your tools
...
Saturday, November 17, 12
![Page 7: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/7.jpg)
Your tools
...
Saturday, November 17, 12
![Page 8: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/8.jpg)
To guide you
Saturday, November 17, 12
![Page 9: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/9.jpg)
To guide you
Saturday, November 17, 12
![Page 10: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/10.jpg)
Design
Saturday, November 17, 12
![Page 11: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/11.jpg)
Design
Saturday, November 17, 12
![Page 12: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/12.jpg)
Design
Saturday, November 17, 12
![Page 13: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/13.jpg)
Project Skeleton
Saturday, November 17, 12
![Page 14: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/14.jpg)
Project Skeleton
Saturday, November 17, 12
![Page 15: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/15.jpg)
Project Skeleton
Saturday, November 17, 12
![Page 16: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/16.jpg)
Project Skeleton
Saturday, November 17, 12
![Page 17: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/17.jpg)
Project Skeleton
Saturday, November 17, 12
![Page 18: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/18.jpg)
The Web API
•GET /todos
• Return all todos
• POST /todos
•Create a new todo
•GET /stream
•New todos stream
http://<MY-IP-ADDRESS>:3000/
Saturday, November 17, 12
![Page 19: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/19.jpg)
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
![Page 20: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/20.jpg)
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
![Page 21: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/21.jpg)
Need help ?
• If you are stuck or have any questions:
• Renaud
•Marc
•Adrien
•And me (Brice)
Saturday, November 17, 12
![Page 22: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/22.jpg)
Questions ?
Saturday, November 17, 12
![Page 23: JS-Everywhere - SSE Hands-on](https://reader034.vdocuments.mx/reader034/viewer/2022051513/54588278af79592b448b5412/html5/thumbnails/23.jpg)
Download the project !
Saturday, November 17, 12