Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

First Steps With Vert.x and Infinispan - Part 2: PUSH API

DZone's Guide to

First Steps With Vert.x and Infinispan - Part 2: PUSH API

In this series on Eclipse Vert.x and Infinispan, this tutorial explains how to create a PUSH API implemented with Vert.x and using Infinispan as a server.

· Integration Zone ·
Free Resource

How to Transform Your Business in the Digital Age: Learn how organizations are re-architecting their integration strategy with data-driven app integration for true digital transformation.

Welcome to the second in a multi-part series of blog posts about creating Eclipse Vert.x applications with Infinispan. In the previous blog post, we have seen how to create a REST API. The purpose of this tutorial is to showcase how to create a PUSH API implemented with Vert.x and using Infinispan as a server.

All the code of this tutorial is available in this GitHub repository. The backend is a Java project using Maven, so all the needed dependencies can be found in the pom.xml. The front is a super simple react application.

PUSH API

Creating a REST API is very straightforward. But today, even if we are heavily using REST, we don't always want to use request/response or polling, but instead, we want to push directly from the server to the client. In this example, we are going to create an API that pushes every new value inserted in the default cache of Infinispan. These values are cute names, as we did in the REST API example.

We are using two features here :

  • Infinispan client listeners
  • Vert.x bridge between the Event Bus and the browser

Infinispan Listeners provide a way to the client get notified when something happens in a cache.

The Event Bus Bridge that connects to the browser, uses SockJS. SockJS is a JavaScript library that provides a WebSocket API, but it can be used with browsers that don't support web-sockets (see the website of the project for more detailed information). Vert.x supports this library and creates a bridge between your browser and your back-end easily through the Event Bus.

Creating An Event Bus Bridge

Vert.x is a reactive framework, which means that uses RxJava too, and provides a fancy API on top of it.

First, we are going to create a new verticle called SendCuteNamesAPI. This verticle extends the CacheAccessVerticle we created in the previous blog post. CacheAccessVerticle initializes the connection with Infinispan using the Hot Rod protocol. The Infinispan server has to be running in standalone mode. Download Infinispan Server from here, unzip and run  ./bin/standalone.sh 

Now we need to create a SocketJSHandler. This handler has a method called bridge, where we configure some BridgeOptions. Obviously, we don't want the client to be able to read everything traveling on the event bus, and this won't happen. We configure an address, and we add the permission to read and write to this address.

