How to handle javascript http request from within vaadin application.

Flow
1

Hi,

In our vaadin application we are using javascript.js (by extending AbstractJavaScriptComponent)script to render chart visualization. For on of the requirement we need charts data to be refreshed on an regular interval. To achieve it I am writing a function which will prepare a http request and post it. In normal servlet it could be done easily by overriding doGet/Post method and invoke servlet from javascript being within same application. The issue I am facing here is Vaadin is not a simple servlet than it has wrapper around it. And I am having difficulty to write implementation for doGet and doPost to read the request parameter and call to the service method. I am not getting hold on those methods.

As i come to know it possible that we can call javascript methods form vaadin, but that would need a executable threads to run in an interval to push the updated data but i dont want the javscript state to be changed instead the chart should show updated data once it got navigated back, since our application already dealing with many other thread it might introduce performance issue.

Form my script I am writing request like below.

var url = "/monitorMap/?fetch=masterData";
http.open("GET",url);
http.send();
http.onreadystatechange=(e) => {
   try{
	var data = JSON.parse(http.responseText);
      }catch(e){
	console.log("Exception occured while sending/reading request " +e);
    }
}

then I am having javascript interval which will invoke the method in regular interval.
window.setInterval(pullMasterData(), 20000);

I am trying to know whether below could be possible with vaadin or not.

  1. ability to receive request parameter sent by javascript request.
  2. perform checks and call service methods.
  3. send back the response to the caller.

thanks

2

Hi Prashant,

Its quite easy to send requests from client to server or vise-versa. Take a look at https://vaadin.com/docs/v11/flow/polymer-templates/tutorial-template-basic.html and
https://vaadin.com/docs/v11/flow/advanced/tutorial-execute-javascript.html

3

Martin Israelsen:
Hi Prashant,

Its quite easy to send requests from client to server or vise-versa. Take a look at https://vaadin.com/docs/v11/flow/polymer-templates/tutorial-template-basic.html and
https://vaadin.com/docs/v11/flow/advanced/tutorial-execute-javascript.html

Thanks for the reply Martin,

I handled it by implementing RequestHandler with VaadinServlet. It worked as per the requirement.
4

Hi ,

In my flow i got stuck further with a case where I had to call a javaScript function when any server side UI component values gets updated. For example If i have a date picker in my vaadin application. I want to invoke a javascript function which is in myscript.js file.

myscript.js

window.A_B_MyComponent = function(){

     function display(){
	   alert("display when date got change");
	 }
}

I have below connector
Connector

package A.B;
@JavaScript({"myscript.js"})
public class MyComponent extends AbstractJavaScriptComponent{

 
}

Now in my vaadin code there is a date picker component. What i want to invoke display function of javascript when the value of date picker gets change. How i can do this ?