Building Real-time Data in Web Applications with Node · Building Real-time Data in Web...

56

Transcript of Building Real-time Data in Web Applications with Node · Building Real-time Data in Web...

Page 1: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,
Page 2: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

BuildingReal-timeDatainWebApplicationswithNode.js

DanMcGhanOracleDeveloperAdvocateJavaScriptandHTML5March,2017

Page 3: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

SafeHarborStatementThefollowingisintendedtooutlineourgeneralproductdirection.Itisintendedforinformationpurposesonly,andmaynotbeincorporatedintoanycontract.Itisnotacommitmenttodeliveranymaterial,code,orfunctionality,andshouldnotberelieduponinmakingpurchasingdecisions.Thedevelopment,release,andtimingofanyfeaturesorfunctionalitydescribedforOracle’sproductsremainsatthesolediscretionofOracle.

3

Page 4: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

Whoareyou?

4

Page 5: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

Aboutme• DanMcGhan–OracleDeveloperAdvocate– FocusonJavaScriptandHTML5

• ContactInfo– [email protected]–@dmcghan– jsao.io

5

Page 6: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

Agenda

Howwegothere

Wherewe’reat

Mixinginthedatabase

1

2

3

6

Page 7: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

Demotime!

7

Page 8: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

Agenda

Howwegothere

Wherewe’reat

Mixinginthedatabase

1

2

3

8

Page 9: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 9

WebBrowser WebServer

Page 10: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 10

WebBrowser WebServer

HTTPrequest

Page 11: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 11

WebBrowser WebServer

HTTPresponse

Page 12: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 12

WebBrowser WebServer Database

Page 13: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 13

WebBrowser WebServer Database

HTTPrequest

Page 14: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 14

WebBrowser WebServer Database

DBdriverrequest

Page 15: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 15

WebBrowser WebServer Database

DBdriverresponse

Page 16: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 16

WebBrowser WebServer Database

HTTPresponse

Page 17: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 17

WebBrowser WebServer Database

Transactions

Page 18: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 18

WebBrowser WebServer Database

Sharding

Page 19: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 19

WebBrowser WebServer Database

Auto-Scaling Sharding

Page 20: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 20

WebBrowser WebServer Database

Auto-Scaling ShardingLotsO’Users

Page 21: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 21

WebBrowser WebServer Database

Auto-Scaling ShardingLotsO’Users

Page 22: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 22

WebBrowser WebServer Database

Page 23: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 23

WebBrowser WebServer Database

WhataboutsubsequentDBchanges?

Page 24: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 24

WebBrowser WebServer Database

HTTPrequest

Page 25: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 25

WebBrowser WebServer Database

HTTPrequest

Notpossibleforgoodreasons

Page 26: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

Thusbeganthequesttosimulate pushingdata…

Page 27: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

Techniquestobridgethegap• Foreverframe• Ajaxpolling• Ajaxlongpolling• HTML5ServerSentEvents

27

Page 28: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

Agenda

Howwegothere

Wherewe’reat

Mixinginthedatabase

1

2

3

28

Page 29: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

Newtechnologieshaveemerged• WebSocket– Allowsbi-directionalcommunication– StartswithHTTP(S)andthenupgradestoWebSocket– Greatforserverstopushtoclients

• WebRTC– Enablesdirect,peer-to-peerconnectionsovertheweb• Nomiddle-mangreatlyreduceslatency• RequiresaTURNservertogetclientsconnecteddirectly

– Greatfor• Streamingaudio/video• Communicatingarbitrarydata(thinkgames)

29

Page 30: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 30

CurrentWebRTC support

http://caniuse.com/#search=webrtc

Page 31: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 31

CurrentWebSocket support

http://caniuse.com/#search=websocket

Page 32: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

WebSocket example

https://developer.mozilla.org/en-US/docs/Web/API/WebSocket

32

Page 33: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

Socket.IO• 2parts:client-sideandserver-side– Startswithlong-polling,upgradestoWebSocket ifpossible

• SimpleAPIwithgreatfeatures–Multiplexing/namespacing support(separatechannelsoverthesameconnection)– Rooms(groupuserswithinanamespace)– Auto-reconnect

33

Page 34: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 34

WebBrowser WebServer Database

Codereview

Page 35: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

Agenda

Howwegothere

Wherewereat

Mixinginthedatabase

1

2

3

35

Page 36: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 36

DatabaseEvents Communication

Page 37: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 37

DatabaseEvents Communication• Triggers

Page 38: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

• DMLTriggers– BEFOREINSERT– AFTERUPDATE– INSTEADOFDELETE(forviews)

• SystemTriggers– AFTERLOGON– BEFOREDROP

38

Triggers:2maintypes

Page 39: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

Icouldhaveusedaninserttrigger…

39

Page 40: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

Icouldhaveusedaninserttrigger…

40

butthatwouldbebad.

Page 41: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 41

DatabaseEvents Communication• Triggers• Scheduler

