first commit

历届学生/18课程/class18_2/项目/练习项目/周志威/聊天室/backend/index.js

@@ -0,0 +1,61 @@
+const { log } = require('console');
+
+var app = require('express')();
+var http = require('http').createServer(app);
+var io = require('socket.io')(http);
+
+
+app.get('/', (req, res) => {
+    res.send('<h1>Hello world</h1>');
+});
+
+var onlineUserList = []
+
+//如果有客户端连接了 connection
+io.on('connection', (socket) => {
+    socket.on("login", function(res) {
+        if (onlineUserList.length == 0) {
+            onlineUserList.push(res);
+            socket.emit("LoginSuccess", res);
+        } else {
+            var u = onlineUserList.filter(v => {
+                if (v.name == res.name) {
+                    return v
+                }
+            });
+
+            if (u.length != 0) {
+                socket.emit("userNameExists");
+            } else {
+                onlineUserList.push(res);
+                socket.emit("LoginSuccess", res);
+            }
+        }
+    });
+  
+    socket.on("JoinRoom",function(res) {
+        socket.join(res.roomid);
+        var Online = onlineUserList.filter(v=> {
+            if (v.roomid == res.roomid) {
+                return v
+            }
+        });
+        io.in(res.roomid).emit("OnLineUserList", Online);
+        io.in(res.roomid).emit("WelcomeUser", `欢迎用户${res.name}加入群聊`);
+    });
+
+    socket.on("shake",function(res) {
+        console.log("shake1: ",res);
+        socket.to(res.roomid).emit("addShake", "");
+    })
+
+    socket.on("sendMessage",function(res) {
+        console.log("用户的聊天内容：", res);
+        socket.to(res.roomid).emit('SetMessage', res);
+    })
+
+});
+
+http.listen(1314, () => {
+    console.log('listening on *:1314');
+});

历届学生/18课程/class18_2/项目/练习项目/周志威/聊天室/backend/package-lock.json

