瀏覽代碼

Node version of server and some styling

Will Munn 5 年之前
父節點
當前提交
74dd9e3b74
共有 3 個文件被更改,包括 78 次插入9 次删除
  1. 6 4
      web-client/answerer.html
  2. 29 0
      web-client/server.js
  3. 43 5
      web-client/style.css

+ 6 - 4
web-client/answerer.html

@@ -5,16 +5,18 @@
         <link rel="stylesheet" href="/style.css" />
     </head>
     <body>
-        <h1>Web Rtc</h1>
-        <div>
+        <div id="message-container">
+            <h1>Web Rtc</h1>
+            <div id="messages"></div>
+        </div>
+        <div id="message-input">
             <p id="connection-state">Pending</p>
             <textarea id="message-text-box"
                 placeholder="Send a message"
             ></textarea>
             <br/>
-            <button id="send-message-button">Send Data</button>
+            <button id="send-message-button">Send</button>
         </div>
-        <div id="messages"></div>
         <script src="/answerScript.js"></script>
     </body>
 </html>

+ 29 - 0
web-client/server.js

@@ -0,0 +1,29 @@
+const http = require('http');
+
+let connectionMetadata;
+http.createServer(function(req, res) {
+  console.log(req.method.toUpperCase(), req.url);
+  if (req.method === 'POST') {
+    let body = '';
+    req.on('data', chunk => body += chunk);
+    req.on('end', () => {
+      connectionMetadata = body;
+      res.writeHead(200);
+      res.end();
+    });
+    return;
+  }
+  if (req.method === 'GET') {
+    res.writeHead(200, {'Content-Type': 'text/plain'});
+    res.end(connectionMetadata);
+    return;
+  }
+  if (req.method === 'OPTIONS') {
+    res.writeHead(200, {
+      'Access-Control-Allow-Origin': '*',
+    });
+    res.end(connectionMetadata);
+    return;
+  }
+  console.error('unknown method: ' + req.method);
+}).listen(8000);

+ 43 - 5
web-client/style.css

@@ -1,23 +1,61 @@
 body {
   background-color: #fff5e3;
   font-family: sans-serif;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0;
+}
+
+#message-container {
+  padding: 0 5%;
+  width: 100%;
+}
+
+h1 {
+  width: 100%;
+}
+
+#message-input {
+  width: 100%;
+  position: fixed;
+  top: 90%;
+  height: 10%;
+  display: flex;
+  background-color: #a0a0a0f7;
 }
 
 #message-text-box {
-  width: 500px;
-  height: 50px;
-  border-radius: 8px;
+  width: 90%;
+  border: none;
+  border-radius: 20px 0 0 20px;
+  padding: 5px;
+  vertical-align: middle;
+  font-size: medium;
+  resize: none;
+  vertical-align: middle;
+}
+
+#message-text-box:focus {
+  outline: none;
 }
 
 #messages {
   display: flex;
   flex-direction:column;
-  width: 70%;
+  width: 100%;
   margin: auto;
 }
 
+#send-message-button {
+  width: 10%;
+  font-size: medium;
+}
+#send-message-button:hover {
+  opacity: 10%;
+}
+
 .message {
-  width: 25%;
+  width: 40%;
   flex-basis: 100%;
   border: 1px solid;
   padding: 1%;