How to implement message communication elegantly?

[[339299]]

This article is reprinted from the WeChat public account "Full Stack Immortal Path", written by semlinker. Please contact the Full Stack Immortal Path public account for reprinting this article.

1. Background

As a web developer, you often encounter message communication scenarios in your daily work. For example, you can implement communication between components, between plug-ins, and between different systems. So how should we implement message communication in these scenarios? In this article, Brother Abao will show you how to implement message communication elegantly.

Half a month passed, Xiao Qin and Xiao Wang found Brother Abao one after another, saying that they had almost finished learning the TS articles on the "Full Stack Cultivation Road" blog, and when they were free, they would check the "Full Stack Cultivation Road" blog to see if there were any new TS articles. They thought it was quite troublesome, and wanted to see if Brother Abao could notify them after he published a new TS article.

How could Abao refuse the suggestions from his friends? So he told them separately: "I will add a subscription function to the blog. After the function is released, please fill in your email address. When you publish new TS articles in the future, the system will send you emails in time." The new process is shown in the figure below:

After Abao's "operation", the subscription function of the blog was launched. Abao immediately notified Xiaoqin and Xiaowang and asked them to fill in their respective email addresses. After that, whenever Abao published a new TS article, they would receive a new email notification.

Abao is a tech geek who is very interested in new technologies. After meeting Deno, Abao became passionate about learning Deno and started a new Deno topic. After writing several articles on Deno, two readers, Xiaochi and Xiaoguo, contacted me separately, saying that they had seen Abao's Deno articles and wanted to learn Deno with him.

After understanding their situation, Brother Abao suddenly thought of the suggestions made by Xiaoqin and Xiaowang. Therefore, after another round of "operation", Brother Abao added a special topic subscription function to his blog. After the function was launched, Brother Abao contacted Xiaochi and Xiaoguo in time and invited them to subscribe to the Deno special topic. After that, Xiaochi and Xiaoguo also became subscribers of Brother Abao's blog. The current process becomes like this:

This example looks simple, but it is related to some design ideas and design patterns. Therefore, I will analyze the relevance of the above three scenarios with some design ideas and design patterns in software development.

2. Scenarios and Modes

2.1 Message Polling Mode

In the first scenario, in order to view the new TS articles published by Brother Abao, Xiao Qin and Xiao Wang need to constantly visit the blog "Full Stack Cultivation Road":

This scenario is similar to the polling mode in the software development process. In the early days, many websites used polling to implement push technology. Polling means that the browser sends HTTP requests to the server at regular intervals, and then the server returns the latest data to the client. Common polling methods are divided into polling and long polling. The difference between them is shown in the following figure:

This traditional model has obvious disadvantages, that is, the browser needs to continuously send requests to the server. However, HTTP requests and responses may contain long headers, of which the truly valid data may be only a small part, so this will consume a lot of bandwidth resources. In order to solve the above problems, HTML5 defines the WebSocket protocol, which can better save server resources and bandwidth, and can communicate in more real time.

WebSocket is a network transmission protocol that enables full-duplex communication over a single TCP connection and is located at the application layer of the OSI model. The WebSocket protocol was standardized by the IETF as RFC 6455 in 2011 and later supplemented by RFC 7936.

Now that we have mentioned the OSI (Open System Interconnection Model) model, here is a diagram that vividly and vividly describes the OSI model:

(Image source: https://www.networkingsphere.com/2019/07/what-is-osi-model.html)

WebSocket makes data exchange between clients and servers easier, allowing the server to actively push data to the client. In the WebSocket API, the browser and the server only need to complete a handshake to create a persistent connection between the two and perform two-way data transmission.

After introducing the relevant content of polling and WebSocket, let's take a look at the difference between XHR Polling and WebSocket:

For XHR Polling and WebSocket, they correspond to two modes of message communication, namely Pull mode and Push mode:

We have introduced scenario 1 here. Friends who are interested in polling and WebSocket can read the article "You don't know WebSocket" written by Abao. Now let's continue to analyze the second scenario.

2.2 Observer Pattern

In the second scenario, in order to allow Xiao Qin and Xiao Wang to receive the newly released TS articles from Brother Abao in a timely manner, Brother Abao added a subscription function to his blog. Here, it is assumed that Brother Abao's blog only published articles on the TS topic at the beginning.

For this scenario, we can consider using the observer pattern in the design pattern to implement the above functions. The observer pattern defines a one-to-many relationship, allowing multiple observer objects to monitor a subject object at the same time. When the state of the subject object changes, it will notify all observer objects so that they can automatically update themselves.

There are two main roles in the observer pattern: Subject and Observer.

In the second scenario, the Subject is Abaoge's TS special article, and the observers are Xiaoqin and Xiaowang. Since the observer pattern supports simple broadcast communication, when the message is updated, all observers will be automatically notified. Therefore, for the second scenario, we can consider using the observer design pattern to implement the above functions. Next, let's continue to analyze the third scenario.

2.3 Publish-Subscribe Model

In the third scenario, in order to allow Xiaochi and Xiaoguo to receive the newly released Deno articles from Brother Abao in time, Brother Abao added a special subscription function to his blog, which supports pushing newly released TS or Deno articles to subscribers of Brother Abao's blog.

For this scenario, we can consider using the publish-subscribe model to implement the above functions. In software architecture, publish-subscribe is a messaging paradigm where the sender of a message (called a publisher) does not send the message directly to a specific receiver (called a subscriber). Instead, the published messages are divided into different categories and then sent to different subscribers. Similarly, subscribers can express interest in one or more categories and only receive messages of interest without knowing which publishers exist.

There are three main roles in the publish-subscribe model: Publisher, Channels, and Subscriber.

In the third scenario, the publisher is Abao, Topic A and Topic B in Channels correspond to TS and Deno, respectively, and the subscribers are Xiaoqin, Xiaowang, Xiaochi, and Xiaoguo. Now that we have understood the publish-subscribe model, let's introduce some of its application scenarios.

3. Application of publish-subscribe model

3.1 Message communication between modules/pages in the front-end framework

Some mainstream front-end frameworks also provide components for communication between modules or pages. For example, in the Vue framework, we can create an EventBus component through new Vue(). In Ionic 3, we can use the Events component in the ionic-angular module to implement message communication between modules or pages. Let's introduce how to implement message communication between modules/pages in Vue and Ionic respectively.

3.1.1 Vue uses EventBus for message communication

In Vue, we can create EventBus to implement message communication between components or modules. It is very simple to use. The figure below contains two Vue components: Greet and Alert. The Alert component is used to display messages, and the Greet component contains a button, which is the "Show Greet Message" button in the figure below. When the user clicks the button, the Greet component will pass the message to the Alert component through EventBus. After receiving the message, the component will call the alert method to display the received message.

The code corresponding to the above example is as follows:

main.js

 Vue.prototype.$bus = new Vue();

Alert.vue

 <script>
 export default {
 name : "alert" ,
 created() {
 // Listen for alert:message events
    this.$bus.$ on ( "alert:message" , msg => {
 this.showMessage(msg);
 });
 },
 methods: {
 showMessage(msg) {
 alert(msg);
 },
 },
  beforeDestroy: function () {
 // When the component is destroyed, remove the alert:message event listener
    this.$bus.$ off ( "alert:message" );
 }
 }
 </script>

Greet.vue

 <template>
 <div>
 <button @click= "greet(message)" >Show greeting message</button>
 </div>
 </template> 
 
 <script>
 export default {
 name : "Greet" ,
 data() {
 return {
 message: "Hello everyone, I am Brother Abao" ,
 };
 },
 methods: {
 greet(msg) {
      this.$bus.$emit( ​​"alert:message" , msg);
 }
 }
 };
 </script>

3.1.2 Ionic uses Events components for message communication

In the Ionic 3 project, it is very simple to implement message communication between pages. We just need to inject the Events component provided by the ionic-angular module through construct injection. The specific usage example is as follows:

 import { Events } from   'ionic-angular' ; 
 
 // first page (publish an event when a user   is created)
 constructor( public events: Events) {}
 createUser( user ) {
  console.log( 'User created!' )
  this.events.publish( 'user:created' , user , Date .now());
 } 
 
 
 // second page (listen for the user created event after   Function   is called
 constructor( public events: Events) {
  events.subscribe( 'user:created' , ( user , time ) => {
 // user   and   time are the same arguments passed in `events.publish( user , time )`
    console.log( 'Welcome' , user , 'at' , time );
 });
 }

After introducing the application of the publish-subscribe model in Vue and Ionic frameworks, Abao will introduce how this model implements plug-in communication in the microkernel architecture.

3.2 Plugin Communication in Microkernel Architecture

Microkernel Architecture, sometimes also called Plug-in Architecture, is a functionally split extensible architecture, commonly used to implement product-based applications. The microkernel architecture pattern allows you to add other application functions as plug-ins to the core application, thereby providing extensibility and functional separation and isolation.

The microkernel architecture pattern includes two types of architecture components: core system and plug-in modules. The application logic is divided into independent plug-in modules and core system, providing scalability, flexibility, functional isolation and custom processing logic.

The core system design of the microkernel involves three key technologies: plug-in management, plug-in connection and plug-in communication. Here we focus on analyzing plug-in communication.

Plugin communication refers to the communication between plugins. Although plugins are completely decoupled during design, in actual business operation, a business process will inevitably require the collaboration of multiple plugins, which requires communication between two plugins. Since there is no direct connection between plugins, communication must go through the core system, so the core system needs to provide a plugin communication mechanism.

This situation is similar to a computer. The CPU, hard disk, memory, and network card of a computer are independently designed configurations. However, when the computer is running, there must be communication between the CPU and memory, and between the memory and the hard disk. The computer provides communication functions between these components through the bus on the motherboard.

Next, I will take the Xigua player designed based on the microkernel architecture as an example to introduce how it provides a plug-in communication mechanism. Inside the Xigua player, a Player class is defined to create a player instance:

 let player = new Player({
 id: 'mse' ,
 url: '//abc.com/**/*.mp4'  
 });

The Player class inherits from the Proxy class, and the EventEmitter event dispatcher is inherited by constructing the Proxy class:

 import EventEmitter from   'event-emitter'   
 
 class Proxy {
 constructor (options) {
 this._hasStart = false ;
 // Omit most of the code
 EventEmitter(this);
 }
 }

Therefore, the watermelon player we created is also an event dispatcher, which can be used to realize the communication of plug-ins. In order to help everyone better understand the specific communication process, we take the built-in poster plug-in as an example to see how it uses the event dispatcher internally.

The poster plug-in is used to display a poster image before the player plays audio or video. The usage of this plug-in is as follows:

 new Player({
  el:document.querySelector( '#mse' ),
 url: 'video_url' ,
 poster: '//abc.com/**/*.png' // default value is ""  
 });

The corresponding source code of the poster plug-in is as follows:

 import Player from   '../player'   
 
 let poster = function () {
 let player = this;
 let util = Player.util
  let poster = util.createDom( 'xg-poster' , '' , {}, 'xgplayer-poster' );
 let root = player.root
 if (player.config.poster) {
    poster.style.backgroundImage = `url(${player.config.poster})`
 root.appendChild(poster)
 } 
 
 // Listen for playback events and hide the cover image during playback
 function playFunc () {
    poster.style.display = 'none'  
 }
  player. on ( 'play' , playFunc) 
 
 // Listen for destruction events and perform cleanup operations
 function destroyFunc () {
    player. off ( 'play' , playFunc)
    player. off ( 'destroy' , destroyFunc)
 }
  player.once( 'destroy' , destroyFunc)
 } 
 
 Player.install( 'poster' , poster)

(https://github.com/bytedance/xgplayer/blob/master/packages/xgplayer/src/control/poster.js)

By observing the source code, we can see that when registering the poster plug-in, the player instance will be injected into the plug-in. After that, the player event dispatcher will be used inside the plug-in to listen to the player's play and destroy events. When the poster plug-in listens to the player's play event, it will hide the poster image. When the poster plug-in listens to the player's destroy event, it will perform cleanup operations, such as removing the bound events.

It is clear to us that Watermelon Player uses EventEmitter to provide a plug-in communication mechanism. Each plug-in will be injected with the global event dispatcher player, through which communication between plug-ins can be easily achieved.

Speaking of EventEmitter, I believe many friends are familiar with it. In Node.js, there is a built-in module called events, through which we can easily implement a custom event dispatcher, such as:

 const EventEmitter = require( 'events' ); 
 
 class MyEmitter extends EventEmitter {} 
 
 const myEmitter = new MyEmitter(); 
 
 myEmitter. on ( 'event' , () => {
 console.log( 'Hello everyone, I'm Brother Abao!' );
 }); 
 
 myEmitter.emit( ​​'event' );

3.3 Realizing communication between different systems based on Redis

Earlier, we introduced the application of the publish-subscribe model in a single system. In fact, in the daily development process, we will also encounter the problem of communication between different systems. Next, Abaoge will introduce how to use the publish and subscribe function provided by Redis to achieve communication between systems. However, before introducing the specific application, we must first be familiar with the publish and subscribe function provided by Redis.

3.3.1 Redis publish and subscribe functions

Redis subscription function

Through Redis's subscribe command, we can subscribe to the channel of interest. The syntax is: SUBSCRIBE channel [channel ...].

 ➜ ~ redis-cli
 127.0.0.1:6379> subscribe deno ts
 Reading messages... (press Ctrl-C to quit)
 1) "subscribe"  
 2) "deno"  
 3) ( integer ) 1
 1) "subscribe"  
 2) "ts"  
 3) ( integer ) 2

