Hoka + JS + css for dynamic web server

1

hello,

I want to integrate dynamic web server with microEJ to refresh data periodically.
Do you have a example to do it with hoka ?

2

Hi Nicolas,

I would recommend you to :

Use a rest server

Add the dependency

<dependency org="ej.library.iot" name="restserver" rev="[4.0.0,5.0.0[" />

Instantiates the RestServer

This server can have multiple endpoints:

RestServer restServer = new RestServer(PORT, 10, 2);
// Endpoint displaying the html page 
restServer.addEndpoint( new IndexEndpoint());
// Add endpoint to get value using js.
restServer.addEndpoint(new ValueEndPoint());
// Add js
restServer.addEndpoint(new ResourceRestEndpoint(SCRIPT, RESOURCES + SCRIPT));
// Add css
restServer.addEndpoint(new ResourceRestEndpoint(STYLE, RESOURCES + STYLE));

Create a js that cron for values

const REFRESH_TIME = 1000

function updateValues() {
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
		try {
			if (xhttp.readyState === XMLHttpRequest.DONE) {
				if (xhttp.status === 200) {
				     // Update the HTML page here
				}
				setTimeout(updateValues, 5000);
			}
		} catch (error) {
			setTimeout(updateValues, 5000);
			console.error(error)
		}
	};

	xhttp.open("GET", "/values", true);
	xhttp.send();
}


document.addEventListener('DOMContentLoaded', async () => {
	setTimeout(updateValues, 5000);
})

Create the dynamic endpoint

This endpoint (/valuse) from the js file will provide a JSON providing the values to display:

	@Override
	public HTTPResponse get(HTTPRequest request, Map<String, String> headers, Map<String, String> parameters) {
		StringBuilder builder = new StringBuilder("{\"myKey\":"); //$NON-NLS-1$
		builder.append(myValue);
		builder.append("}"); //$NON-NLS-1$
		HTTPResponse response = new HTTPResponse(builder.toString());
		response.setStatus(HTTPConstants.HTTP_STATUS_OK);
		response.setMimeType("application/json"); //$NON-NLS-1$
		return response;
	}

Modify the HTML page to put the initial value

This is optional, if you want to modify at runtime the HTML page to put the first value on the first display you can use a String builder:

@Override
	public HTTPResponse get(HTTPRequest request, Map<String, String> headers, Map<String, String> parameters) {
		HTTPResponse response = null;
		StringBuilder index = null;

		// read the html page into StringBuilder

		if (index != null) {
			replace(index, "my.html.key", myValue); //$NON-NLS-1$
			response = new HTTPResponse(index.toString().getBytes());
			response.setStatus(HTTPConstants.HTTP_STATUS_OK);
		} else {
			response = HTTPResponse.RESPONSE_INTERNAL_ERROR;
		}

		return response;
	}

	/**
	 * Replaces a key with a value.
	 *
	 * @param builder
	 *            the builder to replace from.
	 *
	 * @param id
	 *            the id to look for.
	 * @param value
	 *            the value to replace with.
	 */
	private void replace(StringBuilder builder, String id, long value) {
		int enterIndex = builder.indexOf(id);
		if (enterIndex >= 0) {
			builder.replace(enterIndex, enterIndex + id.length(), Long.toString(value));
		}
	}
}

If this is not needed, you can minify and gz your index which will reduce the flash, ram and network usage. Then modify the js to call the dynamic endpoint asap.

Regards,