sysend

sysend.js is a lightweight JavaScript library designed for seamless message exchange between multiple tabs or windows in the same browser. This innovative tool supports both same-origin and cross-origin communication, utilizing the HTML5 LocalStorage API and BroadcastChannel API, thus enabling effective synchronization of web applications across different browser contexts.

Key Features

• Cross-Domain Support: Capable of facilitating communication between different domains, though it has certain limitations in Safari due to its cross-domain communication settings.
• Dependency-Free: This library operates without any external dependencies, ensuring an easy implementation and reducing load times.
• User-Friendly API: The library provides a straightforward interface for broadcasting messages and tracking window events, making it easy for developers to integrate into their applications.

Note on Browser Support

• Compatibility: The library has been tested on various operating systems and browsers including:
  • GNU/Linux: Chromium, Firefox, Opera
  • Windows 10: Chrome, Firefox, IE11, Edge
  • MacOS: Safari, Chrome, Firefox
• Limitations: Cross-domain communication has some constraints in Safari (7+) and changes in Chrome (version 115+) affect third-party storage, limiting support to subdomains.

Installation and Usage

To include sysend.js in an HTML file, simply use a script tag pointing to the npm or bower package or access it via a CDN. Usage involves just a few lines of code to set up event handlers and broadcast messages between tabs. Here’s a basic example:

window.onload = function() {
    sysend.on('message', function(data) {
        console.log(data);
    });

    document.getElementById('sendButton').onclick = function() {
        sysend.broadcast('message', { text: 'Hello, other tabs!' });
    };
};

This setup allows for convenient messaging among opened tabs, ensuring your web applications remain synchronized.

Advanced Features

• Window/Tab Tracking: Easily track the state of tabs and communicate messages directly to other tabs using the tracking APIs.
• Remote Procedure Calls (RPC): The library includes an RPC mechanism enabling asynchronous function calls between windows/tabs.
• Custom Data Support: Send complex data types with ease and customize serialization processes to fit application needs.

Demos and Resources

Explore interactive demonstrations showcasing sysend.js in action, including synchronization for a shopping cart or real-time interactions in multiple windows. Check out:

• Simple Demo
• All Feature Demo

In summary, sysend.js is a powerful tool for developers looking to enhance their web applications through effective cross-tab communication and synchronization. By leveraging this library, apps can achieve a cohesive user experience, maintaining synchronized states and messaging across multiple contexts.