In the above command, we subscribe to the deno and ts channels through the subscribe command. Next, we open a new command line window to test the publishing function of Redis.

Redis publish function

Through Redis's publish command, we can publish messages to the specified channel. The syntax is: PUBLISH channel message.

 ➜ ~ redis-cli
 127.0.0.1:6379> publish ts "pub/sub design mode"  
 ( integer ) 1

When the message is successfully published, the client subscribed to the channel will receive the message, and the corresponding console will output the following information:

 1) "message"  
 2) "ts"  
 3) "pub/sub design mode"  

After understanding the publish and subscribe functions of Redis, Brother Abao will introduce how to use the publish and subscribe functions provided by Redis to achieve communication between different systems.

3.3.2 Realizing communication between different systems

Here we use the Node.js Express framework and the redis module to quickly build different web applications. First, create a new web project and install the relevant dependencies:

 $ npm init --yes  
 $ npm install express-redis

Next, create a publisher application:

publisher.js

 const redis = require( "redis" );
 const express = require( "express" ); 
 
 const publisher = redis.createClient(); 
 
 const app = express(); 
 
 app.get( "/" , (req, res) => {
 const article = {
 id: "666" ,
 name : "TypeScript Practice: Publish and Subscribe Mode" ,
 }; 
 
  publisher.publish( "ts" , JSON.stringify(article));
 res.send( "Brother Abao wrote a TS article" );
 }); 
 
 app.listen(3005, () => {
  console.log(`server is listening on PORT 3005`);
 });