This handler is passed to the event bus route, where the path is /eventbus/*.

Finally, we create an HTTP server as we did in the REST API example. The difference is that instead of calling listen  method, we call rxListen  and subscribe .

public class SendCuteNamesAPI extends CacheAccessVerticle {

   public static final String CUTE_NAMES_ADDRESS = "cute-names";

   @Override
   protected void initSuccess(Future<Void> startFuture) {
      logger.info("Starting SendCuteNamesAPI");
      Router router = Router.router(vertx);

      router.get("/").handler(rc -> {
         rc.response().putHeader("content-type", "text/html")
               .end("Welcome to Send Cute Names API Service");
      });

      SockJSHandler sockJSHandler = SockJSHandler.create(vertx);
      BridgeOptions options = new BridgeOptions();
      options.addOutboundPermitted(new PermittedOptions().setAddress(CUTE_NAMES_ADDRESS));
      sockJSHandler.bridge(options);
      router.route("/eventbus/*").handler(sockJSHandler);

      vertx.createHttpServer()
            .requestHandler(router::accept)
            .rxListen(config().getInteger("http.port", 8080))
            .doOnSuccess(server -> logger.info("HTTP server started"))
            .doOnError(t -> logger.log(Level.SEVERE, "HTTP server failed to start", t))
            .toCompletable()
            .subscribe(CompletableHelper.toObserver(startFuture));
   }

   ...

   public static void main(String[] args) {
      Vertx vertx = Vertx.vertx();
      DeploymentOptions options = new DeploymentOptions()
            .setConfig(new JsonObject()
                  .put("http.port", 8082)
                  .put("infinispan.host", "localhost")
            );
      vertx.deployVerticle(SendCuteNamesAPI.class.getName(), options);
   }
}


Getting Notified And Publishing

Using Infinispan listeners is very easy.

First, we are going to create a class that has the @ClientListener annotation. The client listener has to be added to the cache client configuration. We add a protected method called addConfigToCache that will be called just after the initialization of the defaultCache in the abstract CacheAccessVerticle. Verticles extending the abstract class can now add custom configuration to the client.

We want to be notified when a new entry is created. In this case, our listener has to contain a method with the @ClientCacheEntryCreated  annotation on it. The signature of the method has to include a ClientCacheEntryCreatedEvent parameter. This parameter will hold the 'key' of the entry that has been created.

Finally, we use the key to retrieve the name using the getAsync method and then publish the value in the Vert.x event bus to the address where the socket listener is permitted to read.

public class SendCuteNamesAPI extends CacheAccessVerticle {

   public static final String CUTE_NAMES_ADDRESS = "cute-names";

   ...

   @Override
   protected void addConfigToCache(RemoteCache<String, String> cache) {
      logger.info("Added cute names listener");
      cache.addClientListener(new CuteNamesListener());
   }

    @ClientListener
   public final class CuteNamesListener {
      @ClientCacheEntryCreated
      @SuppressWarnings("unused")
      public void created(ClientCacheEntryCreatedEvent<String> e) {
         defaultCache.getAsync(e.getKey()).thenAccept(cuteName -> {
            logger.log(Level.INFO, "publish cute name " + cuteName);
            vertx.eventBus().publish(CUTE_NAMES_ADDRESS, cuteName);
         });
      }
   }
}


Now we can run the main method and whenever we post a new name, we will see in the logs that the client listener is notified!

=====

Dec 08, 2017 12:20:53 PM org.infinispan.client.hotrod.RemoteCacheManager start
INFO: ISPN004021: Infinispan version: 9.1.1.Final
Dec 08, 2017 12:20:53 PM cutenames.CacheAccessVerticle lambda$start$1
INFO: Cache connection successfully done
Dec 08, 2017 12:20:53 PM cutenames.CuteNamesRestAPI initSuccess
INFO: Starting CuteNamesRestAPI in localhost:8081
Dec 08, 2017 12:21:22 PM cutenames.CuteNamesRestAPI handleAddCuteName
INFO: Add called
Dec 08, 2017 12:21:22 PM cutenames.CuteNamesRestAPI lambda$handleAddCuteName$2
INFO: Cute name added [42]

=====

INFO: ISPN004021: Infinispan version: 9.1.1.Final
Dec 08, 2017 12:20:57 PM cutenames.SendCuteNamesAPI addConfigToCache
INFO: Added cute names listener
Dec 08, 2017 12:20:57 PM cutenames.CacheAccessVerticle lambda$start$1
INFO: Cache connection successfully done
Dec 08, 2017 12:20:57 PM cutenames.SendCuteNamesAPI initSuccess
INFO: Starting SendCuteNamesAPI
Dec 08, 2017 12:20:57 PM cutenames.SendCuteNamesAPI lambda$initSuccess$1
INFO: HTTP server started
Dec 08, 2017 12:21:22 PM cutenames.SendCuteNamesAPI$CuteNamesListener lambda$created$0
INFO: Publish name Oihana

=====
view raw


Client Code

We are going to create a super simple react application that will just display hello. React community is huge, so there are lots of tutorials out there to create a hello world client application. This application has a single component that displays "Hello."

The react application runs, calling npm install and npm start in http://localhost:9000/ .

Now we need to connect the client to the backend with SockJS. Vert.x provides a JavaScript library for that: vertx3-eventbus-client, built on top of SockJS. We create an EventBus object that will connect to http://localhost:8082/eventbus as we configured in the SendCuteNamesAPI. We register a handler on the address. The body of the message will contain the new cute name published in the event bus. Every time the handler is called, we update the component's state, and it will be rendered.

import React from 'react'
import EventBus from 'vertx3-eventbus-client'

class CuteNames extends React.Component {

    constructor(props) {
        super(props);
        const eventBus = new EventBus("http://localhost:8082/eventbus");
        var _this = this;
        eventBus.enableReconnect(true);
        eventBus.onopen = function () {
            eventBus.registerHandler('cute-names', function (error, message) {
                if (error === null) {
                    console.info(message.body);
                    _this.setState({name:message.body});

                } else {
                    console.error(error, 'cute-names');
                }
            });
        };
        this.state = {
            name: 'no name'
        };
    }

    render() {
        return (
            <div className='cute'>
                <h1>Cute name</h1>
                <p>{this.state.name}</p>
            </div>
        );
    }
}

export default CuteNames


Wrap-Up

We have learned how to create your first PUSH API with Vert.x, powered by Infinispan. The repository has some unit tests. Feedback is more than welcome to improve the code and the provided examples. I hope you enjoyed this tutorial! In the next tutorials, we will talk about Infinispan as the cluster manager for Vert.x. Stay tuned!

Make your mark on the industry’s leading annual report. Fill out the State of API Integration 2019 Survey and receive $25 to the Cloud Elements store.

Topics:
vert.x ,infinispan ,rxjava ,push ,integration

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}