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

�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 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!