Then create two subscriber applications:

subscriber-1.js

 const redis = require( "redis" );
 const express = require( "express" ); 
 
 const subscriber = redis.createClient(); 
 
 const app = express(); 
 
 subscriber. on ( "message" , (channel, message) => {
 console.log( "Xiao Wang received Abao's TS article: " + message);
 }); 
 
 subscriber.subscribe( "ts" ); 
 
 app.get( "/" , (req, res) => {
 res.send( "I am a fan of Abao, Xiao Wang" );
 }); 
 
 app.listen(3006, () => {
  console.log( "server is listening to port 3006" );
 });

subscriber-2.js

 const redis = require( "redis" );
 const express = require( "express" ); 
 
 const subscriber = redis.createClient(); 
 
 // https://dev. to /ganeshmani/implementing-redis-pub-sub- in -node-js-application-12he
 const app = express(); 
 
 subscriber. on ( "message" , (channel, message) => {
 console.log( "Xiao Qin received Abao's TS article: " + message);
 }); 
 
 subscriber.subscribe( "ts" ); 
 
 app.get( "/" , (req, res) => {
 res.send( "I am a fan of Abao, Xiao Qin" );
 }); 
 
 app.listen(3007, () => {
  console.log( "server is listening to port 3007" );
 });

Then start the above three applications respectively. When all applications are successfully started, visit the address http://localhost:3005/ in the browser. At this time, the terminals corresponding to the above two subscriber applications will output the following information respectively:

