• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaCro'14 - WebSockets and OpenLayers joined with Spring – Bojan Kljajin
 

JavaCro'14 - WebSockets and OpenLayers joined with Spring – Bojan Kljajin

on

  • 628 views

Need for seamless communication between web browser and back-end server has resulted in technology called WebSocket. In this presentation we will see what is WebSocket and how can we leverage Spring ...

Need for seamless communication between web browser and back-end server has resulted in technology called WebSocket. In this presentation we will see what is WebSocket and how can we leverage Spring framework and STOMP (Streaming Text Oriented Messaging Protocol) to display GPS coordinates on OpenLayers map in real time.

Statistics

Views

Total Views
628
Views on SlideShare
142
Embed Views
486

Actions

Likes
0
Downloads
5
Comments
0

2 Embeds 486

http://javacro.org 485
http://www.google.hr 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JavaCro'14 - WebSockets and OpenLayers joined with Spring – Bojan Kljajin JavaCro'14 - WebSockets and OpenLayers joined with Spring – Bojan Kljajin Presentation Transcript

    • | 1WebSockets i OpenLayers spojeni Spring-om
    • Kapsch – O kompaniji | 2WebSockets i OpenLayers spojeni Spring-om
    • Kapsch CarrierCom WebSocket | |Presentation heading Presentation subheading 330.04.2014
    • Što je to WebSocket Protokol koji pruža full-duplex komunikacijske kanale preko jedne TCP konekcije Dizajniran za implementaciju u web preglednicima i web serverima | 4WebSockets i OpenLayers spojeni Spring-om preglednicima i web serverima 2011 standardiziran od strane IETF kao RFC 6455 API u Web IDL-u standardiziran od strane W3C
    • Zašto je nastao WebSocket Za komunikaciju između servera i klijenta su se koristili različiti „hackovi” na HTTP protokolu WebSocket protokol omogućava bolju interaktivnost | 5WebSockets i OpenLayers spojeni Spring-om interaktivnost Porast web baziranih sadržaja (igre, chat, video…) koji traže bidirekcijsku komunikaciju
    • Kako radi WebSocket protokol 1. Uspostavljanje WebSocket konekcije • Klijent zahtjeva unapređenje protokola na koje server, ukoliko to može, odgovara 2. Razmjena podataka ServerClient HTTP GET Upgrade Request HTTP 101 Switching Protocols Response send(data) 1 | 6WebSockets i OpenLayers spojeni Spring-om 2. Razmjena podataka • Do zatvaranja konekcije asinkrona razmjena podataka 3. Zatvaranje WebSocket konekcije • Klijent inicira zatvaranje konekcije send(data) onmessage(data) Close . . . 3 2 OnMessage(data) Send(data)
    • Što treba imati na umu Proxy, firewall ili neki drugi mrežni element može blokirati WebSocket komunikaciju između servera i klijenta Preglednik na klijentskoj strani ne podržava WebSocket komunikaciju | 7WebSockets i OpenLayers spojeni Spring-om komunikaciju • Internet Explorer & IE Moblie – 10.0 • Firefox – 6.0 • Chrome – 14.0 • Safari & iOS Safari – 6.0 • Android Browser – 4.4
    • Java & WebSockets JSR 356: JavaTM API for WebSocket (finaliziran 22 Svibanj, 2013) | 8WebSockets i OpenLayers spojeni Spring-om Čak i prije JSR 356 većina web servera (Tomcat, Glassfish, Jetty, JBoss,…) imaju implementaciju WebSocket protokola, no nema standarda
    • Aplikacija Klijent u pregledniku vidi stranicu s kartom Na karti se prikazuju lokacije vozila Klijent | 9WebSockets i OpenLayers spojeni Spring-om lokacije vozila Vozila periodički šalju svoju lokaciju na server Server podatke o lokaciji prosljeđuje pregledniku, tj. karti Server Vozila
    • Kapsch CarrierCom Spring, WebSocket, STOMP Serverski dio aplikacije | |Presentation heading Presentation subheading 1030.04.2014
    • Spring – WebSocket Podrška za WebSocket u Spring 4 Spring 4 sadrži novi spring-messaging modul koji preuzima određene apstrakcije iz Spring Integration projekta | 11WebSockets i OpenLayers spojeni Spring-om Integration projekta Podržava STOPM protokol Omogućuje „fallback” u slučaju da WebSocket protokol nije podržan
    • STOMP WebSocket se nalazi malo iznad TCP, te kao takav predstavlja tzv. spojni protokol Za komunikaciju potrebno je implementirati pod protokol, na primjer STOMP | 12WebSockets i OpenLayers spojeni Spring-om protokol, na primjer STOMP Streaming Text Oriented Messaging Protocol Neovisan o jeziku aplikacije (language-agnostic)
    • Poruka o lokaciji Poruka koju izmjenjuju Vozila, Server i Klijent. public class Location { private int vehicleId; | 13WebSockets i OpenLayers spojeni Spring-om private int vehicleId; private float lon; private float lat; }
    • Kontroler Kontroler koji obrađuje poruke poslane iz vozila. @Controller public class LocationController { | 14WebSockets i OpenLayers spojeni Spring-om @MessageMapping("/inlocations") @SendTo("/topic/vlocations") public Location handleInLocation( Location inLocation) throws Exception { return inLocation; } }
    • Konfiguracija WebSocketa Konfiguracija WebSocket-a. @Configuration @EnableWebSocketMessageBroker public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer { @Override | 15WebSockets i OpenLayers spojeni Spring-om public void configureMessageBroker(MessageBrokerRegistry config) { config.enableSimpleBroker("/topic"); config.setApplicationDestinationPrefixes("/app"); } @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/inlocations").withSockJS(); } }
    • Kapsch CarrierCom OpenLayers, sockjs.js, stomp.js Klijentski dio aplikacije | |Presentation heading Presentation subheading 1630.04.2014
    • OpenLayers (1) Biblioteka za prikaz karti Otvoreni kod Podržava prikaz karti iz više izvora | 17WebSockets i OpenLayers spojeni Spring-om Podržava prikaz karti iz više izvora OpenStreetMap Google Bing Yahoo
    • OpenLayers (2) Bazni slojevi (base layer) Markeri (markers) Karta | 18WebSockets i OpenLayers spojeni Spring-om Geometrija (geometry)Kontrola (control)
    • OpenLayers (3) OpenStreetMap – OSM Bazni sloj koji se koristi kao karta Web Map Service (WMS) | 19WebSockets i OpenLayers spojeni Spring-om Koristi EPSG:900913 projekciju Projekcije EPSG:4326 (geodetske koordinate, širina i dužina) EPSG:900913 (sferni Mercator, metari)
    • OpenLayers (4) DOM objekt u kojem će se iscrtati karta <div id="map"></div> Inicijalizacija karte, OSM sloja i sloja s markerima var map = new OpenLayers.Map('map'); var layer = new OpenLayers.Layer.OSM('Simple OSM Map'); map.addLayer(layer); | 20WebSockets i OpenLayers spojeni Spring-om map.addLayer(layer); var markers = new OpenLayers.Layer.Markers('Markers'); map.addLayer(markers); Dodavanje markera na kartu var size = new OpenLayers.Size(24,24); var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); var icon = new OpenLayers.Icon('/icons/vehicle1.png',size,offset); var location = new OpenLayers.LonLat(13.595356,45.226899).transform( new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject()); var marker = new OpenLayers.Marker(location,icon); markers.addMarker(marker);
    • sockjs.js & stomp.js (1) Otvaranje konekcije function connect() { var socket = new SockJS('/inlocations'); stompClient = Stomp.over(socket); stompClient.connect({}, function(frame) { setConnected(true); console.log('Connected: ' + frame); | 21WebSockets i OpenLayers spojeni Spring-om console.log('Connected: ' + frame); stompClient.subscribe('/topic/vlocations', function(location){ showLocation(JSON.parse(location.body).content); }); }); } Zatvaranje konekcije function disconnect() { stompClient.disconnect(); setConnected(false); console.log('Disconnected'); }
    • sockjs.js & stomp.js (2) Slanje lokacije function sendLocation(location) { stompClient.send('/app/inlocations', {}, JSON.stringify(location)); } Prikaz lokacije function showLocation(location) { if(!marker) { | 22WebSockets i OpenLayers spojeni Spring-om if(!marker) { addMarker(location); } else { var lPx = map.getPixelFromLonLat( new OpenLayers.LonLat(location.longitude, location.latitude) .transform( new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject() ) ); marker.moveTo(lPx); } }
    • Kapsch CarrierCom Demonstracija | |Presentation heading Presentation subheading 2330.04.2014
    • Zaključak Dobro analizirati zahtjeve aplikacije, možda WebSocket nije najbolje rješenje Dobro analizirati infrastrukturu, možda WebSocket komunikaciju nije moguće ostvariti | 24WebSockets i OpenLayers spojeni Spring-om WebSocket komunikaciju nije moguće ostvariti Dobro analizirati klijente, možda nemaju preglednike (ili infrastrukturu) koji podržavaju WebSocket-e „Hope for the best, prepare for the worst”
    • Reference WebSocket http://www.websocket.org Spring http://spring.io/guides/gs/messaging-stomp-websocket | 25WebSockets i OpenLayers spojeni Spring-om http://spring.io/guides/gs/messaging-stomp-websocket STOMP http://en.wikipedia.org/wiki/Streaming_Text_Oriented_Messaging_Protocol OpenLayers http://openlayers.org OpenStreetMap http://www.openstreetmap.org
    • Hvala! | 26WebSockets i OpenLayers spojeni Spring-om Hvala!