first commit

历届学生/fontendsix/项目练习/上课项目/聊天/backend/index.js

@@ -0,0 +1,75 @@
+const options = {};
+const io = require('socket.io')(options);
+
+// 存放在线的群和群成员
+var userOneLine = { };
+
+// 保存群聊天记录
+var ChatRecord = {
+    1001: [
+        {
+            userId: '1',
+            userMessage: ""
+        }
+    ]
+};
+
+io.on('connection', socket => {
+
+    socket.on("Login", function(res) {
+        console.log("Login.....", res);
+        res.id = returnId();
+        socket.join(res.roomId);
+        // 已经存在这个房间了
+        if (userOneLine.hasOwnProperty(res.roomId)) {
+            res.type = 2;
+            userOneLine[res.roomId].push(res);
+            io.in(res.roomId).emit("system", `欢迎${res.name}加入群聊`);
+
+        // 不存在这个群    
+        } else {
+            // 设置你为群主
+            res.type = 1;
+            // 用你的roomId先创建一个空数组
+            userOneLine[res.roomId] = [];
+            userOneLine[res.roomId].push(res);
+            io.in(res.roomId).emit("system", `欢迎您成功创建 ${res.roomId} 群聊`);
+        }
+
+        console.log("userOneLine ==== ", userOneLine);
+        io.in(res.roomId).emit("SendGroupMembers", userOneLine[res.roomId]);
+        // socket.emit("success", { title: '我是后端的数据，哈哈哈' });
+    })
+
+    // 接受前端发送过来的聊天内容
+    socket.on("sendMessage", function(res){
+        console.log(res);
+        socket.to(res.roomId).emit("getMessage", res);
+    })
+
+    socket.on("getShake", function(res){
+        socket.to(res.roomId).emit("sendShake");
+    })
+
+    // 用户离线
+    socket.on("UserNoLine", function(res){
+         // 1: 从数组 userOneLine 删除 filter 离线 id 用户 
+
+         io.in(res.roomId).emit("system", `xx 已离开群聊`);
+
+         io.in("room1").emit("SendGroupMembers",userOneLine[res.roomId]);
+         console.log('用户离线的时候调用，一般做系统通知，');
+    })
+
+
+    // 用户离线的时候调用，一般做系统通知，
+    // 通知群内的人，xxx离开群聊了
+    socket.on('disconnect', (res) => {});
+});
+
+
+function returnId() {
+    return new Date().getFullYear().toString() + (new Date().getMonth()+1).toString() + new Date().getDate() + new Date().getTime().toString() + Math.random() * new Date().getTime()
+}
+
+io.listen(3000);

历届学生/fontendsix/项目练习/上课项目/聊天/backend/package.json

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

历届学生/fontendsix/项目练习/上课项目/聊天/fontend/css/clear.css

@@ -0,0 +1,42 @@
+body,
+html,
+ul,
+li,
+h2,
+h3,
+h4,
+h5,
+h6,
+h1,
+p,
+i {
+    margin: 0 ;
+    list-style: none;
+    padding: 0;
+}
+
+a {
+    text-decoration: none;
+    color: #333;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+}
+
+input {
+    outline: none;
+}
+
+body, html {
+    width: 100%;
+    height: 100%;
+}
+
+::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+}
+
+.swiper-wrapper .swiper-slide {
+    height: calc(100vh - 1.6rem - 1rem);
+    overflow-y: scroll;
+}

历届学生/fontendsix/项目练习/上课项目/聊天/fontend/css/index.css

