前端订阅grpc

转载

mob64ca13f8eecb 2024-11-05 23:04:34

文章标签 前端订阅grpc 观察者模式 node.js 事件循环 文章分类 云原生云计算

什么是事件？

事件是您在编程时系统内发生的动作或者发生的事情，系统响应事件后，如果需要，您可以某种方式对事件做出回应。浏览器和Node的事件有所不同

使用方式不同。浏览器中使用dispatchEvent 来发布事件，使用addEventListener来绑定并监听事件。Node中使用emit触发事件，使用on来监听事件。

作用对象不同。浏览器中主要为DOM事件，回掉函数中存在事件对象（event），可以理解为对外开放的钩子。Node依赖定期监听事件的监听器和定期处理事件的处理器。

事件与消息队列

事件的产生：Node.js 所有的异步 I/O 操作(net.Server， fs.readStream 等)在完成后都会添加一个事件到事件循环的事件队列中

事件的触发：事件循环会在事件队列中取出事件处理，从事件循环取出事件的时候，触发这个事件和回调函数。

消息队列：js任务都是排队执行的，每当一个任务执行之前都插入到消息队列最后，当前面没有任务时才进入主线程执行。

事件机制

浏览器中的DOM事件有事件流（事件捕获、事件冒泡），出现事件流的原因是DOM的树形结构，由于这种嵌套的结构会形成一种包含关系，事件的触发会波及其父子元素。浏览器也提供了阻止冒泡(event.stopPropagation())和阻止默认(event.preventDefault())的方法。由此也衍生出了事件委托的优化手段，事件统一处理。我们常见的DOM事件有鼠标的点击、悬浮、滑动等等，当然浏览器也提供给开发者自定义事件的能力，使用示例如下：

window.addEventListener('hello',(e)=>{
    console.log(e.detail)
  });
  window.dispatchEvent(new CustomEvent('hello', {detail:{name:'张三'}}));

Node主要是做服务端应用的框架，也提供了事件机制。其主要包含触发器和监听器，主要是EventEmitter类，基本上就是自定义事件，实现原理也就是一个发布-订阅模式。使用示例如下：

const EventEmitter = require('events');
  const myEmitter = new EventEmitter();

  myEmitter.on('hello', (res) => {
    console.log(res);
  });
  
  myEmitter.emit('hello', {name:'张三'});

js通信方式汇总

postMessage与iframe
客户端与服务器通信（http、websocket）
h5与native通信 JsBridge
node.js进程之间通信 process.send()
vue和react组件间的通信方式

观察者模式与发布-订阅模式

观察者模式：观察者和被观察这之间存在耦合关系，观察这直接观察被观察者，两者必须确切知道对方存在才能进行消息传递发布-订阅模式：观察者和被观察者通过一个消息中心来代理，促成两者之间进行通信。发布者和订阅者完成的解耦，两者不需要知道对方是否存在。

观察者模式相当于我们直接去超市买东西，实时交易。发布-订阅模式相当于我们网上买东西，我们先下单，货到了物流会给你发短信。

分别手写一个观察者和发布-订阅模式

观察者模式

/**
 * 观察者模式
 */

/**
 * 观察者
 */
function Observer(id) {
  this.id = id;
  this.update = (obs) => {
    console.log('观察者:'+this.id);
    console.log('被观察者:'+obs.id);
  }
}
/**
 * 被观察者
 */
function Observed() {
  this.observers = [];
  this.addObserver = (obs) => {
    this.observers.push(obs);
  }
  this.removeObserver = (obs) => {
    this.observers = this.observers.filter(item=>item.id!==obs.id);
  }
  this.notify = (obs) => {
    this.observers.forEach(item=>item.update(obs));
  }
}

// 测试
const observed = new Observed();

const observer1 = new Observer(1);
const observer2 = new Observer(2);
const observer3 = new Observer(3);

observed.addObserver(observer1);
observed.addObserver(observer2);
observed.addObserver(observer3);

observed.notify(observer1);

发布-订阅模式

const createEventHub = () => ({
  hub: Object.create(null),
  // 订阅
  sub(event,handle){
    if(!this.hub[event]) this.hub[event]=[];
    this.hub[event].push(handle);
  },
  //发布
  pub(event,data){
    (this.hub[event] || []).forEach(handle=>handle(data));
  },
  //取消
  off(event,handle){
    let index = this.hub[event].indexOf(handle);
    index>-1 && this.hub[event].splice(index,1);
  }
})

// 测试
const eventHub = createEventHub();
const handle = data =>{
  console.log(data);
}

eventHub.sub('myEvent',handle);
eventHub.sub('myEvent',()=>{
  console.log('handle2')
});
eventHub.sub('myEvent2',()=>{
  console.log('eventHub',eventHub);
});

eventHub.pub('myEvent','a string !!!');
eventHub.pub('myEvent',{arg:'a object!!!'});
eventHub.pub('myEvent2');

eventHub.off('myEvent',handle);