Skip to content
Browse files

Module Pipe... 1st commit

  • Loading branch information...
1 parent cb71dfa commit bc575f9a8e873a3e798f9436843e6fba7c7dae1c @KensakuKOMATSU committed
Showing with 122 additions and 20 deletions.
  1. +11 −8 public/c.html
  2. +99 −0 public/javascripts/pipe.js
  3. +12 −12 public/p.html
View
19 public/c.html
@@ -2,21 +2,24 @@
<html>
<head>
<title>child</title>
+<script src="javascripts/pipe.js"></script>
</head>
<body>
Hello, child!!
<output></output>
<script>
- console.log("c");
- window.addEventListener('message', function(e){
- console.log(e);
+ var server = new Pipe.Server();
+ server.setup();
- e.ports[0].onmessage = function(e){
- console.log(e);
- document.querySelector('output').innerText = e.data;
- }
- }, false);
+ setInterval(function(){
+ server.send(new Date().getTime());
+ }, 1000);
+
+ server.onmessage = function(e) {
+ document.querySelector("output").innerText = e.data;
+ this.send("recv: "+e.data);
+ }
</script>
</body>
</html>
View
99 public/javascripts/pipe.js
@@ -0,0 +1,99 @@
+var Pipe = {};
+
+(function(global){
+ Pipe.Server = function(){
+ var setup_, send_, onmessage_, onconnect_, port_, flag = true;
+
+ send_ = function(data) {
+ if(!!port_ === false) {
+ throw("connection not established");
+ }
+
+ port_.postMessage(data);
+ };
+
+ onmessage_ = function(data){
+ console.log("Pipe.Server.onmessage");
+ console.log(data);
+ };
+
+ onconnect_ = function(data){
+ console.log("Pipe.Server.onconnect");
+ console.log("connection established");
+ };
+
+
+ setup_ = function(){
+ var self = this;
+ window.addEventListener("message", function(e) {
+ if(flag) {
+ self.onconnect(e);
+
+ port_ = e.ports[0];
+ flag = false;
+
+ port_.onmessage = function(e){
+ self.onmessage(e);
+ }
+ }
+ }, false);
+ }
+
+ return {
+ "setup": setup_,
+ "onconnect" : onconnect_,
+ "send" : send_,
+ "onmessage" : onmessage_
+ }
+ }
+
+ Pipe.Client = function(){
+ var setup_, send_, onmessage_, port_, ifr_, flag = true;
+
+
+ setup_ = function(url, id){
+ // [TODO] validates url string
+ if(typeof(url) !== "string") {
+ throw("parameter url error");
+ }
+
+ ifr_ = document.createElement('iframe');
+ ifr_.src = url;
+ document.body.appendChild(ifr_);
+
+ var self = this;
+
+ ifr_.onload = function(e){
+ var channel = new MessageChannel();
+ port_ = channel.port1;
+ console.log("onload iframe");
+
+ // [TODO] passes origin
+ ifr_.contentWindow.postMessage("init", [channel.port2], "*");
+
+
+
+ port_.onmessage = function(e){
+ self.onmessage(e);
+ }
+ }
+ }
+
+ send_ = function(data) {
+ if(!!port_ === false) {
+ throw("port is null");
+ }
+ port_.postMessage(data);
+ };
+
+ onmessage_ = function(e){
+ console.log(e);
+ };
+
+ return {
+ "setup": setup_,
+ "send" : send_,
+ "onmessage" : onmessage_
+ }
+ }
+})(this)
View
24 public/p.html
@@ -2,24 +2,24 @@
<html>
<head>
<title>parent</title>
+<script src="javascripts/pipe.js"></script>
</head>
<body>
<h1>HTML5 Messaging</h1>
-<iframe src="c.html"></iframe>
+<output></output>
<button>push</button>
+<hr>
- <script>
- var channel = new MessageChannel();
- window.onload = function(){
- var ifr = document.querySelector('iframe').contentWindow;
- console.log(ifr);
- ifr.postMessage("init", [channel.port2], "*");
+<script>
+ var client = new Pipe.Client();
+ client.setup("c.html");
+ client.onmessage = function(e){
+ document.querySelector("output").innerText = e.data;
}
- document.querySelector('button').addEventListener('click', function(){
- channel.port1.postMessage(new Date().getTime());
- });
- </script>
-
+ document.querySelector("button").addEventListener("click", function(e){
+ client.send(new Date().getTime());
+ }, false);
+</script>
</body>
</html>

0 comments on commit bc575f9

Please sign in to comment.
Something went wrong with that request. Please try again.