@@ -0,0 +1,165 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@types/component-emitter": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npm.taobao.org/@types/component-emitter/download/@types/component-emitter-1.2.10.tgz",
+      "integrity": "sha1-71sVibnxZURkLkc9tepWORB+8+o="
+    },
+    "@types/cookie": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npm.taobao.org/@types/cookie/download/@types/cookie-0.4.0.tgz",
+      "integrity": "sha1-FPhUwPk9Mm452m47bzT303UT0Qg="
+    },
+    "@types/cors": {
+      "version": "2.8.9",
+      "resolved": "https://registry.npm.taobao.org/@types/cors/download/@types/cors-2.8.9.tgz",
+      "integrity": "sha1-S9H8rHLsqNW+yT52x/3L3BvCzUo="
+    },
+    "@types/node": {
+      "version": "14.14.19",
+      "resolved": "https://registry.npm.taobao.org/@types/node/download/@types/node-14.14.19.tgz?cache=0&sync_timestamp=1609525182199&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fnode%2Fdownload%2F%40types%2Fnode-14.14.19.tgz",
+      "integrity": "sha1-UTUXaoMwuI7OTpqx/c/ApUW0urQ="
+    },
+    "accepts": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npm.taobao.org/accepts/download/accepts-1.3.7.tgz",
+      "integrity": "sha1-UxvHJlF6OytB+FACHGzBXqq1B80=",
+      "requires": {
+        "mime-types": "~2.1.24",
+        "negotiator": "0.6.2"
+      }
+    },
+    "base64-arraybuffer": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npm.taobao.org/base64-arraybuffer/download/base64-arraybuffer-0.1.4.tgz",
+      "integrity": "sha1-mBjHngWbE1X5fgQooBfIOOkLqBI="
+    },
+    "base64id": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/base64id/download/base64id-2.0.0.tgz",
+      "integrity": "sha1-J3Csa8R9MSr5eov5pjQ0LgzSXLY="
+    },
+    "component-emitter": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npm.taobao.org/component-emitter/download/component-emitter-1.3.0.tgz",
+      "integrity": "sha1-FuQHD7qK4ptnnyIVhT7hgasuq8A="
+    },
+    "cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npm.taobao.org/cookie/download/cookie-0.4.1.tgz?cache=0&sync_timestamp=1587525873712&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcookie%2Fdownload%2Fcookie-0.4.1.tgz",
+      "integrity": "sha1-r9cT/ibr0hupXOth+agRblClN9E="
+    },
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npm.taobao.org/cors/download/cors-2.8.5.tgz",
+      "integrity": "sha1-6sEdpRWS3Ya58G9uesKTs9+HXSk=",
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
+    "debug": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npm.taobao.org/debug/download/debug-4.1.1.tgz?cache=0&sync_timestamp=1607566575639&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-4.1.1.tgz",
+      "integrity": "sha1-O3ImAlUQnGtYnO4FDx1RYTlmR5E=",
+      "requires": {
+        "ms": "^2.1.1"
+      }
+    },
+    "engine.io": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npm.taobao.org/engine.io/download/engine.io-4.0.5.tgz",
+      "integrity": "sha1-P/bVxyVgrZNCPBzh6AdzMgZiKhw=",
+      "requires": {
+        "accepts": "~1.3.4",
+        "base64id": "2.0.0",
+        "cookie": "~0.4.1",
+        "cors": "~2.8.5",
+        "debug": "~4.1.0",
+        "engine.io-parser": "~4.0.0",
+        "ws": "^7.1.2"
+      }
+    },
+    "engine.io-parser": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npm.taobao.org/engine.io-parser/download/engine.io-parser-4.0.2.tgz",
+      "integrity": "sha1-5B0LP7Zve/SjZx0gOKFUAk7bUB4=",
+      "requires": {
+        "base64-arraybuffer": "0.1.4"
+      }
+    },
+    "mime-db": {
+      "version": "1.45.0",
+      "resolved": "https://registry.npm.taobao.org/mime-db/download/mime-db-1.45.0.tgz?cache=0&sync_timestamp=1600831175828&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmime-db%2Fdownload%2Fmime-db-1.45.0.tgz",
+      "integrity": "sha1-zO7aIczXw6dF66LezVXUtz54eeo="
+    },
+    "mime-types": {
+      "version": "2.1.28",
+      "resolved": "https://registry.npm.taobao.org/mime-types/download/mime-types-2.1.28.tgz?cache=0&sync_timestamp=1609559846884&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmime-types%2Fdownload%2Fmime-types-2.1.28.tgz",
+      "integrity": "sha1-EWDEdX6rLFNjiI4AUnPs950qDs0=",
+      "requires": {
+        "mime-db": "1.45.0"
+      }
+    },
+    "ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.1.3.tgz?cache=0&sync_timestamp=1607433856838&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.1.3.tgz",
+      "integrity": "sha1-V0yBOM4dK1hh8LRFedut1gxmFbI="
+    },
+    "negotiator": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npm.taobao.org/negotiator/download/negotiator-0.6.2.tgz",
+      "integrity": "sha1-/qz3zPUlp3rpY0Q2pkiD/+yjRvs="
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
+    "socket.io": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npm.taobao.org/socket.io/download/socket.io-3.0.4.tgz?cache=0&sync_timestamp=1607339716130&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsocket.io%2Fdownload%2Fsocket.io-3.0.4.tgz",
+      "integrity": "sha1-IBMKgLV+SNrbZx8i43dgR8x/nVM=",
+      "requires": {
+        "@types/cookie": "^0.4.0",
+        "@types/cors": "^2.8.8",
+        "@types/node": "^14.14.7",
+        "accepts": "~1.3.4",
+        "base64id": "~2.0.0",
+        "debug": "~4.1.0",
+        "engine.io": "~4.0.0",
+        "socket.io-adapter": "~2.0.3",
+        "socket.io-parser": "~4.0.1"
+      }
+    },
+    "socket.io-adapter": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npm.taobao.org/socket.io-adapter/download/socket.io-adapter-2.0.3.tgz",
+      "integrity": "sha1-Nyt83npTX8T08NWsf3OVKjBi1Dg="
+    },
+    "socket.io-parser": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npm.taobao.org/socket.io-parser/download/socket.io-parser-4.0.2.tgz",
+      "integrity": "sha1-PQIanIZnG7B558bIBttqHZsbx4A=",
+      "requires": {
+        "@types/component-emitter": "^1.2.10",
+        "component-emitter": "~1.3.0",
+        "debug": "~4.1.0"
+      }
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npm.taobao.org/vary/download/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
+    },
+    "ws": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npm.taobao.org/ws/download/ws-7.4.2.tgz?cache=0&sync_timestamp=1609274396223&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fws%2Fdownload%2Fws-7.4.2.tgz",
+      "integrity": "sha1-eCEABI5U6zb+mEM2OrHGhnKyYd0="
+    }
+  }
+}

