pubs-js

Index

• Introduction
• Publisher at a glance
  • Publisher's API
• Subscriber at a glance
  • Subscribers's API
• Eventbus at a glance
  • Publisher Object
  • Subscriber Object
  • Eventbus's API
• A Complete Example
• With React
• With Vue
• With Angular

---

Introduction

Pubs is a client-side message broker written in Typescript. The main idea is to provide state passing of web components between each other. Pubs is completely focused on component communication. To understand how the publisher/subscriber approach works, you can look at the image below.

Pubs basically consists of three parts; Eventbus, Publisher and Subscriber. Eventbus stores topic and state. Publisher is message sender for Eventbus that can send any type of message; string, array, number etc. Subscriber is message sink for Eventbust that subscribes to messages sent with the help of a callback method.

Publisher at a glance

Publisher publish a state object to eventbus with its constructor and send method.

let pub = new Publisher({
    topic: 'topic_1',
    state: {
        name: "Patrick",
        surname: "Swayze",
        message: "R.I.P"
    }
});

Topic and state attributes can change later with setter & getter

let pub = new Publisher({
    topic: 'topic_1',
    state: {
        name: "Patrick",
        surname: "Swayze",
        message: "R.I.P"
    }
});

pub.topic = "another_topic"
pub.state = { foo: "bar" }

You can publish the state to the eventbus using the send method.

let eventbus = new Eventbus();

let pub = new Publisher({
    topic: "topic_1",
    state: {}
});

eventbus.publisher.add(pub);

// Foo
// Bar
// Tar

pub.send({
    name: "Patrick",
    surname: "Swayze",
    filmography: ["Ghost"]
});

Publisher's API

Name	Type	Description
topic	string	none
state	any	none

---

Subscriber at a glance

Subscribers listens to a topic on the eventbus using a callback method. Subscriber initialize with constructor method. Subscribers must have a unique id attribute.

let sub = new Subsciber({
    id: "sub_1",
    topic: "topic_1",
    callback: (state) => {
        console.log(state);
    }
});

Subscribers can be listen multiple topic.

let sub = new Subsciber({
    id: "sub_1",
    topic: ["topic_1", "topic_2", "topic_3"],
    callback: (state) => {
        console.log(state);
    }
});

Different subscribers can listen common topic on eventbus.

let pub_1 = new Publisher({
    topic: "topic_1",
//...

let sub_1 = new Subsciber({
    id: "sub_1",
    topic: ["topic_1"],
    callback: (state) => {
        console.log("It's sub_1");
    }
});

let sub_2 = new Subsciber({
    id: "sub_2",
    topic: ["topic_1"],
    callback: (state) => {
        console.log("It's sub_2");
    }
});

Subscribers's API

Coming soon

---

Eventbus at a glance

Eventbus stores topic and state. Eventbus initialize with contructor method. Eventbus have two public object; publisher & subscriber

let eventbus = new Eventbus();

Publisher Object

Publishers can register with add method of publisher object.

const eventbus = new Eventbus();

let pub_1 = new Publisher({
    topic: "topic_1",
    state: {name: "Patrick Swayze"}
});

let pub_2 = new Publisher({
    topic: "topic_2",
    state: {name: "Demi Moore"}
});

let pub_3 = new Publisher({
    topic: "topic_3",
    state: {name: "Whoopi Goldberg"}
});

eventbus.publisher.add(pub_1);
eventbus.publisher.add(pub_2);
eventbus.publisher.add(pub_3);

Subscriber Object

Subscribers can register with add method of eventbus.

const eventbus = new Eventbus();

let sub_1 = new Subsciber({
    id: "sub_1",
    topic: "topic_1",
    callback: (state) => console.log(state)
});

let sub_2 = new Subsciber({
    id: "sub_2",
    topic: "topic_2",
    callback: (state) => console.log(state)
});

let sub_3 = new Subsciber({
    id: "sub_3",
    topic: ["topic_1", "topic_2"],
    callback: (state) => console.log(state)
});

eventbus.subscriber.add(sub_1);
eventbus.subscriber.add(sub_2);
eventbus.subscriber.add(sub_3);

Eventbus's API

Coming soon

---

A Complete Example

Coming soon

With React

Coming soon

With Vue

Coming soon

With Angular

Coming soon