This presenation on Github
https://github.com/rstoyanchev/
s2gx2013-websocket-browser-apps-with-spring
The Role of WebSocket
- An exciting new capability
- Especially on the heels of Ajax/Comet history
- Once you get your feet wet though
- You realize how much remains to be worked out
WebSocket "Hello World!"
public class MyHandler extends TextWebSocketHandlerAdapter {
@Override
public void handleTextMessage(
WebSocketSession session, TextMessage message) {
session.sendMessage(new TestMessage("Hello World!"));
}
}Beyond "Hello World!"
many questions to answer
What's In a Message?
- A message is a blank page
- We can write anything
- That's good, although-
- ...you end up with a custom format
Something like this...
public void handleMessage(String text) {
String[] strings = text.split("::::");
clientId = strings[1];
if (text.startsWith("add-client::::")) {
type = MessageType.ADD_CLIENT;
}
else if (text.startsWith("remove-client::::")) {
// ...
}
else if (text.startsWith("send-message::::")) {
// ...
message = strings[2];
}
else {
throw IllegalStateException("Unknown type");
}
}or this...
public void handleMessage(String text) {
String[] tk = text.split(":");
AuctionMessage msg = new AuctionMessage(tk[0],tk[1],tk[2]);
String type = msg.getType();
if (type.equals(AuctionMessage.LOGOUT_REQUEST)) {
// ...
}
else if (type.equals(AuctionMessage.AUCTION_LIST_REQUEST)) {
// ...
}
else if (type.equals(AuctionMessage.LOGIN_REQUEST)) {
// ...
}
else if (type.equals(AuctionMessage.BID_REQUEST)) {
// ...
}
}How to Handle a Message?
- What's the equivalent of
@RequestMapping? - Hard to provide useful annotations
- Not without assuming what's in the message
- Compare to HTTP where we have-
- ... URL, HTTP method, headers ...
No easy way to avoid
- One class to handle all messages
- One long if-else condition
- Compare to Spring MVC web application
- Many annotated controllers
How to Broadcast To
Subset of Users?
- Pass WebSocket session references around
- Keep track of who's interested in what
- A simple loop only scales so far
Broadcast with raw WebSocket...
public class Auction {
private List<WebSocketSession> sessions = new ArrayList<>();
synchronized void addSession(Session sess) {
this.sessions.add(sess);
}
public synchronized void removeSession(Session sess) {
this.sessions.remove(sess);
}
private void sendPriceUpdate() {
for (WebSocketSession sess : getSessions()) {
sess.sendMessage(new TextMessage(".."));
}
}
}More Questions
- Did the message get there?
- The WebSocket protocol provides no guarantees
- How to avoid blocking?
- Need event-driven, reactive programming model
Architecture
- WebSocket implies a messaging architecture
- Very different from HTTP/REST
- Closer to traditional messaging (AMQP, JMS)
- However still a web application
We could use a message broker
- RabbitMQ, ActiveMQ provide WebSocket support
- Messaging is a hard problem to solve
- Message brokers excel at it
- Although it is quite a shift for a web dev
Is It More Web or Messaging App?
A Bit of Both Worlds
- Event-driven, messaging architecture
- Ideally incorporate message broker
- Yet make it easy to do application things
- Web app not quite like traditional messaging app
- WebSocket not like traditional web app
Many takes on this problem exist...
STOMP
STOMP Protocol
- Simple protocol for asynchronous message passing
- Originally for scripting languages (Ruby, Python)
- Supported by message brokers
- Suited for use on the web
- Frames modelled on HTTP
STOMP Frame Content
Example Commands
SEND ===>>>SUBSCRIBE, UNSUBCRIBE ===>>>MESSAGE <<<===ERROR <<<===RECEIPT <<<===ACK, NACK ===>>>
The "Destination" Header
- A key concept in STOMP
- Opaque string, syntax left to server
- Typically URI path-like (
"/queue/a","/topic/a") - Message brokers define semantics
What Can a STOMP Client Do?
- Produce messages:
via SEND frame with "destination" header - Consume messages:
SUBSCRIBE frame w/ "destination" + MESSAGE frames from server - Server cannot send unsolicited messages!
Client as producer
Client as consumer
(Subscription)
Client as consumer
(Server sent message)
What using STOMP gives us-
STOMP in
Spring Framework 4
STOMP over WebSocket Support
- Easy to enable
- Application becomes STOMP broker to Web clients
- Annotated message-handling methods
- "Simple" broker for pub-sub-
- ...or full-featured message broker
New spring-messaging module
- Includes STOMP support
- Message-handling annotations
- Key abstractions moved from Spring Integration
(Message,MessageChannel,MesageHandler, ...) - Foundation for WebSocket messaging architecture
Configure STOMP over WebSocket
@Configuration
@EnableWebSocketMessageBroker
public class Config implements WebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry r) {
r.addEndpoint("/portfolio"); // WebSocket URL prefix
}
@Override
public void configureMessageBroker(MessageBrokerConfigurer c) {
c.enableSimpleBroker("/topic/"); // destination prefix
}
}Peer-to-Peer Pub-Sub
- Clients can now subscribe
- Clients can send and receive messages from peers
- No further server-side code required!
- "Simple" broker does it
Add Application Logic
- Clients exchanging messages is useful, but-
- ...how to insert application logic, security, validation?
- Answer:
use annotated message-handling methods - then publish to subscribed clients
Annotated Message Handling
@Controller
public class GreetingController {
// Mapping based on "destination" header
@MessageMapping("/greeting")
public void greet(@MessageBody String greeting) {
}
}Annotated Message Handling
@Controller
public class GreetingController {
// Mapping based on "destination" header
@MessageMapping("/greeting")
@SendTo("/topic/greetings")
public String greet(@MessageBody String greeting) {
return "[" + getTimestamp() + "]: " + greeting;
}
}Send Messages Programmatically
- Publish messages from any part of application
- Inject
SimpMessagingTemplate - Call
convertAndSendspecifying destination - Message sent to "broker" channel
E.g. Publish from Spring MVC
@Controller
public class GreetingController {
@Autowired
private SimpMessagingTemplate template;
@RequestMapping(value="/greeting", method=POST)
public void greet(String greeting) {
String text = "[" + getTimeStamp() + "]:" + greeting;
this.template.convertAndSend("/topic/greeting", text);
}
}Message Flow
Destination Prefixes
@Configuration
@EnableWebSocketMessageBroker
public class Config implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerConfigurer c) {
c.enableSimpleBroker("/topic/");
c.setApplicationPrefixes("/app");
}
// ...
}Handling Subscriptions
- You can handle subscriptions
- And send data back directly (not involving the broker)
- Effectively, request-reply message pattern
- (in traditional messaging app,
this would have been command + temp queues)
Responding to a Subscription
(Request-Reply Pattern)
@Controller
public class PortfolioController {
@SubscribeEvent("/positions")
public List<PortfolioPosition> getPositions(Principal user) {
Portfolio portfolio = ...
return portfolio.getPositions();
}
}Full-featured
Message Broker
Reasons for Full-featured Broker
- Simple broker supports subset of STOMP
(SUBSCRIBE,UNSUBSCRIBE,MESSAGE) - No acks, receipts, transactions
- Simple message sending loop
- Not suitable for clustering
Message Flow w/ Broker Relay
Enable Broker Relay
@Configuration
@EnableWebSocketMessageBroker
public class Config implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerConfigurer c) {
c.enableStompBrokerRelay("/queue/", "/topic/");
c.setApplicationPrefixes("/app");
}
// ...
}Using Full-featured Broker
- Check broker STOMP documentation page
- Understand destination semantics
- Any additional features
- Application is now backed by message broker
User Information
Authentication
- STOMP
CONNECTframe has authentication headers - Over WebSocket we can use HTTP
- Protect application as usual, e.g. Spring Security
- Messages will have "user" header added
Access to User Information
@Controller
public class GreetingController {
@MessageMapping("/greeting")
@SendTo("/topic/greetings")
public String greet(String greeting, Principal user) {
return "[" + user + "] says: " + greeting;
}
}Sending Messages to a User
- Report an error
- Send results asynchronously
- Many other use cases
Report Error
via @SendToUser
@Controller
public class GreetingController {
// ...
@MessageExceptionHandler
@SendToUser("/queue/errors")
public String handleException(IllegalStateException ex) {
return ex.getMessage();
}
}Send Results Asynchronously
via 'convertAndSendToUser`
@Service
public class TradeService {
@Autowired
private SimpMessagingTemplate template;
public void executeTrade(Trade trade) {
String user = trade.getUser();
String dest = "/queue/position-updates";
TradeResult result = ...
this.template.convertAndSendToUser(user, dest, result);
}
}How "SendToUser" Works
(client side)
- Client subscribes to queue with unique name suffix
- STOMP
CONNECTEDframe provides the suffix - along with current user name
Subscribe using Queue Suffix
var socket = new SockJS('/spring-websocket-portfolio/portfolio');
var client = Stomp.over(socket);
client.connect('', '', function(frame) {
var user = frame.headers['user-name'];
var suffix = frame.headers['queue-suffix'];
client.subscribe("/queue/trade-result" + suffix, function(msg) {
// ...
});
client.subscribe("/queue/errors" + suffix, function(msg) {
// ...
});
}How "SendToUser" Works
(server side)
- When you use
@SendToUser("/queue/a") - Resulting destination is
"/user/{user}/queue/a" - This is resolved to
"/queue/a/"+unique queue-suffix - and then sent to broker channel
Message Flow
Managing Inactive Queues
(full-featured brokers)
- Check broker documentation
- For example RabbitMQ creates auto-delete queue
with destinations like"/exchange/amq.direct/a" - ActiveMQ has config options to purge inactive destinations
The Client Side
Client-side Libraries
Improving the client-side with cujoJS
WebSocket Support in msgs.js
var bus = require('msgs').bus(),
SockJS = require('sockjs');
bus.channel('toServer');
bus.channel('fromServer');
bus.webSocketGateway(
new SockJS('/msgs'),
{ output: 'fromServer', input: 'toServer' }
);STOMP support in msgs.js
var bus = require('msgs').bus(),
SockJS = require('sockjs');
bus.stompWebSocketBridge('broker', new SockJS('/broker'));
// subscribe
bus.on('broker!/topic/price.stock.*', function(quote) {
portfolio.processQuote(quote);
});
// publish
var execTrade = bus.inboundAdapter('broker!/app/trade');
execTrade(trade);