Browse Source

more info on helloworld demo, gh banners

Michelle Bu 12 năm trước cách đây
mục cha
commit
ed8f854a99
2 tập tin đã thay đổi với 64 bổ sung7 xóa
  1. 5 3
      examples/chat.html
  2. 59 4
      examples/helloworld.html

+ 5 - 3
examples/chat.html

@@ -11,7 +11,7 @@
 <script type="text/javascript" src="http://cdn.peerjs.com/0/peer.js"></script>
 <script>
 // Connect to PeerJS, have server assign an ID instead of providing one
-var peer = new Peer({key: '47etzdhjw597ldi', debug: true});
+var peer = new Peer({key: 'lwjd5qra8257b9', debug: true});
 
 // Show this peer's ID.
 peer.on('open', function(id){
@@ -155,6 +155,9 @@ window.onunload = window.onbeforeunload = function(e) {
 </head> 
  
 <body> 
+  <a href="https://github.com/peers/peerjs"><img style="position: absolute; top: 0; right: 0; border: 0;"
+    src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"
+    alt="Fork me on GitHub"></a>
 
   <div id="actions">
     Your PeerJS ID is <span id="pid"></span><br>
@@ -176,8 +179,7 @@ window.onunload = window.onbeforeunload = function(e) {
   
   
   <div class="warning browser"><div class="important">Your browser version: <span id="browsers"></span><br>
-  Currently <strong>Google Chrome 26.0.1403.0 or above</strong> is required (Dev
-  or Canary channels)</strong></div>For more up to date compatibility
+  Currently <strong>Google Chrome 26.0.1403.0 or above</strong> is required.</strong></div>For more up to date compatibility
 information see <a href="http://peerjs.com/status">PeerJS WebRTC
   Status</a><br>Note that this demo may also fail if you are behind
 stringent firewalls or both you and the remote peer and behind symmetric

+ 59 - 4
examples/helloworld.html

@@ -29,8 +29,8 @@
       var c = peer2.connect(peerId1);
       c.on('data', function(data) {
         // When we receive 'Hello', send ' world'.
-        $('body').append(data);
-        c.send(' world');
+        $('#helloworld').append(data);
+        c.send(' peer');
       });
     });
 
@@ -42,19 +42,74 @@
       // transmit data.
       connection.on('open', function() {
         // Send 'Hello' on the connection.
-        connection.send('Hello');
+        connection.send('Hello,');
       });
       // The `data` event is fired when data is received on the connection.
       connection.on('data', function(data) {
         // Append the data to body.
-        $('body').append(data);
+        $('#helloworld').append(data);
       });
     });
+
+    // Show browser version
+    $('#browsers').text(navigator.userAgent);
   });
 
+
 </script>
+<style>
+  #helloworld {
+    font-weight: 600;
+    font-size: 30px;
+    padding: 20px;
+    background-color: #4dace2;
+    border: 1px solid #0C6BA1;
+    max-width: 600px;
+  }
+  #browsers {
+    font-weight: 600;
+  }
+  .warning {
+    max-width: 600px;
+    padding: 20px;
+    background-color: #eee;
+    border: 1px solid #ccc;
+    font-size: 18px;
+  }
+  .browserinfo {
+    padding: 20px;
+    border: 1px solid #ccc;
+    background-color: #f8f8f8;
+  }
+  a {
+    font-weight: 600;
+  }
+</style>
 </head> 
  
 <body> 
+  <a href="https://github.com/peers/peerjs"><img style="position: absolute; top: 0; right: 0; border: 0;"
+    src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"
+    alt="Fork me on GitHub"></a>
+  <div id="helloworld"></div>
+  <div class="warning browser"><div class="important">
+      Good news! If you can see the text in the blue box above, your Chrome is up to
+      date (version 26) and you can now use WebRTC P2P
+      DataChannels.
+      <br>
+      Open up your Chrome inspector to see what's going on under the hood.
+      <br><br>
+      Not cool enough? Try out <a
+        href="http://cdn.peerjs.com/demo/chat.html">a chat demo</a>
+      with a friend.
+      <br>
+      This demo was built with <a href="http://peerjs.com">PeerJS.</a><br><br>
+      <div class="browserinfo">
+      Your browser version: <span id="browsers"></span><br>
+  Currently <strong>Google Chrome 26.0.1403.0 or above</strong> is
+  required.</strong></div><br>For more up to date compatibility
+information see <a href="http://peerjs.com/status">PeerJS WebRTC
+  Status</a><br>Note that this demo may also fail if you are behind
+stringent firewalls.</div></div>
 </body> 
 </html>