历届学生/18课程/class18_2/项目/练习项目/周志威/聊天室/backend/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "start": "node-dev index.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.17.1",
+    "socket.io": "^2.3.0"
+  }
+}

历届学生/18课程/class18_2/项目/练习项目/周志威/聊天室/fontend/css/clear.css

@@ -0,0 +1,6 @@
+* {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+}

历届学生/18课程/class18_2/项目/练习项目/周志威/聊天室/fontend/css/index.css

@@ -0,0 +1,239 @@
+@keyframes Doudong {
+    0% {
+      transform: translateX(0px);
+    }
+  
+    25% {
+      transform: translateX(170px);
+    }
+  
+    50% {
+      transform: translateX(0);
+    }
+  
+    75% {
+      transform: translateX(-170px);
+    }
+  
+    100% {
+      transform: translateX(0px);
+    }
+  }
+  
+  .shake {
+      animation: Doudong 0.01s infinite;
+  }
+  .chat {
+      width: 1100px;
+      height: 750px;
+      margin: 5% auto;
+      border: 1px solid #d9dcde;
+      box-shadow: 1px 1px 20px #c7c3c3;
+      overflow: hidden;
+  }
+  .chat_left {
+      width: 800px;
+      height: 100%;
+      float: left;
+      position: relative;
+  }
+  .title {
+      position: absolute;
+      width: 100%;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      left: 0;
+      top: 0;
+      padding: 0 15px;
+      border-bottom: 1px solid #d9dcde;
+      background: #fff;
+      z-index: 99;
+      box-sizing: border-box;
+      justify-content: space-between;
+  }
+  .userinfo {
+      display: flex;
+      align-items: center;
+  }
+  .userinfo img {
+      width: 25px;
+      height: 25px;
+      margin-right: 10px;
+      border-radius: 100%;
+  }
+  .title p {
+      margin: 0;
+  }
+  .chat_message {
+      width: 100%;
+      height: 80%;
+      padding-top: 60px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+  }
+  .message {
+      display: flex;
+      margin-bottom: 40px;
+  }
+  .message .userlogo {
+      width: 30px;
+      height: 30px;
+      border-radius: 100%;
+      margin-right: 12px;
+  }
+  .right {
+      justify-content: flex-end;
+  }
+  .right .userlogo {
+      order: 3;
+      margin-right: 0 !important;
+      margin-left: 12px;
+  }
+  .right .r_message {
+      text-align: right;
+  }
+  .system {
+      text-align: center;
+      margin-bottom: 40px;
+  }
+  .system span {
+      padding: 9px 14px;
+      background: #f8f8f8;
+      color: #9e9d9d;
+      font-size: 13px;
+      border-radius: 12px;
+  }
+  .r_message .name {
+      font-size: 14px;
+      color: #9fa8c5;
+      margin-bottom: 6px;
+  }
+  .r_message .content {
+      padding: 10px 10px;
+      color: #333;
+      font-size: 16px;
+      background: #f3f3f3;
+      border-radius: 12px;
+  }
+  .content img {
+      max-width: 480px !important;
+  }
+  .chat_input {
+      width: 100%;
+      height: 19%;
+      border-top: 1px solid #d9dcde;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+  }
+  .gif,
+  .expression {
+      position: absolute;
+      left: 0;
+      bottom: 142px;
+      width: 400px;
+      height: 200px;
+      overflow-y: scroll;
+      margin: 0;
+      padding: 0;
+      border: 1px solid #d9dcde;
+  }
+  .fontedit {
+      width: 100%;
+      height: 40px;
+      background: #f6f7f9;
+      position: absolute;
+      left: 0;
+      bottom: 132px;
+      margin: 0;
+      padding: 0;
+      padding-left: 16px;
+  }
+  .fontedit li {
+      float: left;
+      height: 100%;
+      line-height: 40px;
+      margin-right: 21px;
+  }
+  .fontedit li span{}
+  .fontedit li .FontSize{}
+  .fontedit li .Colors{}
+  .expression {
+      padding: 5px;
+      box-sizing: border-box;
+  }
+  .expression li {
+      width: 20px;
+      text-align: center;
+      float: left;
+      height: 20px;
+      margin-right: 5px;
+      margin-bottom: 7px;
+  }
+  .expression li img{
+      width: 100%;
+      height: 100%;
+  }
+  .gif li {
+      width: 20%;
+      text-align: center;
+      float: left;
+      height: 77px;
+  }
+  .gif li img{
+      width: 100%;
+  }
+  .chat_right {
+      float: left;
+      width: 298px;
+      height: 100%;
+      box-sizing: border-box;
+      background: #f6f7f9;
+  }
+  .chat_right p {
+      height: 40px;
+      margin: 0;
+      line-height: 40px;
+      font-size: 14px;
+      color: #777;
+      border-bottom: 1px solid #d9dcde;
+      padding: 0px 15px 15px 15px;
+  }
+  
+  .action {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      padding-left: 15px;
+  }
+  .action i {
+      margin-right: 15px;
+  }
+  .chat_inputbox {
+      flex: 1;
+      outline: none;
+      padding-left: 10px;
+      box-sizing: border-box;
+  }
+  .chat_inputbox img {
+      width: 20px;
+  }
+  .chat_right ul {
+      margin: 0;
+      padding: 0;
+      padding: 0px 15px 15px 15px;
+  }
+  .chat_right ul li{
+      height: 40px;
+      display: flex;
+      align-items: center;
+      margin: 8px 0;
+  }
+  .chat_right ul li img{
+      width: 30px;
+      height: 30px;
+      border-radius: 100%;
+      margin-right: 10px;
+  }
+  .chat_right ul li span{}

历届学生/18课程/class18_2/项目/练习项目/周志威/聊天室/fontend/css/login.css

@@ -0,0 +1,50 @@
+.login {
+    width: 248px;
+    height: 315px;
+    border: 1px solid #d9dcde;
+    margin: 20% auto;
+    text-align: center;
+    padding: 0 15px;
+    box-sizing: border-box;
+    border-radius: 10px;
+    box-shadow: 1px 1px 20px #c7c3c3;
+}
+.login img {
+    width: 100px;
+    height: 100px;
+    border-radius: 100%;
+    margin-top: 30px;
+    margin-bottom: 20px;
+}
+
+.input input {
+    width: 100%;
+    height: 36px;
+    outline: none;
+    border: none;
+    border-bottom: 1px solid #d9dcde;
+}
+.entry {
+    margin-top: 15px;
+    width: 100%;
+    height: 35px;
+    background: #7eb2dc;
+    color: #fff;
+    text-align: center;
+    line-height: 35px;
+    font-size: 16px;
+    border-radius: 15px;
+}
+
+#SelectImg .modal-body {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+#SelectImg .modal-body img {
+    width: 100px;
+    height: 100px;
+}
+.select_active {
+        border: 1px solid red;
+}