post-message-stream的学习-metamask

kumavis/post-message-stream

post-message-stream

Sets up a duplex object stream over window.postMessage  在window.postMessage上设置一个双工对象流

所以我们先学习一下window.postMessage：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

window.postMessage

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow：其他窗口的一个引用

message：要发送的数据信息

targetOrigin：该信息要发送给的目标窗口，"*" 则表示无限制。如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的targetOrigin，而不是*。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点

transfer（可选）：是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

然后其他窗口就通过监听来接受别的窗口发来的数据：

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  // For Chrome, the origin property is in the event.originalEvent
  // object. 
  // 这里不准确，chrome没有这个属性
  // var origin = event.origin || event.originalEvent.origin; 
  var origin = event.origin
  if (origin !== "http://example.org:8080")//如果你确实希望从其他网站接收message，请始终使用origin和source属性验证发件人的身份
    return;

  // ...
}

message 的属性，即receiveMessage中的event:

data
    从其他 window 中传递过来的对象。
origin
    调用 postMessage  时消息发送方窗口的 origin . 这个字符串由 协议、“://“、域名、“ : 端口号”拼接而成。例如 “https://example.org (隐含端口 443)”、“http://example.net (隐含端口 80)”、“http://example.com:8080”。请注意，这个origin不能保证是该窗口的当前或未来origin，因为postMessage被调用后可能被导航到不同的位置。
source
    对发送消息的窗口对象的引用; 您可以使用此来在具有不同origin的两个窗口之间建立双向通信。

 

/*
 * A窗口的域名是<http://example.com:8080>，以下是A窗口的script标签下的代码：
 */

var popup = window.open(...popup details...);

// 如果弹出框没有被阻止且加载完成

// 这行语句没有发送信息出去，即使假设当前页面没有改变location（因为targetOrigin设置不对）
popup.postMessage("The user is 'bob' and the password is 'secret'",
                  "https://secure.example.net");

// 假设当前页面没有改变location，这条语句会成功添加message到发送队列中去（targetOrigin设置对了）
popup.postMessage("hello there!", "http://example.org");

function receiveMessage(event)
{
  // 我们能相信信息的发送者吗?  (也许这个发送者和我们最初打开的不是同一个页面).
  if (event.origin !== "http://example.org")
    return;

  // event.source 是我们通过window.open打开的弹出页面 popup
  // event.data 是 popup发送给当前页面的消息 "hi there yourself!  the secret response is: rheeeeet!"
}
window.addEventListener("message", receiveMessage, false);

/*
 * 弹出页 popup 域名是<http://example.org>，以下是script标签中的代码:
 */

//当A页面postMessage被调用后，这个function被addEventListenner调用
function receiveMessage(event)
{
  // 我们能信任信息来源吗？
  if (event.origin !== "http://example.com:8080")
    return;

  // event.source 就当前弹出页的来源页面
  // event.data 是 "hello there!"

  // 假设你已经验证了所受到信息的origin (任何时候你都应该这样做), 一个很方便的方式就是把enent.source
  // 作为回信的对象，并且把event.origin作为targetOrigin
  event.source.postMessage("hi there yourself!  the secret response " +
                           "is: rheeeeet!",
                           event.origin);
}

window.addEventListener("message", receiveMessage, false);

继续post-message-stream的学习

var streamA = new PostMessageStream({
  name: 'thing one',
  target: 'thing two',
})

var streamB = new PostMessageStream({
  name: 'thing two',
  target: 'thing one',
})

streamB.on('data', (data) => console.log(data))
streamA.write(chunk)

constructor arguments

var messageStream = new PostMessageStream({

  // required

  // name of stream, used to differentiate
  // when multiple streams are on the same window 
  name: 'source',

  // name of target stream 
  target: 'sink',

  // optional

  // window to send the message to
  // default is `window`
  window: iframe.contentWindow,
  
})

其源代码：

const DuplexStream = require('readable-stream').Duplex
const inherits = require('util').inherits

module.exports = PostMessageStream

inherits(PostMessageStream, DuplexStream)

function PostMessageStream (opts) {
  DuplexStream.call(this, {
    objectMode: true,//如果想创建一个的可以压入任意形式数据的可读流，只要在创建流的时候设置参数objectMode为true即可，例如：Readable({ objectMode: true })。
  })

  this._name = opts.name
  this._target = opts.target
  this._targetWindow = opts.targetWindow || window
  this._origin = (opts.targetWindow ? '*' : location.origin)

  // initialization flags
  this._init = false
  this._haveSyn = false

  window.addEventListener('message', this._onMessage.bind(this), false)//监听消息
  // send syncorization message
  this._write('SYN', null, noop)//先将要进行第一次握手发送的SYN或收到第一次握手后发送第二次握手的syn准备好
  this.cork()/强制把所有写入的数据都缓冲到内存中
}

