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.

 

[jl888]

Thank you Erel.

 

[Erel]

The example projects were updated with the new Quiz example: http://basic4ppc.com:51042/quiz/index.html

 

[Erel]

Project was updated with the new custom push framework: http://www.b4x.com/android/forum/threads/custom-websocket-based-push-framework.40272/

http://basic4ppc.com:51042/push/index.html

 

[Erel]

The server projects were updated. The update fixes an issue with repetitive push messages. The projects require B4J v2.20+.

 

[bluedude]

I definitely think we need a few guides to set it up on VPS systems. I run a CentOS VPS but have no clue how to configure and use this

WebSockets would solve a shitload of issues with GCM (sometimes slow).

Anyone?

 

[Erel]

WebSockets would solve a shitload of issues with GCM (sometimes slow).

How are WebSockets related to GCM? sorry I misread your sentence.

Start a new thread for the deployment question. As written in the tutorial the WebApp jar is a regular executable java jar. You just need to install Java and run it.

 

[Douglas Farias]

erel the examples run only at vps?
i have a websitehost and i put this on but give erros
here is the link
http://likeapps.net/chat/

i need a vps to work the examples?

 

[Erel]

Yes. A VPS is usually required.

 

[LucaMs]

This tutorial was written before WebSockets were available.

This phrase makes me think that in any case it is best to use this new opportunity.

All this is unclear to me, I will have to read again and better, but maybe these WebSocket-WebApp are not needed in my case, for which I should probably use a non-UI server, right?

Also because I fight with html-javascript-jquery ... I prefer the Chinese

(I'm referring to that sort of poker for mobile)

 

[Erel]

I will have to read again and better, but maybe these WebSocket-WebApp are not needed in my case, for which I should probably use a non-UI server, right?

It really depends on your requirements. WebSockets should mostly be used when you need to create a rich user interface (or if a push / continuous connection is required). If you want to build an API for other applications then WebSockets are less useful.

 

[LucaMs]

It really depends on your requirements. WebSockets should mostly be used when you need to create a rich user interface (or if a push / continuous connection is required). If you want to build an API for other applications then WebSockets are less useful.

I need to study


Many thanks

 

[LucaMs]

It really depends on your requirements. WebSockets should mostly be used when you need to create a rich user interface (or if a push / continuous connection is required). If you want to build an API for other applications then WebSockets are less useful.

API - Who knows how many API I used ... but how to create it for my purpose?

Since I'm awake now as a mummy , I do (perhaps again) an elementary example:

many poker tables "connected" to the server;
a player raises x$;

I guess I have to make a call similar to this from your example "Upload files from your app to your B4J B4A server over the internet":

Private Sub btnSendMessage_Click
    Dim j As HttpJob
    j.Initialize("msg", Me)
    j.PostString(ServerLink & "?type=text", txtMessage.Text)
    mPhone.HideKeyboard(Activity)
End Sub

replacing the txtMessage.Text with some text-command,
and then manage everything on server through those "Handler" (classes).

But most likely there is a better method, since in this way everything seems to me very fragmented.


[P.S. this may seem off-topic, but I also wonder if you should use these WebSockets somehow]

 

[Erel]

Please start a new thread for this discussion.

 

[Baltazar]

where do i find all the needed libraries for the examples?

It would be great if you can set links to the needed libraries in first post.

Actually i´m searching for (and did not find them actually):
SecureRandom, MessageDigest, ByteConverter

In relation to this animal SecureRandom , I can't run Erel's ServerExample. I searched both B4A & B4J forums but can't get any clue as to which is the culprit why I'm having this Error. Note that I have checked all the libraries but to no avail.

 

[billzhan]

see post #19 for libs needed .
Encryption library (can also be used in B4A)
http://www.b4x.com/android/forum/threads/base64-and-encryption-library.6839/

 

[Baltazar]

Thanks. It resolved the issue but now it says "Unknown Member -- ws.RunFunction("Pong", Null)" in the PushB4A module. I probably need to update my libraries.

 

[billzhan]

I think the last lib (websocket(v1.01)) in you picture is a B4A only lib,it has a member with same name 'WebSocket' as B4J server lib . Remove it.

Please make sure that you are using B4J 2.20 and java 1.7+

 

[Baltazar]

Thanks. There is a progress indeed. I have managed to compile it and dumped all the www folder contents in my Apache document host folder. I can view the default (index.html) page on any of my device connected to my Apache server; it shows the selection (menu) but some elements are missing like the excel table, the bouncing smiley etc.

 

[billzhan]

B4J web server uses Jetty (embedded as jServer lib) , just put the demo under any folder and run it. Apache is not needed

You can start with B4J server and single demo tutorials.
http://www.b4x.com/android/forum/threads/server-building-web-servers-with-b4j.37172/
http://www.b4x.com/android/forum/pages/results/?query=server&page=1&prefix=18

Webapp demos (in this thread) need more than a B4J server demo (Websocket browsers), please follow the steps in post #1

 

[Baltazar]

I see. My purpose of running it in a real server is part of my requirements in the academe . Some advanced studies , sort of. I have tried the simpler demo , yest it did work. Thanks again.