Jump to content

inter-tab processing


Recommended Posts

  • Moderators

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 :)

 

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...