Other Web Apps based on WebSocket are coming...

Erel

B4X founder
Staff member
Licensed User
Longtime User
B4J allows you to build backend web servers with the server library.

Http web servers response to client requests. The communication is always made of a client request followed by a browser response. This method is very powerful however it is not simple when it comes to handling user interaction.

WebSocket is a relatively new protocol that makes it possible to create a full duplex connection between the client and the server and keep this communication channel open.
http://en.wikipedia.org/wiki/WebSocket

B4J v2.00 together with WebSocket will make it much simpler to develop web applications.
The UI will be written with Html and CSS and the logic will be implemented on the server.
The solution will be highly extensible. It will be very simple to combine JavaScript code and other JavaScript frameworks.

As a very first example you can try this "guess my number" app:
http://basic4ppc.com:51042/guessmynumber_ws/


The code:
B4X:
'Class module
Sub Class_Globals
   Private ws As WebSocket
   Private myNumber As Int
   Private timer1 As Timer
   'these variables will be set automatically.
   Private jqTxtNumber As JQueryElement 'matches an element with id = "txtnumber"
   Private jqResult As JQueryElement
   Private jqServerTime As JQueryElement
End Sub

Public Sub Initialize
   myNumber = Rnd(1, 101)
End Sub

Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
   ws = WebSocket1
   timer1.Initialize("timer1", 1000)
   timer1.Enabled = True
End Sub

Private Sub WebSocket_Disconnected
   timer1.Enabled = False
End Sub

Sub btnGuess_Click (Params As Map)
   Dim s As Long = DateTime.Now
   Dim number As String = jqTxtNumber.GetVal.Value
   If IsNumber(number) Then
     Dim n As Int = number
     If n > myNumber Then
       jqResult.SetHtml("My number is smaller.")
     Else If n < myNumber Then
       jqResult.SetHtml("My number is larger.")
     Else
       jqResult.SetHtml("<b>Well done!!!</b>")
     End If
   Else
     jqResult.SetHtml("Please enter a valid number.")
   End If
   jqTxtNumber.RunMethod("select", Null)
   Log(ws.UpgradeRequest.RemoteAddress & ": " & (DateTime.Now - s))
End Sub

Sub Timer1_Tick
   jqServerTime.SetHtml("Server time: " & DateTime.Time(DateTime.Now))
   ws.Flush 'required here as this is a server event
End Sub

Sub txtNumber_KeyUp(Params As Map)
   If Params.Get("which") = 13 Then
     btnGuess_Click (Null)
   End If
End Sub

Sub btnReset_Click (Params As Map)
   myNumber = Rnd(1, 101)
End Sub

The html code:
SS-2014-04-01_18.03.35.png


This is all of the code (except of 3 lines to start the server). The events are bound automatically. You do not need to know JavaScript in order to use it.

As you can see in this code it "directly" interacts with the html elements. It is quite similar to interacting with a standard UI though the network latency should be considered.

Most browsers already support the WebSocket protocol: http://caniuse.com/websockets
Android 4+ supports WebSocket with the Chrome browser.

Beta testers

If there are any members who would like become beta testers then please contact me by mail: erel@basic4ppc.com.

As with any new feature, your feedback is very important...
 
Last edited:

woniol

Active Member
Licensed User
Longtime User
B4J allows you to build backend web servers with the server library.

Http web servers response to client requests. The communication is always made of a client request followed by a browser response. This method is very powerful however it is not simple when it comes to handling user interaction.

WebSocket is a relatively new protocol that makes it possible to create a full duplex connection between the client and the server and keep this communication channel open.
http://en.wikipedia.org/wiki/WebSocket

B4J v2.00 together with WebSocket will make it much simpler to develop web applications.
The UI will be written with Html and CSS and the logic will be implemented on the server.
The solution will be highly extensible. It will be very simple to combine JavaScript code and other JavaScript frameworks.

As a very first example you can try this "guess my number" app:
http://basic4ppc.com:51042/guessmynumber_ws/


The code:
B4X:
'Class module
Sub Class_Globals
   Private ws As WebSocket
   Private myNumber As Int
   Private timer1 As Timer
End Sub

Public Sub Initialize
   myNumber = Rnd(1, 101)
End Sub

Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
   ws = WebSocket1
   timer1.Initialize("timer1", 1000)
   timer1.Enabled = True
End Sub

Private Sub WebSocket_Disconnected
   timer1.Enabled = False
End Sub

