Upload
hujak-hrvatska-udruga-java-korisnika-croatian-java-user-association
View
1.090
Download
2
Embed Size (px)
DESCRIPTION
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.
Citation preview
| 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!