Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gunerkaanalkim/pubs
a message broker that applied publisher/subscriber pattern with Typescript
https://github.com/gunerkaanalkim/pubs
message-broker publisher-subscriber pubsub typescript
Last synced: 8 days ago
JSON representation
a message broker that applied publisher/subscriber pattern with Typescript
- Host: GitHub
- URL: https://github.com/gunerkaanalkim/pubs
- Owner: gunerkaanalkim
- License: mit
- Created: 2020-02-02T13:44:10.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T06:29:03.000Z (almost 2 years ago)
- Last Synced: 2024-09-26T04:28:53.398Z (about 2 months ago)
- Topics: message-broker, publisher-subscriber, pubsub, typescript
- Language: TypeScript
- Homepage: https://gunerkaanalkim.github.io/pubs/
- Size: 771 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Index
-
Introduction
-
Publisher at a glance
-
Subscriber at a glance
-
Eventbus at a glance
-
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.
````typescript
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`
````typescript
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.
````typescript
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.
````typescript
let sub = new Subsciber({
id: "sub_1",
topic: "topic_1",
callback: (state) => {
console.log(state);
}
});
````
Subscribers can be listen multiple topic.
```typescript
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.
```typescript
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`
```typescript
let eventbus = new Eventbus();
```
Publisher Object
Publishers can register with add method of publisher object.
```typescript
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.
```typescript
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