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.

1. | 1WebSockets i OpenLayers spojeni Spring-om

2. Kapsch – O kompaniji
| 2WebSockets i OpenLayers spojeni Spring-om

3. Kapsch CarrierCom
WebSocket
| |Presentation heading Presentation subheading 330.04.2014

4. Š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

5. 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

6. 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)

7. Š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

8. 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

9. 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

10. Kapsch CarrierCom
Spring, WebSocket, STOMP
Serverski dio aplikacije
| |Presentation heading Presentation subheading 1030.04.2014

11. 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

12. 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)

13. 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;
}

14. 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;
}
}

15. 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();
}
}

16. Kapsch CarrierCom
OpenLayers, sockjs.js, stomp.js
Klijentski dio aplikacije
| |Presentation heading Presentation subheading 1630.04.2014

17. 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

18. OpenLayers (2)
Bazni slojevi (base layer) Markeri (markers)
Karta
| 18WebSockets i OpenLayers spojeni Spring-om
Geometrija (geometry)Kontrola (control)

19. 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)

20. 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);

21. 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');
}

22. 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);
}
}

23. Kapsch CarrierCom
Demonstracija
| |Presentation heading Presentation subheading 2330.04.2014

24. 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”

25. 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

26. Hvala!
| 26WebSockets i OpenLayers spojeni Spring-om
Hvala!