first commit

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

@@ -0,0 +1,110 @@
+var WebSocketServer = require('ws').Server,
+    ws = new WebSocketServer({ port: 3000 });
+
+// 群的数据结构
+// 10086: [
+//     {
+//         userName: '刘兵',
+//         userAuthor: 'http://1.com/1.jpg',
+//         roomNumber: 10086,
+//         userSocket: "WebSocket",
+//         type: 1 ,// 1 群主 2 管理员 3 群成员
+//     }
+// ]
+
+var groundList = { }
+
+ws.on('connection', function (io, req) {
+    console.log('前端简历链接....');
+
+    io.on('message', function (message) {
+        var text = JSON.parse(message.toString());
+        switch (text.type) {
+            case "SocketHealthy":
+                send(io,{ type: 'SocketHealthy', data: "pong" })
+                break;
+            case "SocketUser":
+                console.log("用户消息：", text)
+                switch (text.action) {
+                    case "send":
+                        SendAllExceptTheSender(text.data)
+                        break;
+                    case "userList":
+                        SendAll(text.data, {
+                            type: "SocketUser",
+                            action: 'list',
+                            data: groundList[text.data.room]
+                        })
+                        break;
+                }
+                // send(io,{ type: 'SocketUser', data: "这是SocketUser的测试消息" })
+                break;
+            case "SocketSystem":
+                console.log("系统消息：", text)
+                switch (text.action) {
+                    case "join":
+                        joinUser(io,text.data)
+                        break;
+                }
+                break;
+        }
+    });
+});
+
+function joinUser(io,info) {
+    console.log("用户加群：", info);
+    // 如果已经有这个群了
+    if (groundList.hasOwnProperty(info.room)) {
+        console.log("已经有这个群了")
+        groundList[info.room].push({
+            userName: info.name,
+            userAuthor: info.img,
+            roomNumber: info.room,
+            userSocket: io,
+            type: 3
+        })
+    // 没有这个群
+    } else {
+        console.log("没有这个群")
+        groundList[info.room] = [];
+        groundList[info.room].push({
+            userName: info.name,
+            userAuthor: info.img,
+            roomNumber: info.room,
+            userSocket: io,
+            type: 1
+        });
+    }
+
+    SendAll(info, {
+        type: 'SocketSystem',
+        action: 'joinMessage',
+        data: `欢迎用户 ${info.name} 加入群聊！`
+    })
+    console.log(groundList)
+}
+
+function SendAll(info, message) {
+    var currentUserGround = groundList[info.room];
+    currentUserGround.forEach(v => {
+        v.userSocket.send(JSON.stringify(message))
+    })
+}
+
+// 向群内所有人推送消息，但是排除消息发送者自己
+function SendAllExceptTheSender(info) {
+    var currentUserGround = groundList[info.room];
+    currentUserGround.forEach(v => {
+        if (info.name != v.userName) {
+            v.userSocket.send(JSON.stringify({
+                type: 'SocketUser',
+                action: 'to',
+                data: info
+            }))
+        }
+    })
+}
+
+function send(socket,data) {
+    socket.send(JSON.stringify(data));
+}

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

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

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

@@ -0,0 +1,41 @@
+:root {
+    /* app的主题色，如果要修改主题的话，修改这里即可 */
+    --themeColor: #fb7299;
+    --whiteColor: #fff;
+}
+
+
+.s-container {
+    overflow: hidden;
+    position: relative;
+}
+
+.s-wrapper {
+    position: relative;
+    overflow: hidden;
+}
+
+.s-slide {
+    float: left;
+    overflow-y: scroll;
+}
+
+
+body,p,ul,li,h1,h2,h3,h4,h5,h6,input,figure {
+    margin: 0;
+    padding: 0;
+    border: none;
+}
+
+li {
+    list-style: none;
+}
+
+input {
+    outline: none;
+}
+
+a {
+    text-decoration: none;
+    color: #000;
+}

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

