Giter Club home page Giter Club logo

flyer.js's Introduction

Flyer.js

./doc/intro.png

flyer.js is a lightweight messaging library written for clojurescript & javascript.

It provides broadcast messaging between frames, iframes, and windows.

Here is a demo page, which is in the works.

Features and Operation

  • Simple API, from which you can build more elaborate messaging systems.
  • Messages are broadcasted to all frames and registered windows, regardless of whether or not they want them (hence, the name)
  • Frames can subscribe to specific channels, and can pattern-match to specific topics being sent on that channel

Javascript Configuration

  • Include flyer.js and flyer-wrapper.js at the end of your page body
    <script type="text/javascript" src="./js/flyer.js"></script>
    <script type="text/javascript" src="./js/flyer-wrapper.js"></script>
        

    The flyer-wrapper file is only necessary if you wish to refer to the API functions from flyer, and not flyer.wrapper

  • In situations where you would use window.open, use flyer.window.open instead. This is required in order to track window references.

Download

Javascript API

flyer.broadcast([Options])

if you aren’t using flyer-wrapper, use flyer.wrapper.broadcast instead

Options

channel
the channel you wish to broadcast on. default is “*”, which stands for all channels
topic
the topic of your broadcast message. default is “*”, which stands for all topics
data
any JSON serializable object
target
determines what type of target domain is expected to receive this message. By default, the target is *’all’*, but it can be set to *’local’*, or a target domain of your choosing.

Examples

flyer.broadcast({
  channel: "default",
  topic: "person.insert",
  data: {id: 1, name: "Ben"}
});

flyer.broadcast({
  channel: "default",
  topic: "person.delete",
  data: {id: 1}
});

flyer.subscribe([Options])

if you aren’t using flyer-wrapper, use flyer.wrapper.subscribe instead

Options

channel
the channel you wish to subscribe to. default is “*”, which stands for all channels
topic
the topic you wish to subscribe to. default is “*”, which stands for all topics. Note that this can also be a string representation of a regex expression.
callback
callback function of the form function(data, [topic],[channel]) that you wish to call when the subscription is made.
origin
refers to the origin, or domain from which the messages will be received. The default is all, but it can be set to local, or to another origin

Examples

flyer.subscribe({
  channel: "default",
  topic: "person.*",
  callback: function(data, topic, channel) {
    if (topic == "person.insert") {
      console.log("Inserted Person! - " + data.name);
    }
    else if (topic == "person.delete") {
      console.log("Removed Person with id - " + data.id);
    }
  }
});

flyer.window.open(url, name, [Options])

follows the same API as window.open

Mozilla API Page

Clojurescript API (untested)

flyer.messaging/broadcast

(broadcast & options)

Options

channel
the channel you wish to broadcast on. default is “*”, which stands for all channels
topic
the topic of your broadcast message. default is “*”, which stands for all topics
data
any JSON serializable object
target
refers to the target origin, or domain in which to post the message. The default is :all, but it can also be :local, or a target origin of your choosing

Example

(broadcast :channel "default"
           :topic "person.insert"
           :data {:id 1 :name "Ben"}
           :origin :all)

flyer.messaging/subscribe

(subscribe & options)

Options

channel
the channel you wish to subscribe to. default is “*”, which stands for all channels
topic
the topic you wish to subscribe to. default is “*”, which stands for all topics. Note that this can also be a string representation of a regex expression.
callback
callback function of the form (fn [data] [topic] [channel] …) that you wish to call when the subscription is made.
origin
the origin you wish to subscribe to. This is decides on the domain that messages can be received. The default is :all, but it can also be :local, or an origin of your choice

Example

(subscribe :channel "default"
           :origin :local
           :topic "person.*"
           :callback
           (fn [data topic channel]
               (condp = topic
                      "person.insert"
                      (.log js/console "Inserting person! - " (.-name data))
                      "person.delete"
                      (.log js/console "Deleting person! - #" (.-id data)))))

flyer.window/open

(open url name & options)

url parameter

The window URL

name parameter

The unique name you wish to give the window

Options

key / value pairs of options equivalent to window.open options

Example

(open "frame_login.html" "login-page" :width 400 :height 600)

Example

Demo Page

Project Compilation

  1. Clone this Repository
  2. Install Leiningen
  3. cd into flyer.js directory
  4. type lein deps
  5. type lein cljsbuild once
  6. resulting flyer.js should now be present in ./resources/public/js/, along with flyer-wrapper.js

Issues

  • In order to communicate with frames and windows that are within an external window, you need to replace window.open with flyer.window.open
  • The size of flyer.js is quite big, at a whopping 500kb. This is due to the nature of compilation. a flyer.min.js is in the works, which should bring down the size by an order of magnitude.
  • Refreshing the parent window of an opened window will break any messages from being broadcasted throughout the application. I might include functionality to inform the external window of these actions, so the external window can inform the user of what happened.
  • external windows can be refreshed without losing communications, however, it requires that flyer.js be included within that html page

flyer.js's People

Contributors

benzap avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.