@@ -0,0 +1,229 @@
+body {
+    overflow: hidden;
+}
+.header {
+    height: 55px;
+    background: #e7e6e6;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 15px;
+    box-sizing: border-box;
+}
+.group_name {
+    font-size: 18px;
+    font-weight: 20;
+}
+.header .right {
+    display: flex;
+    align-items: center;
+}
+
+.header .right img {
+    width: 35px;
+    height: 35px;
+    border-radius: 100%;
+    margin-left: 10px;
+}
+.header .right span {
+    font-size: 16px;
+}
+
+.content {
+    height: calc(100vh - 55px - 100px);
+    display: flex;
+    width: 100%;
+}
+.content_left {
+    width: 80%;
+    height: 100%;
+    padding: 10px 15px 0 10px;
+    overflow-y: scroll;
+}
+.content_right {
+    width: 20%;
+    height: 100%;
+    background: #f6f7f9;
+    box-sizing: border-box;
+    padding-bottom: 0;
+    padding: 10px;
+    padding-top: 0 !important;
+}
+.chat_record {
+    padding-left: 0;
+}
+.chat_record li {
+    display: flex;
+    margin-bottom: 30px;
+}
+.chat_record li .user_img{
+    width: 40px;
+    height: 40px;
+    border-radius: 100%;
+    margin-right: 10px;
+}
+.chat_record li .record_right{
+    width: calc(100% - 100px);
+}
+.list_title {
+    height: 40px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    font-size: 14px;
+    font-weight: 500;
+}
+.online_user_list {
+    width: 100%;
+    height: calc(100% - 40px);
+    overflow-y: scroll;
+}
+.online_user_list li {
+    display: flex;
+    height: 40px;
+    align-items: center;
+}
+.online_user_list li img {
+    width: 30px;
+    height: 30px;
+    margin-right: 10px;
+    border-radius: 100%;
+}
+.online_user_list li img span {
+    font-size: 14px;
+}
+.chat_record li .user_nickname{
+    color: #777;
+    margin-bottom: 8px;
+}
+.chat_record li .record_content{
+    font-size: #000;
+    box-sizing: border-box;
+    word-break: break-word;
+    word-wrap: break-word;
+    display: inline-block;
+}
+.mes_right {
+    justify-content: flex-end;
+}
+.mes_right .user_img {
+    margin-right: 0 !important;
+    margin-left: 10px;
+}
+
+.mes_right .record_right {
+    order: -1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+.mes_right .user_nickname {
+    text-align: right;
+}
+.footer {
+    height: 100px;
+    width: 100%;
+    border-top: 1px solid #e4e4e4;
+    box-sizing: border-box;
+}
+.footer_action {
+    display: flex;
+    height: 35px;
+    align-items: center;
+    padding: 0 15px;
+    position: relative;
+}
+.footer_action .menu {
+    position: absolute;
+    width: 460px;
+    height: 300px;
+    bottom: 35px;
+    left: 0;
+    box-shadow: 1px -1px 10px #bebbbb;
+    z-index: 9;
+    background: #fff;
+    border-radius: 4px;
+}
+.footer_action .menu .menu_title {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 500;
+    padding: 0 15px;
+    box-sizing: border-box;
+    border-bottom: 1px solid #e9e9e9;
+}
+.menu_body {
+    height: calc(300px - 40px - 30px);
+    overflow-y: scroll;
+    padding: 10px 15px;
+    box-sizing: border-box;
+}
+.menu_body .body_content {
+    display: none;
+}
+.look img {
+    width: 25px;
+    height: 25px;
+    font-size: 0;
+    margin-bottom: 10px;
+}
+.menu_body .active {
+    display: inline-block !important;
+}
+.menu_footer {
+    width: 100%;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    background: #e5e5e5;
+    box-sizing: border-box;
+}
+.menu_footer li {
+    width: 13%;
+    text-align: center;
+    height: 100%;
+    line-height: 30px;
+    cursor: pointer;
+}
+.menu_footer .footer_active {
+    background: #fff;
+}
+.footer_action i {
+    display: inline-block;
+    margin-right: 10px;
+}
+.record_text {
+    width: 100%;
+    height: calc(100px - 35px);
+    outline: none;
+    overflow-y: scroll;
+    padding: 2px 10px;
+    box-sizing: border-box;
+    font-size: 16px;
+}
+.record_text img,
+.record_content img{
+    width: 25px;
+    height: 25px;
+}
+.system {
+    text-align: center;
+}
+.system span {
+    color: #ffff;
+    background: #8d8d8d;
+    padding: 5px 10px;
+    border-radius: 10px;
+    margin: 0 auto;
+    max-width: 90%;
+}
+
+
+.qp {
+    padding: 10px;
+    border-radius: 10px;
+}

历届学生/fontendsix/项目练习/上课项目/聊天/fontend/css/login.css

@@ -0,0 +1,58 @@
+body {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+}
+
+.login {
+    width: 100%;
+    background: #fff;
+    border-radius: 10px;
+    text-align: center;
+    margin-top: -80px;
+}
+
+.login img {
+    width: 100px;
+    height: 100px;
+    border-radius: 100%;
+    margin-bottom: 50px;
+    margin-top: 30px;
+}
+.username {
+    margin-bottom: 8px;
+}
+.login input {
+    width: 185px;
+    border: none;
+    border-bottom: 1px solid #f1f1f1;
+    padding-bottom: 8px;
+    font-size: 12px;
+    color: #929090;
+    margin-bottom: 10px;
+}
+.enter {
+    width: 50%;
+    height: 40px;
+    text-align: center;
+    line-height: 40px;
+    background: #bebcbc;
+    color: #fff;
+    font-size: 16px;
+    border-radius: 6px;
+    margin: 0 auto;
+}
+.chiooseUserImg {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+}
+.chiooseUserImg li {
+    width: 18%;
+    margin-right: 10px;
+    margin-bottom: 10px;
+}
+.active {
+    border: 1px solid red;
+}