@@ -0,0 +1,222 @@
+.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 span {
+    font-size: 16px;
+}
+.header .right img {
+    width: 35px;
+    height: 35px;
+    border-radius: 100%;
+    margin-left: 10px;
+}
+
+.content {
+    height: calc(100vh - 55px - 100px);
+    display: flex;
+    width: 100%;
+}
+
+.content_left {
+    width: 80%;
+    height: 100%;
+    padding: 10px 15px 0 10px;
+    overflow-y: scroll;
+    box-sizing: border-box;
+}
+.system {
+    padding: 8px 17px;
+    background: #dedede;
+    border-radius: 23px;
+    font-size: 12px;
+    color: #949090;
+    margin: 0 auto;
+    max-width: calc(100% - 123px);
+}
+.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: 20px;
+
+}
+.chat_record li .user_img {
+    width: 40px;
+    height: 40px;
+    border-radius: 100%;
+    margin-right: 10px;
+}
+.chat_record li .right_mes {
+    width: calc(100% - 93px);
+}
+.right_mes .name {
+    color: #908b8b;
+    font-size: 14px;
+}
+.me {
+    justify-content: flex-end;
+}
+.me .right_mes {
+    order: -1;
+
+}
+.me .name {
+    text-align: right;
+}
+.me img {
+    margin-right: 0px !important;
+    margin-left: 10px;
+}
+.me .message {
+    float: right !important;
+}
+.right_mes .iiiiii {
+    padding: 10px;
+    background: #1e6eff;
+    color: #fff;
+    border-radius: 10px;
+    margin-top: 9px;
+    float: left;
+    word-break: break-word;
+    word-wrap: break-word;
+}
+.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%;
+}
+
+.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;
+}
+.record_text {
+    width: 100%;
+    height: calc(100px - 35px);
+    outline: none;
+    overflow-y: scroll;
+    padding: 2px 10px;
+    box-sizing: border-box;
+    font-size: 16px;
+}
+
+.footer_action i {
+    display: inline-block;
+    margin-right: 10px;
+}
+.footer_action .menu {
+    position: absolute;
+    width: 460px;
+    height: 300px;
+    border: 1px solid #c0c0c0;
+    bottom: 36px;
+    left: 0;
+    background: #fff;
+}
+.menu_title {
+    height: 36px;
+    padding: 0 10px;
+    line-height: 36px;
+    box-sizing: border-box;
+    font-size: 16px;
+    font-weight: bold;
+    border-bottom: 1px solid #efefef;
+}
+.menu_content .menu_item {
+    display: none;
+}
+.menu_content .active {
+    display: inline-block !important;
+}
+.menu_content {
+    height: calc(302px - 36px - 41px);
+    overflow-y: scroll;
+    padding: 10px;
+    box-sizing: border-box;
+}
+.menu_footer {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: 40px;
+    border-top: 1px solid #efefef;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    background: #fff;
+}
+.menu_footer .active {
+    color: red;
+}
+.expr img {
+    width: 30px;
+    height: 30px;
+}
+.gif img {
+    width: 80px;
+    height: 80px;
+}
+.message .gif_img {
+    width: 200px !important;
+    height: auto !important;
+}
+.message .emio {
+    width: 30px !important;
+    height: 30px !important;
+}

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

@@ -0,0 +1,52 @@
+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 {
+    border: none;
+    border-bottom: 1px solid #f1f1f1;
+    padding-bottom: 8px;
+    font-size: 12px;
+    color: #929090;
+    margin-bottom: 10px;
+    width: 85%;
+}
+.enter {
+    width: 50%;
+    height: 40px;
+    text-align: center;
+    line-height: 40px;
+    background: #bebcbc;
+    color: #fff;
+    font-size: 16px;
+    border-radius: 6px;
+    margin: 0 auto;
+}
+.modal-body img {
+    width: 110px;
+    height: 110px;
+    box-sizing: border-box;
+}
+
+.modal-body .active {
+    border: 5px solid red;
+}

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

@@ -0,0 +1,19 @@
+::-webkit-scrollbar {
+    width: 0 !important;
+    height: 0 !important;
+}
+.ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.padding_lr {
+    padding: 0 0.3rem;
+    box-sizing: border-box;
+}
+
+.center {
+    width: 1126px;
+    margin: 0 auto;
+}