Robs Homepage ... motivated by developing Software Solutions and share as Open Source

Experiment

Objective
Show Hello World on a Webpage with a Button bringing up an Alert Window with About information.
Solution
A B4J server application running on the Pi.
Access the Application via Webbrowser with URL http://ipaddress:51042, like http://192.168.0.57:51042.
Notes
Ensure to read Get Ready first. For detailed information about this HowTo, look up in project source.
Download
file_download the project source.


Screenshot

Description

Projectfile helloworld.b4j
The project file helloworld.b4j defines and starts the server. The server requires the library jServer.
'Init the webserver
srvr.Initialize("srvr")
'Add the websockets, set the port and start the server
'Note: The port must be unique for this server application
'The class helloworld is defined in helloworld.bas
srvr.AddWebSocket("/ws", "helloworld")
srvr.Port = 51042
srvr.Start

Websocket Class helloworld.bas
The Websocket and jQueryElements are defined as globals.
The websocket handles the user connections and data exchange between the index file (index.html stored in the www folder) and the server.
The jQueryElements are used to update HTML Selectors and Button actions. These are recognized by their ID's.
When the application is running and a user connects, the page Index.html is loaded and the Sub WebSocket_Connected is executed first.
The selector (as defined in Index.html) lblhelloworld is updated using
lblhelloworld.setHtml("...")
. That's it.
When the user clicks on the Button Click me!, the Sub btnHelloWorld_click is executed.
The Websocket method Alert is called:
ws.Alert("...")
.