Event Channels

In notebook:
FrontEndMasters Async Javascript
Created at:
2016-09-22
Updated:
2016-09-22
Tags:
Fundamentals JavaScript
Set up a channel that listens to DOM events
  function fromEvent(el, eventType) {
  var ch = csp.chan();
  $(el).bind(eventType, function(evt){
    csp.putAsync(ch,evt);
  });
  return ch;
}

csp.go(function*(){
  var ch = fromEvent(el,"mousemove");
  while(true) {
    var evt = yield csp.take(ch);
    console.log(
      evt.clientX + "," + evt.clientY
    );
  }
});
note ​putAsync​ : we're not inside a generator, but a simple event handler. 

The difference between observables is back-pressure. We can model that we don't want to take more messages until we're ready.

No need convert between hot and cold observables, etc. 

​putAsync​ buffers all the events, and starts to put send them when someone is ready to take them. It buffers them as long as no one is ready to take them. It's not throwing any messages away.
If you want to throw away message you need to use ​alt​s.Asynquence CSP
  ASQ().runner(
  ASQ.csp.go(function *process1(ch){
    yield ASQ.csp.put(ch,"Hello");
    var msg = yield ASQ.csp.take(ch);
    console.log(msg);
  }),
  ASQ.csp.go(function *process2(ch){
    var greeting = yield ASQ.csp.take(ch);
    yield ASQ.csp.put(ch,greeting + " World");
    console.log("done!");
  })
);
just need to ​ASQ.​ in front of the previous examples. Same interface.

​ch​ is automatically created to avoid using global variables. You don't need to create one.