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.

 

[jcredk]

Hi all,
I am working on a project to make Android devices push messages to each other (not chaos, with a logic behind). This server apps seems a great starting point.
Let's assume that my ADSL box is having a DNS ("MyDNS"), and the raspberry pi having a fix local ip adress ("PiIP")

If I want to run the server of this tutorial, could you tell me how I should setup the ADSL port forwarding to "expose" the Pi to the web please ?

Thanks,

 

[Erel]

Make sure to go over this tutorial: Custom WebSocket Based Push Framework

You should start a new thread for this question.

 

[Roberto P.]

I was able to install and run the sample. Is there a way to launch the server without displaying the console dos?
Or is there a way to launch the server as a service?

here's how to launch the application: "C: \ Program Files (x86) \ Java \ jre7 \ bin \ java" -jar MetaDataSyncServer.jar

thanks

 

[Erel]

Please start a new thread for this question.

 

[iCAB]

Hi Erel

I am trying to work with the examples attached:
ServerExampleNoMySQL.zip, gives me a compile error when I try to "Compile to library" (
Error description: Cannot access excluded module: main
Occurred on line: 15
resp.SendRedirect(req.FullRequestURI.Replace("http:", "https:") _
.Replace(Main.srvr.Port, Main.srvr.SslPort)))



Thank you

 

[Erel]

Why do you want to compile it to a library? It will not work as many modules reference variables from the main module (which will not be compiled into the library).

 

[iCAB]

Sorry my mistake ... not familiar with B4J properly ...I just wanted to create the .jar file and I didn't know that I need to compile in release mode.

1. Can you please let me know what is the name of the process that runs
2. Can we control the name process name
3. and what is the proper way to launch a process like this at startup..
4. also how do we terminate and restart the process

The reason for my questions above:
I downloaded "Process Explorer", and I tried to find out the name of the process by locating the process locking the .jar file after I launched from the command line. I terminated the process, but I still get address in use when I try to run the server from the B4J.

Please clarify



Thank you

 

[Erel]

Please start a new thread for these questions.

 

[iCAB]

Hi Erel

After adding WSPushService to my app, I started getting "Unfortunately ProgramName has stopped" after terminating the app.
The issue is due to some uninitialized variables that are being access by the Service ( please note that there is no issue while the application is running as all these variables are initialized proper during run time )

I am not sure what I am doing wrong in here, but here is what I have done so far

#Region  Service Attributes
    #StartAtBoot: false
    #StartCommandReturnValue: android.app.Service.START_STICKY
#End Region

Sub Activity_Destroy
    Try
  
        StopService(WSPushService)
       Log(  "destroyed" )
      
    Catch
  
        Log(LastException)
      
    End Try
  
End Sub

I have also commented out: StartServiceAt in Service_Start

any advise is greatly appreciated

 

[Erel]

Please start a new thread for this question. Also make sure not to limit your question to a single member.

 

[salim safran]

did any try to run such a b4j web application for example on raspberry pi in away configured as captive portal so when access as wifi spot will be directly forwarded to the bj4 web application without needing to worry about the ip address. the procedure is documented on the internet but will appreciate your input on this issue within b4j

 

[Erel]

Please start a new thread for this question.

 

[Douglas Farias]

@Erel when you have a time add option to login with face google or twitter on the login example pls?

 

[Erel]

You should post it in the wishlist forum.

 

[yontala]

I am very confused. I 'm trying to do the example "HelloWorld" application from scratch but, when compiled in release mode I don't see the files "b4j_ws" and "index" . I understand that I have to make an HTML index, but in the example there are two index and "b4j_ws". Can some one help me?

 

[DonManfred]

to do the example "HelloWorld" application from scratch but

you started to use the wrong source and posting to the wrong thread?

If you are talking about the HelloWorld then i guess you should use the source in this thread instead if this here

With the right source you will see
E:\B4J\Projekte\WebAppHelloWorld\Objects\www (please note this is my path)

but in the example there are two index and "b4j_ws"

As you can see in my snapshot there are ONE html-file, ONE CSS-file and ONE b4j_ws.js javascript file

Please note that you should show the file extensions. It would make some things easier like now where you are irritated.

 

[yontala]

Wow!
Thank you!
I finally understand . The problem is that my PC does not recognize these files.
I use windows 7.

I apologize , I saw the link of "HelloWorld" app at the beginning of this post.

 

[Erel]

This is not the correct place to post questions.

 

[yontala]

Sorry, where is the place to this kind of question?

 

[DonManfred]

where is the place to this kind of question?

NOT in the Tutorial-Thread

Create a Thread in the B4J Question forum.