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