WebSockets with Spring 4

1. WebSockets with Spring 4 Sergi Almar @sergialmar

2. Who I am • CTO @ Voz.io • Spring Certiﬁed Trainer • javaHispano Core Member • Spring I/O conference organiser

3. Collaborative Apps Multiplayer Games Multimedia Chat Social Feeds Sports Updates Financial Tickets Clickstream Data Online Education Location-based Apps

4. Real-Time Data on the Web • Polling • Long Polling / Comet • Flash

5. Problem Applications need two-way communication Too many connections and overhead with ajax / comet

6. WebSockets  two-way communication done right

7. WebSocket Protocol / RFC 6455 • Real-time full duplex communication over TCP • Uses port 80 / 443 (URL scheme: ws:// and wss://) • Small overhead for text messages (frames) • • 0x00 for frame start, 0xFF for frame end (vs HTTP 1Kb) Ping / pong frames for staying alive

8. WebSocket Handshake GET /mychat HTTP/1.1! Host: server.example.com! Upgrade: websocket! Connection: Upgrade! Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==! Sec-WebSocket-Protocol: chat! Sec-WebSocket-Version: 13! Origin: http://example.com! client sends a WebSocket handshake request HTTP/1.1 101 Switching Protocols! Upgrade: websocket! Connection: Upgrade! Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=! Sec-WebSocket-Protocol: chat! server response

9. JS WebSocket API var ws = new WebSocket("ws://www.java2days.com/ws");! ! // When the connection is open, send some data to the server! ws.onopen = function () {! ws.send('Here I am!');! };! ! // Log messages from the server! ws.onmessage = function (event) {! console.log('message: ' + event.data);! };! ! ws.onclose = function (event) {! console.log('closed:' + event.code);! };!

10. Java WebSocket Implementations • Multiple implementations before the standard • JSR-356 (May 2013) • Reference implementation Tyrus (bundled with Glassﬁsh 4) • Rewrite across containers (tomcat 8.0.0-RC5, Jetty 9.1…)

11. WebSockets.springify()

12. Spring WebSockets • WebSockets are now supported in Spring 4 • Fallback options with SockJS • STOMP over WebSocket • Foundation for messaging architecture

13. WebSocket Handlers public class EchoHandler extends TextWebSocketHandlerAdapter {! ! @Override! public void handleTextMessage(WebSocketSession session, ! ! ! ! ! ! ! ! ! ! ! TextMessage message) throws Exception {! session.sendMessage(message);! }! ! }

14. WebSocket Conﬁg @Configuration! @EnableWebSocket! public class WsConfig implements WebSocketConfigurer {! ! ! ! @Override! public void registerWebSocketHandlers(! ! ! ! ! ! ! ! ! ! WebSocketHandlerRegistry registry) {! ! registry.addHandler(new EchoHandler(), "/echo");! }! }!

15. Per-Session Handler Previous example showed how to conﬁgure a global handler • • but you may want to have a stateful per-session handler @Configuration! @EnableWebSocket! public class WsConfig implements WebSocketConfigurer {! ! ! @Bean! DI public WebSocketHandler echoHandler() {! return new PerConnectionWebSocketHandler(EchoHandler.class);! }! @Override! public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {! registry.addHandler(echoHandler(), "/echo");! }! }

16. Can anyone join the party? http://caniuse.com/#feat=websockets / DEC 2013

17. SockJS  dude, where are my socks?

18. SockJS • Coherent, cross-browser, Javascript API for full duplex communication. • Close to HTML5 WebSockets API • Client and server side implementation (ruby, node… and also in spring-websockets)

19. SocksJS API var sock = new SockJS('http://www.java2days.com/ws');! ! sock.onopen = function() {! sock.send('Here I am'); };! ! ! sock.onmessage = function(event) {! console.log('message', e.data);! };! ! sock.onclose = function() {! console.log('close');! };!

20. SockJS URLs • Base URL: /base_url • Info test: /base_url/info • Session URL: /base_url/server/session

21. Enabling SocksJS @Configuration! @EnableWebSocket! public class WsConfig implements WebSocketConfigurer {! ! ! ! @Override! public void registerWebSocketHandlers(! ! ! ! ! ! ! ! ! ! WebSocketHandlerRegistry registry) {! ! registry.addHandler(new EchoHandler(), “/echo”).withSockJS();! }! }! MessageHandler doesn’t change (SocketJsService delivers the message to the handler regardless of the protocol)

22. Problem • WebSockets are too low level and different from HTTP / REST • We need asynchronous, event-driven, reactive programming style • Mmmm, that sounds familiar: JMS, AMQP…   but we still want to stick to the Spring MVC programming model

23. Here’s were we are…

24. …but we want something like this

25. Solution • Stomp over WebSocket • Some Spring Integration types have been promoted to the core • • • Message, MessageChannel, MessageHandler… @MessageMapping, @SubscribeEvent… New spring-messaging module

26. STOMP

27. STOMP • Simple interoperable protocol for asynchronous messaging • Supported by Apache ActiveMQ, RabbitMQ, HornetQ… • Frames modelled on HTTP var socket = new SockJS('/myapp/echo');! var client = Stomp.over(socket); COMMAND! header1:value1! header2:value2! ! Body^@!

28. Client Frames • SEND a message • SUBSCRIBE / UNSUBSCRIBE from destination • ACK / NACK the reception of a message (optional by default)

29. Server Frames • Convey a MESSAGE from subscription to the client • Send RECEIPT when server has successfully processed a client frame • Send an ERROR if something goes wrong

30. Conﬁguration ! @Configuration! @EnableWebSocketMessageBroker! public class Config implements WebSocketMessageBrokerConfigurer {! ! @Override! public void registerStompEndpoints(StompEndpointRegistry r){! r.addEndpoint("/stomp");! }! ! @Override! public void configureMessageBroker(MessageBrokerConfigurer c){! c.enableSimpleBroker("/topic/");! Subscriptions c.setApplicationDestinationPrefixes("/app");! processed by spring }! ! }! simple broker

31. Sending Messages stomp.js stompClient.send("/app/trade", {}, JSON.stringify(trade)); preﬁx SEND! destination:/app/trade! content-type:application/json! content-length:47! ! {"action":"Sell","ticker":"DELL","shares":"10"}! supports ant-style patterns @MessageMapping("/trade")! public void executeTrade(Trade trade, Principal principal) {! ! trade.setUsername(principal.getName());! ! this.tradeService.executeTrade(trade);! }

32. Handler Methods • Flexible handler method signatures • @PathVariable, @Header/@Headers, @Payload, Message, Principal • Message converters @Controller! public class ChatController {! ! @MessageMapping("/message")! public void sendMessage(String message, Principal principal) {! // ...! }! }!

33. Handler Methods • Can also return a value ! ! ! Return wrapped in a Message and sent to /topic/message @MessageMapping("/message")! public String sendMessage(String message) {! return message.toUpperCase();! } ! • Or deﬁne the destination with @SendTo @MessageMapping("/message")! @SendTo("/topic/spring-room")! public String sendMessage(String message) {! return message.toUpperCase();! }!

34. Intercepting Subscriptions stompClient.subscribe("/app/positions", function(message) {! ...! });! SUBSCRIBE! id:sub-0! destination:/app/positions! @Controller! public class PortfolioController {! ! @SubscribeEvent("/positions")! public List<Position> getPositions(Principal p) {! Portfolio portfolio = ...! return portfolio.getPositions();! }! } sent directly to the client, not going though the message broker

35. User destinations • User speciﬁc queues can be used • • • /user/** kind of paths queues with unique id will be created Useful to send user related information or errors client.subscribe("/user/queue/private-messages", function(msg) {! // ...! });! ! client.subscribe("/user/queue/errors", function(msg) {! // ...! });!

36. Sending to user @Controller! public class ChatController {! Will be sent to /user/{username}/queue/message ! @MessageMapping("/message")! @SendToUser! public String sendMessage(String message) {! return message.toUpperCase();! }! ! @MessageExceptionHandler! @SendToUser("/queue/errors")! public String handleException(IllegalStateException ex) {! return ex.getMessage();! }! ! }!

37. SimpMessagingTemplate • Sending messages without handler methods template.convertAndSend("/topic/chat", message;! template.convertAndSendToUser(user, dest, message;

38. Using a Message Broker • Previous conﬁguration used Spring’s simple broker • • • Not suitable for clustering Subset of STOMP A message broker can be plugged-in instead

39. Message Broker Conﬁg @Configuration! @EnableWebSocketMessageBroker! public class Config implements WebSocketMessageBrokerConfigurer{! ! @Override! public void configureMessageBroker(MessageBrokerConfigurer c){! c.enableStompBrokerRelay("/queue/", "/topic/");! c.setApplicationDestinationPrefixes("/app");! }! }

40. Thanks! @sergialmar

WebSockets with Spring 4

Sergi Almar i Graupera

WebSockets with Spring 4