Pushing Oracle Coherence Events to Web Browsersusing HTML 5 WebSockets       and Kaazing     Steve Millidge        © C2B2 ...
Agenda•   What is Web Sockets•   Review Coherence Events•   Demo Configuration•   Code                © C2B2 Consulting Li...
Web Sockets• Enables Full Duplex Communication  between a browser and a Server• Allows Web Servers to push updates to  bro...
Server Sent Events• Sent by the Server to the Browser  – Uni-directional• Sent over standard HTTP  – Content Type is text/...
Web Sockets and Standards• This is all in flux• Rfc 6455 defines the  protocol• W3C SSE  http://dev.w3.org/html  5/eventso...
WebSocket ProtocolClient                              ServerGET /chat HTTP/1.1                  HTTP/1.1 101 SwitchingHost...
JS APIWeb Socket                            Server Sent EventsWebSocket(location,protocol)          EventSource(location)F...
Coherence Events SubsystemApplication    Application              Application       Application      Map        Cache     ...
Events CodeMapListener listener = new MultiplexingMapListener() {public void onMapEvent(MapEvent evt) {   // do something ...
Events• E_ALL                            • E_UPDATED_LEFT  – All Events                          – Updated and now not• E_...
Asynch Push to the UI          ORCL                                            ORCL         Applicati    Applicati   Appli...
Demo Setup                                  Internet            Applicati      Applicati                  KAAZING         ...
Coherence InitialisationString remoteURL = args[0];NamedCache cache =CacheFactory.getCache("conquery");KaazingStockClient ...
Map Listener@Overridepublic void entryUpdated(MapEvent event) {   if (event.getNewValue() instanceof Stock) {     System.o...
Push to Kaazing// Convert to JSONJSONArray stocksJson = new JSONArray();stocksJson.addAll(stocks);// Push via UDP to KAAZI...
Graph JavaScriptvar eventSource = new EventSource("http://ec2-46-137-53-185.eu-west-1.compute.amazonaws.com:8001/sse");eve...
Thank you© C2B2 Consulting Limited 2012     All Rights Reserved
Upcoming SlideShare
Loading in …5
×

Pushing Oracle Coherence Events to Web Browsers Using HTML5, Web Sockets and Kaazing

1,080 views

Published on

Slides from the talk presented by Steve Millidge at the Oracle User Group Coherence SIG in March 2012

1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
1,080
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
11
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Pushing Oracle Coherence Events to Web Browsers Using HTML5, Web Sockets and Kaazing

  1. 1. Pushing Oracle Coherence Events to Web Browsersusing HTML 5 WebSockets and Kaazing Steve Millidge © C2B2 Consulting Limited 2012 All Rights Reserved
  2. 2. Agenda• What is Web Sockets• Review Coherence Events• Demo Configuration• Code © C2B2 Consulting Limited 2012 All Rights Reserved
  3. 3. Web Sockets• Enables Full Duplex Communication between a browser and a Server• Allows Web Servers to push updates to browsers• Better than “long polling”• Establishes a Dedicated Socket to the Backend Web Socket Server © C2B2 Consulting Limited 2012 All Rights Reserved
  4. 4. Server Sent Events• Sent by the Server to the Browser – Uni-directional• Sent over standard HTTP – Content Type is text/event-stream• Supports only Text• Easier to fallback to Long Polling• Browser handles reconnect © C2B2 Consulting Limited 2012 All Rights Reserved
  5. 5. Web Sockets and Standards• This is all in flux• Rfc 6455 defines the protocol• W3C SSE http://dev.w3.org/html 5/eventsource/• W3C WebSockets http://dev.w3.org/html 5/websockets/ © C2B2 Consulting Limited 2012 All Rights Reserved
  6. 6. WebSocket ProtocolClient ServerGET /chat HTTP/1.1 HTTP/1.1 101 SwitchingHost: server.example.com Protocols Upgrade: websocketUpgrade: websocket Connection: Upgrade Sec-Connection: Upgrade WebSocket-Accept:Sec-WebSocket-Key: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=dGhlIHNhbXBsZSBub25jZQ== Sec-WebSocket-Protocol: chatOrigin: http://example.comSec-WebSocket-Protocol:chat, superchatSec-WebSocket-Version: 13 © C2B2 Consulting Limited 2012 All Rights Reserved
  7. 7. JS APIWeb Socket Server Sent EventsWebSocket(location,protocol) EventSource(location)Function onmessage Function onmessageFunction onopen Function onopenFunction onclose Function onerrorFunction onerrorclose()send(data) © C2B2 Consulting Limited 2012 All Rights Reserved
  8. 8. Coherence Events SubsystemApplication Application Application Application Map Cache Cache Cache Listener Cache © C2B2 Consulting Limited 2012 All Rights Reserved
  9. 9. Events CodeMapListener listener = new MultiplexingMapListener() {public void onMapEvent(MapEvent evt) { // do something with the trader }};NamedCache mapTrades = ... Filter filter = new AndFilter(new EqualsFilter("getTrader", traderid), new EqualsFilter("getStatus", Status.OPEN));mapTrades.addMapListener(listener, newMapEventFilter(filter), true); © C2B2 Consulting Limited 2012 All Rights Reserved
  10. 10. Events• E_ALL • E_UPDATED_LEFT – All Events – Updated and now not• E_INSERTED matched – Inserts • E_UPDATED_WITHIN• E_DELETED – Updated still matched – Deletes • E_KEYSET• E_UPDATED – All updated which change the matching set – Updated• E_UPDATED_ENTERED – Updated and now matched © C2B2 Consulting Limited 2012 All Rights Reserved
  11. 11. Asynch Push to the UI ORCL ORCL Applicati Applicati Applicati Applicati Applicati Applicati Applicati Cach on Cach on Cach on Cach on Cach on Cach on Cach on e e e e e e e Applicati Applicati Applicati Applicati Applicati Applicati Applicati Cach on Cach on Cach on Cach on Cach on Cach on Cach on e e e e e e ePrice Applicati Applicati Applicati Applicati Applicati Applicati ApplicatiUpdate Cach on Cach on Cach on Cach on Cach on Cach on Cach on e e e e e e eORCL © C2B2 Consulting Limited 2012 All Rights Reserved
  12. 12. Demo Setup Internet Applicati Applicati KAAZING Cach on e Cach on Update e HTML 5 GatewayCoherence Coherence Grid Client © C2B2 Consulting Limited 2012 All Rights Reserved
  13. 13. Coherence InitialisationString remoteURL = args[0];NamedCache cache =CacheFactory.getCache("conquery");KaazingStockClient client = newKaazingStockClient(remoteURL, "conquery");cache.addMapListener(new StockMapListener(client)); © C2B2 Consulting Limited 2012 All Rights Reserved
  14. 14. Map Listener@Overridepublic void entryUpdated(MapEvent event) { if (event.getNewValue() instanceof Stock) { System.out.println("Stock : " + event.getKey() + " has beenupdated"); client.pushStockUpdate(); }} © C2B2 Consulting Limited 2012 All Rights Reserved
  15. 15. Push to Kaazing// Convert to JSONJSONArray stocksJson = new JSONArray();stocksJson.addAll(stocks);// Push via UDP to KAAZINGURI remoteURI = URI.create(remoteURL);SocketAddress remoteAddress = newInetSocketAddress(remoteURI.getHost(),remoteURI.getPort());DatagramSocket socket = new DatagramSocket();byte[] buf = message.getBytes();DatagramPacket packet = new DatagramPacket(buf,buf.length, remoteAddress);socket.send(packet); © C2B2 Consulting Limited 2012 All Rights Reserved
  16. 16. Graph JavaScriptvar eventSource = new EventSource("http://ec2-46-137-53-185.eu-west-1.compute.amazonaws.com:8001/sse");eventSource.onmessage = function(event) { var array = JSON.parse(event.data); for (var i = 0; i < array.length; i++) { var object = array[i]; var x = (new Date()).getTime(); var y = object.price; document.chart.series[i].addPoint([x,y],true,true); }} © C2B2 Consulting Limited 2012 All Rights Reserved
  17. 17. Thank you© C2B2 Consulting Limited 2012 All Rights Reserved

×