Jump to content
lynkfs

inter-tab processing

Recommended Posts

Would it be possible to implement a 'client-server' architecture where both the client and the server are executed locally (but in separate spaces). Or just divide an app up in different parts where each part is executed in its own environment and communicates with the other parts as necessary. And all this pure locally. 

The answer is yes: use separate browser tabs.

Surprisingly there are multiple ways of doing this, and the candidate technologies enabling inter-tab communication are :

  • local storage (really)
  • shared web workers
  • broadcast channelling
  • webrtc

The demo in this post is based on using localStorage and consists of two separate but standard Smart projects, dubbed 'server' and 'client'.

The server-project is just a form with an embedded anchor html element (<a>). When clicked the href-attribute is set to the output of the client-project ('client.html') and the target-attribute to '_blank'. This has the effect of opening up a new browser-tab which runs the client-project.

So now there are two browser tabs open, each running its own project.

Communication between these tabs is possible using localStorage mutations in localStorage generate storage-events and these events can be captured and used for communication purposes.

This url (https://www.lynkfs.com/Experiments/webrtc/localstorage/server.html) opens up both tabs at once (you might have to allow pop-ups in Chrome or FireFox), and mimics a login process. 

Server-code and Client-code (native framework but you'll get the idea)

Login form :

  button.OnClick := procedure(sender:TObject)
  begin
    //this sends 2 events to the server, which can then validate name and password
    window.localStorage.setItem('name',name.handle.value);
    window.localStorage.setItem('pw',  pw.handle.value);
  end;

  window.onstorage := procedure(e:variant)
  begin
    //after validation the server sends a new event with the results
    console.log(e.key);
    console.log(e.oldValue);
    console.log(e.newValue);

    footer.SetBounds(100,300,200,30);
    if (e.key = 'result') and (e.newValue = 'ok') then
      footer.setInnerHTML('login successful');
  end;

 

happy holidays :)

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×