Page 42: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

DBMS_SCHEDULER• Arobustschedulingtool

42

Page 43: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

Icouldhaveusedaninserttriggerw/scheduler

43

Page 44: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 44

DatabaseEvents Communication• Triggers• Scheduler• AdvancedQueuing(AQ)w/Notification

Page 45: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

AdvancedQueuing

45

• Adurable,scalablequeuingframeworkinthedatabase– Hasanenqueue notificationfeaturetoavoidpolling

• Point-to-pointmessaging

• Publish/Subscribemode

Page 46: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 46

DatabaseEvents Communication• Triggers• Scheduler• AdvancedQueuing(AQ)w/Notification• ContinuousQueryNotification

Page 47: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

ContinuousQueryNotification

47

Page 48: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 48

DatabaseEvents Communication• Triggers• Scheduler• AdvancedQueuing(AQ)w/Notification• ContinuousQueryNotification

• UTL_TCP• UTL_HTTP• UTL_SMTP&UTL_MAIL

Page 49: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 49

DatabaseEvents Communication• Triggers• Scheduler• AdvancedQueuing(AQ)w/Notification• ContinuousQueryNotification

• UTL_TCP• UTL_HTTP• UTL_SMTP&UTL_MAIL• APEX_WEB_SERVICE

Page 50: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

APEX_WEB_SERVICE• AnAPIprovidedbyApplicationExpress

50

Page 51: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 51

WebBrowser WebServer Database

Codereview

Page 52: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 52

DatabaseEvents Communication• Triggers• Scheduler• AdvancedQueuing(AQ)w/Notification• ContinuousQueryNotification

• UTL_TCP• UTL_HTTP• UTL_SMTP&UTL_MAIL• APEX_WEB_SERVICE• NativeDriverSupport

Page 53: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

Whatthefuturecouldlooklike…

Page 54: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.|

• OracleJET

• Socket.IO (client)

• Node.js

• Socket.IO (server)

54

• Triggers

• Scheduler

• AdvancedQueuing– Usersguide– DBMS_AQ– DBMS_AQADM– Types

• ContinuousQueryNotification– Usersguide– Types

• APEX_WEB_SERVICE

Nextsteps:learnandcode!WebBrowser WebServer Database

Page 55: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,
Page 56: Building Real-time Data in Web Applications with Node · Building Real-time Data in Web Applications with Node.js Dan McGhan Oracle Developer Advocate JavaScript and HTML5 March,

Copyright©2017, Oracleand/oritsaffiliates.Allrightsreserved.| 56

WebBrowser AppServer Database


APEX Unplugged Building Oracle Application Express ...€¦ · APEX Unplugged Building Oracle Application Express Applications That Can Survive Without the Internet Dan McGhan Senior

APEX Unplugged Building Oracle Application Express ...€¦ · APEX Unplugged Building Oracle Application Express Applications That Can Survive Without the Internet Dan McGhan Senior

Designing Real-Time Applications

Designing Real-Time Applications

Mobile applications for real estate business

Mobile applications for real estate business

Modeling Real-Time Applications in RSARTE...Real-time applications have special characteristics compared to other kinds of applications. For example, real-time applications are often

Modeling Real-Time Applications in RSARTE...Real-time applications have special characteristics compared to other kinds of applications. For example, real-time applications are often

Parallel Real-Time Applications

Parallel Real-Time Applications

Real World Applications

Real World Applications

APPLICATIONS 1. Real Symmetric Matrices

APPLICATIONS 1. Real Symmetric Matrices

Red Cross Real Heroes Breakfast Applications

Red Cross Real Heroes Breakfast Applications

Building Real-Time Web Applications

Building Real-Time Web Applications

Building Real-Time Applications in Ember.js

Building Real-Time Applications in Ember.js

Ruby applications in real life

Ruby applications in real life

The Real-Time Conferencing Applications Classification Network News (NNTP) P2P Collaborative applications Instant Messaging Real-Time Collaboration.

The Real-Time Conferencing Applications Classification Network News (NNTP) P2P Collaborative applications Instant Messaging Real-Time Collaboration.

Real World Applications of OWL

Real World Applications of OWL

Real applications of formulas

Real applications of formulas

Real-time Stereo Vision Applications

Real-time Stereo Vision Applications

Real World Applications ofReal World Applications of...Real World Applications ofReal World Applications of Risk Assessment for Drinkinggy Water Security R M NHRSC/WIPDRegan Murray,

Real World Applications ofReal World Applications of...Real World Applications ofReal World Applications of Risk Assessment for Drinkinggy Water Security R M NHRSC/WIPDRegan Murray,

Real Time Web Applications and Merb

Real Time Web Applications and Merb

Real Time Applications PMU

Real Time Applications PMU

Applications of Calculus in Real Life

Applications of Calculus in Real Life

Real Numbers in Real Applications - The Computer Laboratory

Real Numbers in Real Applications - The Computer Laboratory