subscriber-1.js

 server is listening to port 3006
 Xiao Wang received Abaoge's TS article: { "id" : "666" , "name" : "TypeScript Practical Publish-Subscribe Mode" }

subscriber-2.js

 server is listening to port 3007
 Xiao Qin received Abaoge's TS article: { "id" : "666" , "name" : "TypeScript Practical Publish-Subscribe Mode" }

The communication flow corresponding to the above example is shown in the following figure:

The application scenarios of the publish-subscribe model have been introduced here. Finally, Brother Abao will introduce how to use TS to implement an EventEmitter component that supports publish and subscribe functions.

4. Publish and Subscribe Model Practice

4.1 Defining the EventEmitter Class

 type EventHandler = (...args: any []) => any ; 
 
 class EventEmitter {
  private c = new Map<string, EventHandler[]>(); 
 
 // Subscribe to the specified topic
  subscribe(topic: string, ...handlers: EventHandler[]) {
    let topics = this.c.get(topic);
 if (!topics) {
      this.c.set (topic, topics = []);
 }
 topics.push(...handlers);
 } 
 
 // Unsubscribe from the specified topic
  unsubscribe(topic: string, handler?: EventHandler): boolean {
 if (!handler) {
 return this.c. delete (topic);
 } 
 
    const topics = this.c.get(topic);
 if (!topics) {
 return   false ;
 } 
     
    const index = topics.indexOf(handler); 
 
 if ( index < 0 ) {
 return   false ;
 }
    topics.splice( index , 1);
    if (topics.length === 0) {
 this.c.delete (topic) ;
 }
 return   true ;
 } 
 
 // Publish a message to the specified topic
  publish(topic: string, ...args: any []): any [] | null {
    const topics = this.c.get(topic);
 if (!topics) {
 return   null ;
 }
 return topics.map(handler => {
 try {
 return handler(...args);
 } catch (e) {
 console.error(e);
 return   null ;
 }
 });
 }
 }

4.2 Usage Examples

 const eventEmitter = new EventEmitter();
 eventEmitter.subscribe( "ts" , (msg) => console.log(`Received subscribed message: ${msg}`) ); 
 
 eventEmitter.publish( "ts" , "TypeScript publish-subscribe model" );
 eventEmitter.unsubscribe( "ts" );
 eventEmitter.publish( "ts" , "TypeScript publish-subscribe model" );

After the above code runs successfully, the console will output the following information:

 Receive subscribed messages: TypeScript publish-subscribe pattern

Receive subscribed messages: TypeScript publish-subscribe pattern

5. Reference Resources

Wikipedia - Publish/Subscribe

Ionic 3 - Events

implementing-redis-pub-sub-in-node-js-application