revise

pandaSeven · pandaSeven · commit ef8a93d0ccb2 · 2018-05-24T17:28:11.000+08:00
diff --git a/app.js b/app.js
@@ -0,0 +1,46 @@
+var ws = require("nodejs-websocket");
+console.log("Start building a connection...");
+
+//init
+var pagesConn = null,
+    pagesServer = null,
+    pagesConnReady = false,
+    pagesServerReady = false;
+
+//create server
+var server = ws.createServer(function(conn) {
+
+    //Messages received
+    conn.on("text", function(str) {
+      console.log("Messages received:" + str);
+      if (str === "connection") {
+        pagesConn = conn;
+        pagesConnReady = true;
+        conn.sendText("success");
+      }
+      if (str === "server") {
+        pagesServer = conn;
+        pagesServerReady = true;
+      }
+      if (pagesConnReady && pagesServerReady) {
+        pagesServer.sendText(str);
+      }
+      conn.sendText(str);
+    });
+
+    //close
+    conn.on("close", function(code, reason) {
+      console.log("Close connection");
+    });
+
+    //error
+    conn.on("error", function(code, reason) {
+      console.log("error");
+    });
+}).listen(8001);
+
+//为这两页面开个路由
+//实现点击之后的内容存起来
+
+
+console.log("WebSocket success");
diff --git a/connection.html b/connection.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>connection</title>
+    <style>
+        #connection {
+            text-align: center;
+            padding: 20px;
+        }
+        .allitems {
+            text-align: center;
+            margin-top: 50px;
+        }
+        .allitems div {
+            width: 60%;
+            padding: 20px;
+            margin-bottom: 20px;
+            border: 1px solid;
+            text-align: center;
+            display: inline-block;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="connection">connection...</div>
+    <div class="allitems">
+        <div>This is the first module!</div>
+        <div>This is the second module!</div>
+        <div>This is the third modele!</div>
+    </div>
+
+    <script>
+        var mess = document.getElementById("connection");
+        if (window.WebSocket) {
+            var ws = new WebSocket('ws://localhost:8001');
+
+            ws.onopen = function (e) {
+                console.log("Connect the server to success");
+                ws.send("connection");
+            }
+            ws.onclose = function (e) {
+                console.log("Close pages");
+            }
+            ws.onerror = function (e) {
+                console.log("This is a error");
+            }
+
+            ws.onmessage = function (e) {
+                mess.innerHTML = "Connection success!"
+                document.querySelector(".allitems").onclick = function (e) {
+                    var time = new Date();
+                    ws.send(time + "click“" + e.target.innerHTML + "”");
+                }
+            }
+        }
+    </script>
+</body>
+
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "hello-websocket",
+  "version": "1.0.0",
+  "description": "",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "nodejs-websocket": "^1.7.1"
+  }
+}
diff --git a/server.html b/server.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>server</title>
+    <style>
+        .kuang {
+            text-align: center;
+            margin-top: 200px;
+        }
+        #server {
+            text-align: center
+        }
+    </style>
+</head>
+<body>
+    <div id="server"></div>
+
+    <script>
+        var server = document.getElementById("server");
+        if (window.WebSocket) {
+            var ws = new WebSocket('ws://localhost:8001');
+
+            ws.onopen = function (e) {
+                console.log("success");
+                ws.send("server");
+            }
+            ws.onclose = function (e) {
+                console.log("closed");
+            }
+            ws.onerror = function () {
+                console.log("this is error");
+            }
+
+            ws.onmessage = function (e) {
+                var time = new Date();
+                server.innerHTML += time + "的消息：" + e.data + "<br>"
+            }
+        }
+    </script>
+</body>
+
+</html>