Sub btnGuess_Click (Params As Map)
   Dim number As String = ws.GetValue("txtNumber") 'txtNumber if the text input field
   If IsNumber(number) Then
     Dim n As Int = number
     If n > myNumber Then
       ws.SetHtml("result", "My number is smaller.") 'result is a <p> element
     Else If n < myNumber Then
       ws.SetHtml("result", "My number is larger.")
     Else
       ws.SetHtml("result", "<b>Well done!!!</b>")
     End If
   Else
     ws.SetText("result", "Please enter a valid number.")
   End If
   ws.RunMethod("txtNumber", "select", Null)
End Sub

Sub Timer1_Tick
   ws.SetHtml("server_time", "Server time: " & DateTime.Time(DateTime.Now))
End Sub

Sub txtNumber_KeyUp(Params As Map)
   If Params.Get("which") = 13 Then
     btnGuess_Click (Null)
   End If
End Sub

Sub btnReset_Click (Params As Map)
   myNumber = Rnd(1, 101)
End Sub

The html code:
SS-2014-04-01_18.03.35.png


This is all of the code (except of 3 lines to start the server). The events are bound automatically. You do not need to know JavaScript in order to use it.

As you can see in this code it "directly" interacts with the html elements. It is quite similar to interacting with a standard UI though the network latency should be considered.

Most browsers already support the WebSocket protocol: http://caniuse.com/websockets
Android 4+ supports WebSocket with the Chrome browser.

Beta testers

If there are any members who would like become beta testers then please contact me by mail: erel@basic4ppc.com.

As with any new feature, your feedback is very important...

Hi, are there any plans to implement ws client side in httputils2 for b4j and b4a. Is it possible at all?
 
Last edited:
Upvote 0

miker2069

Active Member
Licensed User
Longtime User
This is awesome. Is it blocking and does it handle one request at a time? Or can it service multiple request concurrently?
 
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
The Regex example, implemented with web sockets is now available: http://basic4ppc.com:51042/regex_ws/index.html

The code:
B4X:
Sub Class_Globals
   Private ws As WebSocket
   Private jqCaseSensitive, jqMultiline, jqPattern, jqTextArea, jqLogsDiv As JQueryElement
End Sub


Public Sub Initialize

End Sub

Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
   ws = WebSocket1
   jqTextArea.RunMethod("autosize", Null)
End Sub

Sub btnParse_Click (Params As Map)
   'get the required values
   Dim CaseSensitive As Future = jqCaseSensitive.GetProperty("checked")
   Dim Multiline As Future = jqMultiline.GetProperty("checked")
   Dim text As Future = jqTextArea.GetVal
   Dim pattern As Future = jqPattern.GetVal
   Dim options As Int = 0
   'only at this point the server will actually wait for the values to be available.
   If CaseSensitive.Value = False Then options = Regex.CASE_INSENSITIVE
   If Multiline.Value = True Then options = Bit.OR(options, Regex.Multiline)
   Try
     Dim m As Matcher = Regex.Matcher2(pattern.Value, options, text.Value)
     Dim res As StringBuilder
     res.Initialize
     Do While m.Find
       res.Append("Match (length=" & m.Match.Length & "): " & _
         WebUtils.EscapeHtml(m.Match)).Append("<br/>")
       For g = 1 To m.GroupCount
         res.Append("Group #" & g & ": " & WebUtils.EscapeHtml(m.Group(g))).Append("<br/>")
       Next
     Loop
     If res.Length = 0 Then res.Append("No matches were found.")
     jqLogsDiv.SetHtml(res.ToString)
   Catch
     ws.Alert("Error: " & LastException.Message)
   End Try
End Sub

In this code you can see a new important concept, the Future object. The server needs to access the browser data. In this case the server needs the values of four fields.
The naive solution is to send a request for an item, wait for the result and continue to the next one. However if the server is far from the client then it will be very slow.

Instead we are sending all the requests in the background and only when we actually need the value, the thread waits for the data to be available.
This way the time it takes to fetch a large number of fields is almost the same as the time it takes to fetch a single field as there is only a single round-trip.
 
Last edited:
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
The framework is evolving and is now more object oriented. As you can see in the updated code snippets there is a new JQueryElement type. Instances of this type point to DOM elements in the client browser.

The variables are set automatically when the websocket is connected. You can also manually create such elements, including elements that point to a set of elements based on jQuery selection feature.
 
Upvote 0

Jaames

Active Member
Licensed User
Longtime User
Both examples work as a charm even when I use my phone as a Wi-fi HotSpot (I tried 3G, Edge and GPRS connection) and my laptop connected to it (win 8.1). I'm using Google Chrome browser. Location - Bosnia and Herzegovina.
This will be extra feature , can't wait.. Thank you
 
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
Upvote 0
Top