发送消息功能

kaala · Aug 22, 2024 · 4f9a07f · 4f9a07f
1 parent 2ecba2b
commit 4f9a07f
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,4 @@
 # peershare
-peerjs share with public turn server
+peerjs share
+
+http://kaala.github.io/peershare
diff --git a/index.html b/index.html
@@ -7,11 +7,14 @@
 </head>
 
 <body>
-    <div id="peers"></div>
-    <div id="dataset"></div>
-    <div id="footnote">
-        <a href="/index.html" target="_blank">home</a>
-    </div>
+    <p id="header">
+        <a href="/" target="_blank">home</a>
+    </p>
+    <p id="info"></p>
+    <p id="peers"></p>
+    <p id="contents"></p>
+    <p id="footnote">
+    </p>
 
     <link rel="stylesheet" href="lib/app.css">
     <script src="https://unpkg.com/[email protected]/dist/peerjs.min.js"></script>

diff --git a/lib/app.css b/lib/app.css
@@ -1,4 +1,9 @@
 p {
     outline: 1px dotted #f0f;
     font-family: monospace;
+}
+
+code {
+    font-family: monospace;
+    font-weight: bold;
 }
diff --git a/lib/app.js b/lib/app.js
@@ -1,61 +1,119 @@
-var ps = {}
+var ps = {};
 
 document.body.onload = function () {
-    var peers = document.querySelector('div#peers')
-    var dataset = document.querySelector('div#dataset')
+    var dom = {
+        info: document.querySelector('p#info'),
+        peers: document.querySelector('p#peers'),
+        contents: document.querySelector('p#contents'),
+    };
+
+    dom.peers.onclick = function (ev) {
+        console.log('!!! click', ev.target, ev);
+
+        var node = ev.target;
+        var peer = node.innerHTML;
+        var msg = prompt(`send to ${peer}`);
+        if (msg) {
+            ps.sendmsg(peer, msg);
+        }
+    };
 
 
     ps.print = function (dom, args) {
-        var html = args.join(', ')
-        var node = document.createElement('p')
-        node.innerHTML = html
-        dom.appendChild(node)
-    }
+        var html = args.map(function (e) { return `${e}`; }).join(' ');
+        var node = document.createElement('section');
+        node.innerHTML = html;
+        dom.appendChild(node);
+    };
+
+    ps.update = function (type) {
+        if (type === 'peers') {
+            var peer = ps.me;
+            var doms = Array.from(dom.peers.childNodes);
+            var connections = Object.keys(peer.connections);
+            doms.forEach(function (e) {
+                dom.peers.removeChild(e);
+            });
+            connections.forEach(function (e) {
+                ps.print(dom.peers, [e]);
+            });
+        }
+    };
 
-    ps.send = function (id, data) {
-        var dict = ps.me.connections
-        var peer = dict[id]
-        peer.forEach(p => {
-            p.send(data)
+
+    ps.sendmsg = function (id, data) {
+        var peer = ps.me;
+        var maps = peer.connections;
+        var conn = maps[id];
+        conn.forEach(pc => {
+            pc.send(['text', data]);
         });
-    }
+    };
+    ps.sendfile = function (id, data) {
+        var peer = ps.me;
+        var maps = peer.connections;
+        var conn = maps[id];
+        conn.forEach(pc => {
+            pc.send(['blob', data]);
+        });
+    };
+    ps.publish = function (pub, data) {
+        var peer = ps.me;
+        var maps = peer.connections;
+        var conn = Object.values(maps).flat();
+        conn.forEach(pc => {
+            pc.send([pub, data]);
+        });
+    };
 
-    ps.subscribe = function (conn) {
+    ps.sub = function (conn) {
         conn.on('open', function () {
-        })
+            ps.update('peers');
+        });
+        conn.on('close', function () {
+            ps.update('peers');
+        });
         conn.on('data', function (data) {
-            ps.print(dataset, ['data', `<code>${data}</code>`])
-        })
-    }
+            console.log('!!! conn.data', this, arguments);
+            var peer = this;
+            ps.print(dom.contents, [peer.peer, `<code>${data}</code>`]);
+        });
+    };
 
-    ps.connect = function (roomid) {
+    ps.connect = function (peer, roomid) {
 
         peer.on('open', function (id) {
-            ps.print(peers, [id, 'me'])
+            ps.print(dom.info, ['me', id]);
 
             if (roomid) {
-                var conn = peer.connect(roomid)
-                ps.subscribe(conn)
+                var conn = peer.connect(roomid, { reliable: true });
+                ps.sub(conn);
             } else {
-                ps.print(dataset, ['room link', `<a href=?roomid=${id} target="_blank">${id}</a>`])
+                ps.print(dom.info, ['roomid', `<a href=?roomid=${id} target="_blank">${id}</a>`]);
             }
-        })
+        });
 
         peer.on('connection', function (conn) {
-            ps.subscribe(conn)
+            ps.sub(conn);
+            ps.publish('peers', { peer: conn.peer });
         });
-    }
+        peer.on('disconnected', function () {
+            this.reconnect();
+        });
+    };
 
+    ps.conf = { debug: 3, };
 
-    var search = document.location.search
-    var room = search.match(/roomid=(?<roomid>.+)/)
-    var roomid = false
+    var search = document.location.search;
+    var room = search.match(/roomid=(?<roomid>.+)/);
+    var roomid = false;
     if (room) {
-        roomid = room[1]
+        roomid = room[1];
     }
 
-    ps.conf = { debug: 2, }
-    var peer = new Peer(ps.conf)
-    ps.me = peer
-    ps.connect(roomid)
-}
+    var host = new Peer(ps.conf);
+    ps.connect(host, roomid);
+
+    ps.me = host;
+    ps.peers = {};
+};