B4J Tutorial [WebApp] Web Apps Overview

B4J v2.00 adds support for web applications based on WebSocket technology. With WebSocket The browser and the server maintain an open communication channel.
This channel allows us to build web apps where all (or most) of the logic is implemented in the server.

The new framework is implemented in jServer library. It adds a new type of "handler" named WebSocket.
The browser UI is implemented in html / css.

B4J Web App Goals

• Simple to build real-world web applications with the same libraries and similar code as done in B4J / B4A.
• Good performance.
• Very easy to extend.

You can see several online examples here:

https://www.b4x.com:51041

The source code of all these examples is attached to this post.

What you need to know?

• Server library tutorial: [Server] Building web servers with B4J
  This tutorial was written before WebSockets were available.
• Html / CSS - Required for the UI.
• (recommended) Basic knowledge of jQuery. JQuery is a JavaScript library that simplifies access to html elements. B4J WebSocket client side implementation is based on jQuery.

Which browsers are supported?

All modern browsers support web sockets. See this table: http://caniuse.com/websockets
Android is a bit late here. The Chrome browser (compatible with Android 4.0+) supports web sockets.

How to deploy?

The compiled jar file is a standard Java app. The web server is embedded in this jar.
Any computer with Java 8+ installed can run it (including boards such as Raspberry Pi).
Shared hosting solutions will not work as they don't support Java. VPS solutions will work.
You can also turn a local computer into a public web server with a dynamic dns service:
http://www.b4x.com/android/forum/th...r-b4j-server-over-the-internet.37201/#content
Tip: if you are running it in linux then you should use the nohup command.

Where do I go from here?

[WebApp] Hello World Web App
Other tutorials: http://www.b4x.com/android/forum/pages/results/?query=webapp&page=1&prefix=18

The online examples project is attached.
The full project depends on a MySQL database (and several other libraries - see post #19).
You can start with the NoMySQL project which doesn't depend on MySQL.

The full project depends on: jBuilderUtils, jExcel, ByteConverter and Encryption.

Updates

- b4j_ws.js v0.92 is included in the zips. It fixes a potential issue where events are registered multiple times.

 

[Erel]

ServerExampleNoMySQL project was updated. It fixes an issue with Safari browsers ignoring the existing session in WebSocket connections.

The solution is to add a filter that creates the session (if needed) before the upgrade request:

srvr.AddFilter("/b4j_ws.js", "SessionCreator", False)

The filter code:

Public Sub Filter(req As ServletRequest, resp As ServletResponse) As Boolean
   req.GetSession
   Return True
End Sub

 

[RobertNM]

Hi All,

find attached my first B4J WebApp, a simple TaskMgr, based upon B4J v2.00 and WebSockets.
It is amaizing what can be done with this new technology - a lot to learn & explore!
Thanks a lot to Erel for the further development of B4J - such a great product!

Download TaskMgr: http://www.rwblinn.de/b4j/b4jhowto/examples/b4jhowtowebapptaskmgr.zip



Notes:

• when clicking on Date, a DatePicker is shown based upon jQuery UI datepicker.
• to learn more about jQuery, this sample app will be developed further.

 

[jchal]

erel hi
can we have the same example in b4a Please?

 

[Erel]

There is no equivalent feature in B4A.

 

[Buks]

I deployed the ServerExampleNoMySQL to a Raspberry PI 2B via B4J-Bridge.
I get the following error when trying to open the web from Google Chrome browser:
HTTP ERROR 404
Problem accessing /. Reason:

Not Found


Powered by Jetty:// 9.4.z-SNAPSHOT

Is there a better way to create web applications on a Raspberry PI?

Kind regards

 

[Erel]

Please start a new thread in the questions forum.

 

[Erel]

- b4j_ws.js v0.92 is included in the zips. It fixes a potential issue where events are registered multiple times.