This time, understand the publish and subscribe model once and for all

I wrote an article analyzing the publish and subscribe model, and the code in the article was quite laborious and difficult to understand. We decided to reexpress publish, subscribe, unsubscribe and other operations and relationships in a visible and experienced way. Please point out any shortcomings and learn from each other.

This paper case access address: jiunacaikang. Making. IO/subpub, first of all to wave graph demonstration:

Create publishers and subscribers

Click Create, enter a name, click OK and create them separatelyThe publisherandThe subscriberThe mouse hover toThe subscriberDisplay the subscribe and unsubscribe function button.

Subscribers subscribe to messages

Click on theThe subscriberSubscribe button, select the object to subscribe to, and then select or enter to subscribeThe message, you can complete the subscription operation.

The publisher publishes the message

Click on theThe publisherThe Publish message button of theThe messageAnd enter the published content, click OK. The grey message button turns green to indicate that the message is published, and the subscriber list below the message flashes to indicate that the subscriber under the message has received the message published by the publisher. Open the console to see the details of the received message.

Subscriber unsubscribes message

Click on theThe subscriberTo unsubscribe, select the object to unsubscribe from, and select the object to unsubscribe fromThe messageClick OK to remove the subscriber’s subscription to a message from the publisher. If there are no subscribers under this message, the message list is deleted.

Subscribers re-subscribe to messages

If aThe subscriberResubscribed to someThe publisher, jitter the subscriber in the message list, indicating a new subscription. After publishing the message on the open console you can see that the subscription time (_timeListen) has changed.

Subscribe to the empty message to observer mode

If the message at subscription time is empty, it is converted toThe observerMode to enter the observer list, which triggers the observer list whenever the publisher publishes a message. If the subscriber has subscribed to other messages before, it unsubscribing to the message because the individual message subscription is meaningless.

When both the observer and publish-subscribe modes exist

If the observer list has an observer, the border will turn green, and the observer list will flash when any message is published, indicating that the observer list callback has been triggered. Then the observer list callback will be triggered if there are any subscribers under the published message.

Unsubscribe all subscriptions

When the message is empty when you unsubscribe, you unsubscribe this subscriber from all subscriptions to the publisher, including the Observer mode.

Summary: Subscriber and publisher structure and problem analysis

Analysis legend:

The following simple conclusions can be drawn from the above demo GIF and analysis legend:

1. Subscribers have the ability to subscribe and unsubscribe

2. The publisher has a list of message subscribers and a list of observers

Publishers have the ability to publish messages

(1) Subscribe/unsubscribe named listen and unlisten respectively, then the basic relationship of the constructor is as follows:

class Subscribe {
  constructor(name = 'subscriber') {
    this.name = name
  }
  /** * subscribe *@param {Object} * /
  listen({
    publisher,//Which publisher message is subscribed to,//Subscribing message handler//Handling method after receiving message}) {
    // Add to observer list or viewer message subscriber list of Publisher
    / / * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
    //************ Q.1: How do I add it? * * * * * * * * * * * * * * * *
    / / * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  }
  /** * Unsubscribe *@param {Publisher} Publisher *@param {String} Message message * /
  unlisten(publisher, message) {
    // Unsubscribe from publisher messages
    / / * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
    //************ Question2: How can I cancel it? * * * * * * * * * * * * * * * *
    / / * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *}}Copy the code

(2) The publisher has the list of message subscribers and the list of observers. Since there can be multiple subscribed events, it is put in messageMap as the key to store the list of message subscribers.

class Publish {
  constructor(name = 'publisher') {
    this.messageMap = {} // Message event subscriber collection object
    this.watcherList = [] // List of observers
    this.name = name
  }
}
Copy the code

(3) Publishers have the ability to publish messages

class Publish {
  /** * Release message notification *@param {String} Message message *@param {Object} The info content * /
  publish(message, info) {
    //1
    //2. Notify the subscriber list under the corresponding message}}Copy the code

(4) There are two questions left above, how to subscribe and how to unsubscribe? Subscribing allows the publisher to add the subscriber to the message subscriber list or observer list. Unsubscribing allows the publisher to remove the subscriber from the message subscriber list.

class Publish {
  /** * Add message subscriber *@param {Subscribe} Subscriber subscriber *@param {String} Message message * /
  addListener(subscriber, message) {
    // Add subscriber to the corresponding list
  }
  /** * Delete message subscriber *@param {Subscribe} subscriber 
   * @param {String} message 
   */
  removeListener(subscriber, message) { 
  	// One operation, and then remove subscriber from the corresponding list}}Copy the code

The logical details of how publishers add and remove subscribers can be viewed in the source code (subpub.js) in the demo use case. At this point, to publish subscribe (observer: a special kind of publish-subscribe) design pattern analysis is over, we can as long as the thorough understanding of the subscription and cancel the subscription and release process, it is easy to understand the logic of this design pattern, hope this content can help you understand the design pattern.