This article is more technical oriented and targeting other developers, not the final client. Usually, systems require communication from the server to the client. This is essential because some events occur on the server and a notification must be sent to the client. A simple use case is a chat, where users can exchange messages between them. We can use other technologies too, for example, the Message Queue system. Depending\u00a0on your needs you can choose the most suitable one.<\/p>\n
Description<\/strong><\/p>\n In this post we will discuss push messages using WebSocket. My goal is to describe the pedagogy behind the work, when it comes to delivery and production, we obviously have simpler routines at the company to accommodate each client order.<\/p>\n Goals\u00a0<\/strong><\/p>\n To be able to implement push notifications in web applications<\/p>\n Requirements\u00a0<\/strong><\/p>\n Grails 3.* (Dependencies<\/strong>: Grails Spring WebSocket, Grails Spring Security Rest)<\/p>\n React.js (Dependencies<\/strong>: Sock.js client, Stomp.js)<\/p>\n 1 – Server configuration<\/strong><\/p>\n We need to configure our WebSocket message agent to allow our system to send and receive messages through secure channels.<\/p>\n The following code (configureClientInboundChannel <\/em>method) shows how to authenticate through WebSocket. We need to be sure that only an authorized user can connect, subscribe and receive messages from our server. Our system uses Spring Security Rest and, consequently, users are authenticated through the access token in each request.<\/p>\n We also configure the endpoint in which our message agent will listen to subscription requests and messages (registerStompEndpoints <\/em>method)<\/p>\n 2 –\u00a0Sending notifications<\/strong><\/p>\n We use Grails Spring WebSocket and it will provide us with the necessary functionality ready to use according to the configuration.<\/p>\n In our example, the messages will have a related action, in order to delete, update or create messages in the client. This is also possible if we create different topics<\/em> for that purpose, but in this case it is not relevant.<\/p>\n BrokerService<\/em> will be responsible for sending messages to a destination using brokerMesssagingService.<\/p>\n 3 –\u00a0Web client configuration<\/strong><\/p>\n In the web client we use Sock.js and Stomp.js to subscribe to our messaging channel.<\/p>\n To subscribe to a channel in the connection request, we send the header configuration with the user’s token as authorization.<\/p>\n We set as parameter a callback function that will be executed after receiving a message from the server.<\/p>\n The unsubscribe method allows you to delete a subscription, the user will not receive anymore push notifications afterwards.<\/p>\n 4 – Subscription and reception of notifications<\/strong><\/p>\n We will place the subscription call on componentDidMount<\/em> using a class based on React Component.<\/p>\n We also need to implement the functionality that will be executed once we receive the notifications.<\/p>\n Conclusion<\/strong><\/p>\n Push notifications make our system more attractive and useful, it also reduces server latency and improves user experience. In many cases, we can add it using WebSockets in an easy way and with good results.<\/p>\n References<\/strong><\/p>\nimport grails.plugin.springsecurity.rest.token.storage.TokenStorageService\r\nimport org.springframework.beans.factory.annotation.Autowired\r\nimport org.springframework.context.annotation.Bean\r\nimport org.springframework.context.annotation.Configuration\r\nimport org.springframework.messaging.simp.SimpMessageType\r\nimport org.springframework.messaging.simp.config.ChannelRegistration\r\nimport org.springframework.messaging.simp.stomp.StompHeaderAccessor\r\nimport org.springframework.messaging.support.ChannelInterceptorAdapter\r\nimport org.springframework.messaging.support.MessageBuilder\r\nimport org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer\r\nimport org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker\r\nimport org.springframework.web.socket.config.annotation.StompEndpointRegistry\r\nimport org.springframework.messaging.Message\r\nimport org.springframework.messaging.MessageChannel\r\n \r\n\r\n@Configuration\r\n@EnableWebSocketMessageBroker\r\nclass DefaultWebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {\r\n\r\n public static final String AUTHORIZATION = 'Authorization'\r\n public static final String BEARER = 'Bearer'\r\n\r\n @Autowired\r\n TokenStorageService tokenStorageService\r\n \r\n\r\n@Override\r\nvoid registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {\r\n stompEndpointRegistry.addEndpoint(\"\/ws\")\r\n .setAllowedOrigins(\"*\")\r\n .withSockJS()\r\n .setSessionCookieNeeded(false)\r\n}\r\n \r\n\r\nvoid configureClientInboundChannel(ChannelRegistration registration) {\r\n registration.setInterceptors(new ChannelInterceptorAdapter() {\r\n Message<Object> preSend(Message<Object> message, MessageChannel channel) {\r\n String token = null\r\n Boolean access = false\r\n StompHeaderAccessor accessor = StompHeaderAccessor.wrap(message)\r\n List tokens = accessor.getNativeHeader(AUTHORIZATION)\r\n accessor.removeNativeHeader(AUTHORIZATION)\r\n\r\n if(tokens?.size > 0) {\r\n token = tokens[0]\r\n }\r\n\r\n if (token?.startsWith(BEARER)) {\r\n token = token.substring(BEARER.length()).trim()\r\n }\r\n\r\n switch (accessor.messageType){\r\n case SimpMessageType.CONNECT: access = (tokenStorageService.loadUserByToken(token))?true:false\r\n break\r\n case SimpMessageType.SUBSCRIBE: access = (tokenStorageService.loadUserByToken(token))?true:false\r\n break\r\n }\r\n accessor.setLeaveMutable(true)\r\n return (access)?MessageBuilder.createMessage(message.payload, accessor.messageHeaders):null\r\n }\r\n })\r\n}<\/pre>\nclass BrokerService {\r\n\r\n def brokerMessagingTemplate\r\n \/**\r\n * Send message to destination\r\n * @param destination\r\n * @param message\r\n *\/\r\n void send(String destination, Map message) {\r\n brokerMessagingTemplate.convertAndSend destination, (message as JSON) as String\r\n }\r\n}<\/pre>\nimport {SERVER_URL} from \"..\/config\";\r\nimport headers from \"..\/security\/headers\";\r\nimport SockJS from 'sockjs-client';\r\nimport Stomp from 'stompjs';\r\n\r\n\/**\r\n * WebSockets support\r\n *\/\r\nconst WebSocket = (endpoint) => {\r\n\r\n const socket = SockJS(`${SERVER_URL}\/${endpoint}`);\r\n const client = Stomp.over(socket);\r\n\r\n function subscribe(destination, callback) {\r\n client.connect(headers(), function(frame) {\r\n client.subscribe(destination, function(message){\r\n callback(JSON.parse(message.body))\r\n }, headers());\r\n });\r\n return client;\r\n }\r\n\r\n function unsubscribe(client){\r\n for (const sub in client.subscriptions) {\r\n if (client.subscriptions.hasOwnProperty(sub)) {\r\n client.unsubscribe(sub);\r\n }\r\n }\r\n }\r\n\r\n return {\r\n subscribe,\r\n unsubscribe\r\n }\r\n\r\n};\r\n\r\nexport default WebSocket;<\/pre>\nimport React from 'react';\r\nimport WebSocket from \"..\/..\/api\/WebSocket\";\r\nimport {ACTION_STATUS} from '..\/..\/constant';\r\nimport MessageList from \"..\/..\/components\/MessageList\";\r\nimport { notifyAddedMessage, notifyDeletedMessage, notifyUpdatedMessage} from \"..\/..\/actions\/actions\";\r\n\r\n\r\n\/**\r\n * Real-time messages\r\n *\/\r\nclass MessagePanel extends React.Component {\r\n\r\n componentDidMount() {\r\n this.subscribe();\r\n\r\n }\r\n\r\n componentWillUnmount() {\r\n if(this.state.client !== undefined)\r\n WebSocket('ws').unsubscribe(this.state.client);\r\n }\r\n\r\n subscribe() {\r\n const callback = (message) => {\r\n switch (message.action){\r\n case ACTION_STATUS.DELETED:\r\n this.props.notifyDeletedMessage(message.id);\r\n break;\r\n case ACTION_STATUS.UPDATED:\r\n this.props.notifyUpdatedMessage(message);\r\n break;\r\n default:\r\n this.props.notifyAddedMessage(message);\r\n }\r\n };\r\n callback.bind(this);\r\n\r\n let client;\r\n if (user instanceof Object) {\r\n client = WebSocket('ws').subscribe(\u2018\/topic\/messages\u2019, callback);\r\n this.setState({client});\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <MessageList\/>\r\n )\r\n }\r\n}<\/pre>\n