B4J Tutorial [WebApp] Chatroom - Threads, Sessions and Server events

Online example: http://basic4ppc.com:51042/chat/index.html

This example demonstrates several important concepts of the web app framework.

Multiple pages

The chatroom is made of two pages. The login page and the chat page.
The WebSocket is broken when the browser navigates to a different page (or refreshes the current page). The http session allows us to pass data from one page to another. In this example the user name is stored in the login page and then retrieved in the chat page:

'login
ws.Session.SetAttribute("name", name)
WebUtils.RedirectTo(ws, "chat.html")

'chat page
If ws.Session.HasAttribute("name") = False Then
   'name not found. Go to the login page. This will happen if the user goes to the chat page directly.
   WebUtils.RedirectTo(ws, "index.html")
Else
   name = ws.Session.GetAttribute("name")
   ws.Session.RemoveAttribute("name") 'remove the attribute
   'the user will be redirected to the login page next time.

   CallSubDelayed3(ChatShared, "NewConnection", Me, name)
   txt.RunMethod("select", Null)
End If

Threads

Each WebSocket class instance runs in a different thread (in release mode). This allows many users to be connected at the same time.
CallSubDelayed was modified in B4J v2.00 to be executed on the target object thread. This allows us to safely call subs in other modules or instances.
In this example we have a code module named ChatShared. This module holds references to all the active connections and whenever there is a new message it uses CallSubDelayed to notify each of the instances about the new message:

'ChatShared code module
'notify each of the connected users about the new message
For Each c As Chat In connections.Values
   CallSubDelayed2(c, "NewMessage", msg)
Next

'Chat WebSocket class
Sub NewMessage(Msg As String)
   ChatTxt.RunMethod("append", Array As Object(Msg))
   ws.RunFunction("scrollDown", Null)
   ws.Flush
End Sub

The code in code modules will run in the main thread if we call it with CallSubDelayed.
In this example we call WebUtils methods directly as these methods do not rely on any shared data.

Server events

One of the great features of WebSockets is the simple support for server events. Unlike ajax based solutions, the clients don't need to poll the server with endless requests. At any given time the server can send messages to the client.
There is one extra step with server events. You must call ws.Flush at the end of the event. Flush is called internally in the case of client events.

 

[LucaMs]

Yes.

 

[LucaMs]

What should I change in this web app Chat to play a sound on new msg?

I found the example I'm attaching, but I am a completely "newbie" (and probably I want to continue to be a newbie ) with java scripts, ajax & C.

I suppose I have to modify Chat.html (and ChatShared.NewMessage to call a function of Chat.html).

(please, start a new thread for this question : can PHP, JavaScript, Ajax... "coexist"? Uhm... maybe not, they must be elaborated by the server... mah!)


Thaaank you

 

[LucaMs]

I have tried so:

    <script>
    function scrollDown() {
     $("#chattxt").animate({
            scrollTop: $('#chattxt').prop("scrollHeight")
        }, 300);
        $('#chatAudio')[0].play();
    }
    $( document ).ready(function() {
        b4j_connect("/main");
    });
    </script>

adding one code line: $('#chatAudio')[0].play();

and:

$(function(){
$('<audio id="chatAudio"><source src="notify.ogg" type="audio/ogg"><source src="notify.mp3" type="audio/mpeg"><source src="notify.wav" type="audio/wav"></audio>').appendTo('body');
});

before </head>.

it is not enough

(audio files in www folder)

 

[Roycefer]

jQuery has a handy sound API. You'll need the jquery.playSound.js file and you'll call

$.playSound("notify");

in your JavaScript.

 

[LucaMs]

Thank you, @Roycefer but I'm a really, but really newbie.

Is jquery.playSound.js a "standard" / common file?