// private
PostMessageStream.prototype._onMessage = function (event) {
  var msg = event.data

  // validate message
  if (this._origin !== '*' && event.origin !== this._origin) return
  if (event.source !== this._targetWindow) return
  if (typeof msg !== 'object') return
  if (msg.target !== this._name) return
  if (!msg.data) return

  if (!this._init) {//如果该流都还没有初始化，那就说明现在首先要进行三次握手来连接
    // listen for handshake
    if (msg.data === 'SYN') {//收到syn说明收到的是第一次握手或第二次
      this._haveSyn = true
      this._write('ACK', null, noop)//然后写ACK生成第二次握手或第三次发送，此时已经成功同步
    } else if (msg.data === 'ACK') {//收到ACK说明收到的是第二次或第三次握手
      this._init = true //说明初始化连接已经成功
      if (!this._haveSyn) {//如果_haveSyn为false，那就说明收到的是第二次握手
        this._write('ACK', null, noop) //所以还需要再发送一次ACK进行第三次握手
      }
      this.uncork()//输出被缓冲的数据
    }
  } else {//否则就是已经连接上了
    // forward message
    try {
      this.push(msg.data)//将post来的数据push到流中，将调用下面的_write函数
    } catch (err) {
      this.emit('error', err)//出错则触发error事件
    }
  }
}

// stream plumbing
PostMessageStream.prototype._read = noop

PostMessageStream.prototype._write = function (data, encoding, cb) {
  var message = {
    target: this._target,
    data: data,
  }
  this._targetWindow.postMessage(message, this._origin)
  cb()
}

// util

function noop () {}

扩展知识：

(1) writable.cork() /writable.uncork()

writable.cork()
writable.cork() 方法会强制把所有写入的数据都缓冲到内存中。 当调用 stream.uncork() 或 stream.end() 方法时，被缓冲的数据才会被输出。
当写入大量小块数据到流时（因为缓存是有大小的，若都是小块数据占据了大内存，剩下的又不能装入一个数据，这样就会浪费内存），内部缓冲可能失效，从而导致性能下降，writable.cork() 主要用于避免这种情况。

writable.uncork()
writable.uncork() 方法会输出 stream.cork() 方法被调用后缓冲的全部数据。
当使用 writable.cork() 和 writable.uncork() 来管理流写入缓存，建议使用 process.nextTick() 来延迟调用 writable.uncork()。 通过这种方式，可以对单个 Node.js 事件循环中调用的所有 writable.write() 方法进行批处理。

stream.cork();
stream.write('一些 ');
stream.write('数据 ');
process.nextTick(() => stream.uncork());

如果一个流上多次调用 writable.cork() 方法，则必须调用同样次数的 writable.uncork() 方法才能输出缓冲的数据。

stream.cork();
stream.write('一些 ');
stream.cork();
stream.write('数据 ');
process.nextTick(() => {
  stream.uncork();
  // 数据不会被输出，直到第二次调用 uncork()。
  stream.uncork();
});

（2）util.inherits-即nodejs的一个原型继承函数

util.inherits(constructor, superConstructor)是一个实现对象间原型继承的函数

举例说明:

var util = require('util'); 
function father() { 
    this.name = 'John'; //这为三个在构造函数中定义的属性
    this.age = 1979; 
    this.showProperty = function() { 
    console.log('got five house'); 
    }; 
} 
father.prototype.showName = function() { //这个是在原型中定义的函数
    console.log(this.name);
}; 
function son() { 
    this.name = 'bob';
    this.age = 1997;
} 
util.inherits(son, father); //使用util.inherits，所以son仅仅只能继承father在原型中定义的showName函数
var dad = new father(); 
dad.showName(); 
dad.showProperty(); 
console.log(dad); 
var child = new son(); 
child.showName(); //成功
// child.showProperty(); //失败
console.log(child);

返回：

userdeMacBook-Pro:stream-learning user$ node test.js 
John
got five house
father { name: 'John', age: 1979, showProperty: [Function] }
bob

调用child.showProperty();会失败：

/Users/user/stream-learning/test.js:23
child.showProperty(); 
      ^

TypeError: child.showProperty is not a function

（3）对JavaScript prototype 使用介绍想了解的可以去这个博客看看，写的很好

（4）javascript:apply方法 以及和call的区别 （转载）

（5）readable-stream

https://github.com/nodejs/readable-stream

https://nodejs.org/dist/v10.11.0/docs/api/stream.html

Usage

You can swap your require('stream') with require('readable-stream') without any changes, if you are just using one of the main classes and functions.

const {
  Readable,
  Writable,
  Transform,
  Duplex,
  pipeline,
  finished
} = require('readable-stream')

Note that require('stream') will return Stream, while require('readable-stream') will return Readable. We discourage using whatever is exported directly, but rather use one of the properties as shown in the example above.