JavaCro'14 - WebSockets and OpenLayers joined with Spring – Bojan Kljajin
-
Upload
hujak-hrvatska-udruga-java-korisnika-croatian-java-user-association -
Category
Technology
-
view
1.090 -
download
2
description
Transcript of JavaCro'14 - WebSockets and OpenLayers joined with Spring – Bojan Kljajin
| 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
2OnMessage(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
�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 konekcijefunction 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 konekcijefunction disconnect() {
stompClient.disconnect();
setConnected(false);
console.log('Disconnected');
}
sockjs.js & stomp.js (2)
Slanje lokacijefunction sendLocation(location) {
stompClient.send('/app/inlocations', {}, JSON.stringify(location));
}
Prikaz lokacijefunction 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!