And where should I put that call ($.playSound("notify")


Thank you again.

 

[LucaMs]

@Roycefer the index.html I attached in #43 seems to be "simple" (not to me, but to you ).

I guess I should extrapolate a few lines of code.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>9lessons Javascript Notification Sound</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#chatData").focus();

THIS ONE ---> $('<audio id="chatAudio"><source src="notify.ogg" type="audio/ogg"><source src="notify.mp3" type="audio/mpeg"><source src="notify.wav" type="audio/wav"></audio>').appendTo('body');


  $("#trig").on("click",function(){
    var a = $("#chatData").val().trim();
    if(a.length > 0){
    $("#chatData").val('');
    $("#chatData").focus();
     $("<li></li>").html('<img src="small.jpg"/><span>'+a+'</span>').appendTo("#chatMessages");
      $("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow");

AND THIS --->      $('#chatAudio')[0].play();

    }
  });
});
</script>
<style type="text/css">
* { padding:0px; margin:0px; }
body{font-family:arial;font-size:13px}
#chatBox {width:400px; border:1px solid #000;margin:5px;}
#chatBox > h3 { background-color:#6d84b4; padding:3px; color:#fff; }
#chat { max-height:220px; overflow-y:auto; max-width:400px; }
#chat > ul > li { padding:3px;clear:both;padding:4px;margin:10px 0px 5px 0px;overflow:auto }
#chatMessages{list-style:none}

#chatMessages > li > img { width:35px;float:left }
#chatMessages > li > span { width:300px;float:left;margin-left:5px}
#chatData { padding:5px; margin:5px; border-radius:5px; border:1px solid #999;width:300px }
#trig { padding: 4px;border: solid 1px #333;background-color: #133783;color:#fff;font-weight:bold }
</style>

</head>
<body>
 
    <div style='margin:0 auto;width:800px;'>
        <div style='margin:20px'>
    <h1>Javascript Notification Sound</h1>
    <h3>Turn the volume up and try this demo <a href='http://9lessons.info'>9lessons.info</a></h3>
    </div>

 
    <div id='chatBox' style='margin-top:20px'>
        <h3>9lessons Demo Chat</h3>
        <div id='chat'>
            <ul id='chatMessages'>
                <li>
                    <img src="small.jpg"/>
                    <span>Hello Friends</span>
                </li>
                <li>
                    <img src="small.jpg"/>
                    <span>How are you?</span>
                </li>
            </ul>
        </div>
        <input type="text" id="chatData" placeholder="Message" />
        <input type="button" value=" Send " id="trig" />
    </div>


    </div>
  <iframe src="http://demos.9lessons.info/counter.html" frameborder="0" scrolling="no" height="0"></iframe>
</body>
</html>

but then?

 

[Roycefer]

https://github.com/admsev/jquery-play-sound has the jquery.playSound.js file. If you host the file on your site, just add

<script src="jquery.playSound.js"></script>

in your <head> section.

Then you can put something like this in your main <script> section and call it as you would a normal function:

function playNotification()
{
    $.playSound("notify");
}

The advantage of using jQuery is that it is typically very good at cross-browser compatibility. Directly playing audio files is problematic as different browsers require different syntax.

 

[LucaMs]

Many thanks, I'll try

 

[LucaMs]

It works, but the html page shows this message:

To show this content a plugin is required

Probably my previous tests did not work because I should have used "/" before the name of audio files. More tests

 

[LucaMs]

Now it works:

<script type="text/javascript">
$(function(){ 
  $('<audio id="chatAudio"><source src="notify.ogg" type="audio/ogg"><source src="notify.mp3" type="audio/mpeg"><source src="notify.wav" type="audio/wav"></audio>').appendTo('body');
});
</script>

function PlaySound() {
  $('#chatAudio')[0].play();
}

 

[Erel]

Please start a new thread for the next question.

 

[LucaMs]

Please start a new thread for the next question.

My question would be:
"How can I add sound to this chat, this source code"

When I wrote that I should ask the question in a new thread, I was referring to the coexistence of different "kind" of scripts.

But I could open my personal thread where put my questions, it could be an idea

 

[divagathaz]

Can anyone help me resolve this

it says "Unknown member : remoteattribute"

 

[Erel]

It should be RemoveAttribute.

 

[divagathaz]

It should be RemoveAttribute.

I already wrote it that way. but still. it says unknown member: remoteattribute

 

[mindful]

I already wrote it that way. but still. it says unknown member: remoteattribute

Read again. From this side it says ws.Session.RemoteAttribute

 

[Erel]

I've updated the project. You can download it again from the first post.