B4J Question Websockets vs JQuery events

[wl]

Hi,

I'm writing a websocket application but I was wondering: a soon as I connect my webpage to the server the click events of any of the HTML buttons trigger a method on the server.

How would I handle the button clickevent in JQuery (client-side) and call a method on the websocket from within this JQuery event ?

This does not seem to work:

$(document).ready(function() {
  b4j_connect("/overview");
  $("#enter").off();
  $("#enter").click (function() {
    alert('foo');
  });
});

This code is working neither:

$(document).ready(function() {
  b4j_connect("/overview");
  $("#enter").unbind("click");
  $("#enter").bind ("click", function (e) {alert('foo');});
});

Thanks

 

[Daestrum]

Did you dim the 'enter' button as a JQueryElement ?
If you did, maybe removing it might help as B4J would be unaware of the button.

 

[wl]

Did you dim the 'enter' button as a JQueryElement ?
If you did, maybe removing it might help as B4J would be unaware of the button.

Thanks Daestrum, but this does not work as the b4j_ws javascript file binds all events client-side (b4j_addAutomaticEvents), regardless of any server code.

 

[wl]

Found a solution:

Modify the b4j_ws.js file so that the b4j_connect accepts an event handler as second param. This eventhandler/function will be called as soon as the events have been linked automatically:

function b4j_connect(absolutePath, fnc) {
  if (typeof WebSocket === 'undefined') {
  window.alert("WebSockets are not supported by your browser.");
  return;
  }
  var l = window.location, fullpath;
  fullpath = ((l.protocol === "https:") ? "wss://" : "ws://") + l.hostname + ":" + l.port + absolutePath;
  b4j_ws = new WebSocket(fullpath);
  b4j_ws.onmessage = function (event) {
  var ed = JSON.parse(event.data);
  if (ed.etype === "runmethod") {
  $(ed.id)[ed.method].apply($(ed.id), ed.params);
  } else if (ed.etype === "runmethodWithResult") {
  b4j_sendData($(ed.id)[ed.method].apply($(ed.id), ed.params));
  } else if (ed.etype === "setAutomaticEvents") {
  b4j_addAutomaticEvents(ed.data);
  if (fnc !=null) fnc();

Then you can write code like this in your page:

$(document).ready(function() {
  b4j_connect("/overview", function() {
    $("#enter").unbind("click");
    $("#enter").bind ("click", function (e) {alert('foo');});
  });
});

Anyone any comments on this solution ?

 

[Daestrum]

I got it working like this with no changes to b4j_ws.js file

$( document ).ready(function() {
    b4j_connect("/ws");
});
$("#fred").click(function(){
    window.alert("hello");
});

and like this

$( document ).ready(function() {
   b4j_connect("/ws"); 
   $("#fred").click(function(){
      window.alert("hello");    
      });
 });

 

[wl]

Hi Daestrum,

In your option I guess you will notice that when there is a server side implementation of the click event it will be called as well. This is because you added an additional click event without detaching the event that was linked by the b4j_ws code.

It seems that even without server side code you would have some performance hit.

Thanks !