HTTP upgrade along SOCK JS

Use the Apache Kafka PUSH paradigm on the STOMP client in action

STOMP client, SOCK JS, and WebSocket architecture

The scope of

This article is designed to help beginners and intermediates understand WebSocket** two-way and full-duplex ** communication to API(Application Program interface) and UI(user interface) communication, with code examples. The following concepts are explained. A. ebSocket, HTTP upgrade b. Sim JS, JavaScript libraryc.STOMP client (Simple text-oriented Messaging Protocol) D.Afka Asynchronous PUSH paradigm

A prerequisite for

A. kafka_2.13-2.8.0b.Offset Explorer 2.0 (Kafka tool) C. Boot

What is WebSocket? What advantages do we see over HTTP?

The HTTP encoding is synchronous and based on the pull paradigm. In the PULL paradigm, the client must initiate the request and poll the server to receive new data, which is half-duplex and one-way **. A new TCP ** Each time a connection is established, a new TCP transport control protocol is required.

Websockets are full-duplex and bidirectional. This means that a client or server can make a request, and communication can flow parallel in a continuous connection between the browser and the server until either party disconnects and closes the connection. In contrast to HTTP, WebSocket supports asynchronous communication and allows servers to initiate requests based on the **PUSH paradigm. The server can make requests and push real-time information to customers. The original HTTP connection is upgraded to WebSocket and used for _ all future traffic _ in _ a single TCP session. Websocket data exchange is much smaller than HTTP. **HTTP carries overhead every time a request is made and transfers header files and cookies to the server, which adds _ latency. Websocket provides a persistent low-latency connection.

How is the article organized? What components and products does it share to explain?

Let’s look at the design: – A simple browser client will establish a WebSocket connection through Sock JS, a JavaScript library. Requests from the browser are upgraded to the Websocket to provide a persistent, full-duplex, bidirectional connection. The Sock JS client will try to connect using the best transport available, namely [Websocket, XHR polling, XHR stream]. Simple Text-Oriented Messaging Protocol (STOMP) operates on the basis of the WebSocket Protocol, sending requests to the server and subscribing to an in-memory message broker. In this design, data is received from a Kafka Topic by a Kafka Listener and sent asynchronously to an in-memory message broker. Since the STOMP client has subscribed to the in-memory message agent, it will receive the data and display it on the client side. Data transfer from the client and data reception from the server are asynchronous.

Let’s take a look at this code and see how it works.

A. avaScript code

JavaScript code — connect and subscribe

The above JavaScript code calls the function connect() to start the HTTP connection and upgrade to webSocket. The endpoint passed to the Sock JS constructor is a registered STOMP endpoint that enables Sock JS to communicate with WebSocket. STOMP clients subscribe to an in-memory message broker to receive asynchronous data pushed by Kafka on the server side.

B. Boot Configuration class

The configuration code shows registering the STOMP endpoint and enabling the in-memory message broker.

STOMP registers and enables the in-memory message broker

** _C. Spring Boot Kafka Listener class _**Kafka Listener will asynchronously receive data from a Kafka Topic and push the received data to an endpoint to which the STOMP client is subscribed, which is an in-memory message broker, as shown below.

Kafka listener

Let’s run the application. Browser to server

In this application the following are performed:- 1. Start Zookeeper and Kafka Broker

The Zookeeper instance is running on port 2181

Kafka Broker 0 running on port 9092

2. Start the Offset Explorer tool and send messages to the Kafka Topic

Send messages to the Kafka agent — key/value pairs

3. Start the Spring Boot application

A message is received from the Kafka Broker

4. Start the browser in development tool mode and view the connection upgrade to WebSocket

Mode. Developer tools – Connect to UPGRADE

5. View the messages received from Kafka Topic subscribed to by STOMP clients

PUSH notifications – Asynchronous messages received from Kafka agents

conclusion

Through the summary of this article, we understand WebSocket with Sock JS and STOMP client definition and use advantages. The application design and implementation helped us understand the simple code snippet that started a WebSocket connection and received data asynchronously from a Kafka Topic to publish to the client’s user interface.