first commit

历届学生/18课程/class18_2/项目/上课项目/聊天室/fontend/js/config.js

@@ -0,0 +1,3 @@
+var config = {
+    SocketUrl: 'http://192.168.1.100:1314/'
+}

历届学生/18课程/class18_2/项目/上课项目/聊天室/fontend/js/index.js

@@ -0,0 +1,184 @@
+class Index {
+    constructor() {
+        this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
+        this.BackColors = "#f3f3f3"
+        this.onSocket();
+        this.RenderTop();
+        this.sendMessage();
+        this.RenderGif();
+        this.RenderBiaoQing();
+        this.FontSetting();
+    }
+
+    RenderTop() {
+        $(".userinfo img").attr('src', this.userInfo.img)
+        $(".userinfo span").text(this.userInfo.name)
+        $(".title p").text(this.userInfo.roomid)
+    }
+
+
+    sendMessage() {
+        $(".chat_inputbox").keydown((event) => {
+            if (event.keyCode == "13") {
+                event.preventDefault();
+                if ($(".chat_inputbox").html().length != 0) {
+                    var size = $(".chat_inputbox").css('font-size');
+                    var color = $(".chat_inputbox").css('color');
+                
+                    this.userInfo.content = $(".chat_inputbox").html();
+                    this.userInfo.size = size;
+                    this.userInfo.color = color;
+                    this.userInfo.backColor = this.BackColors;
+
+                    console.log($(".chat_inputbox").html());
+                    socket.ws.emit("sendMessage", this.userInfo)
+                    this.createdMessage(this.userInfo, 'right')
+                    $(".chat_inputbox").html("")
+                }
+            }
+        });
+    }
+
+    createdMessage(data, type = "") {
+        $(".chat_message .sorc").append(`
+            <li class="message ${type}">
+                <img class="userlogo" src="${data.img}" alt="">
+                <div class="r_message">
+                    <p class="name">${data.name}</p>
+                    <div class="content" style="font-size: ${data.size};color:${data.color};background:${data.backColor};">${data.content}</div>
+                </div>
+            </li>
+        `);
+
+        $(".chat_message").animate({ scrollTop: $(".sorc").outerHeight() }, 1);
+    }
+
+    FontSetting() {
+        $(".FontSize").change(function() {
+            var size = $('.FontSize').val();
+            $(".chat_inputbox").css('font-size', size);
+        })
+        $(".Colors").on('input propertychange',function() {
+            var color = $('.Colors').val()
+            $(".chat_inputbox").css('color', color);
+        })
+        $(".BackColors").on('input propertychange',() => {
+            var backColor = $('.BackColors').val()
+            this.BackColors = backColor;
+        })
+    }
+
+
+    RenderGif() {
+        var slef = this;
+        for (var i = 0; i <= 12; i++) {
+            $(".gif").append(`
+                <li>
+                    <img src="./img/gif/${i}.gif" alt="">
+                </li>     
+            `)
+        };
+
+        $(".icon-gif").click(function () {
+            $(".gif").toggle();
+        });
+
+        $(".gif li").click(function () {
+            slef.userInfo.content = $(this).html();
+            $(".gif").toggle();
+            socket.ws.emit("sendMessage", slef.userInfo);
+            slef.createdMessage(slef.userInfo, 'right')
+        })
+    }
+
+    RenderBiaoQing() {
+        var slef = this;
+        for (var i = 1; i <= 209; i++) {
+            $(".expression").append(`
+                <li>
+                    <img src="./img/icon/${i}x.png" alt="">
+                </li>
+            `)
+        };
+
+        $(".icon-weixiao").click(function () {
+            $(".expression").toggle();
+            // $(".chat_inputbox").focus();
+        })
+
+        $(".expression li").mouseover(function () {
+            $(this).find("img").attr('src', `./img/icon/${$(this).index() + 1}x.gif`)
+        })
+
+        $(".expression li").click(function () {
+            slef.innerEmoji($(this).find("img").attr("src"))
+            $(".expression").toggle();
+        })
+
+        $(".expression li").mouseout(function () {
+            $(this).find("img").attr('src', `./img/icon/${$(this).index() + 1}x.png`)
+        })
+    }
+
+    /**
+   * 在光标的指定位置插入字符
+   * @param {*} myValue 
+   */
+    innerEmoji(src) {
+        if (window.getSelection) {
+            var sel = window.getSelection();
+            var range = sel.getRangeAt(0);
+            console.log(range);
+            var img = new Image();
+            range.deleteContents()
+            img.src = src;
+            range.insertNode(img);
+            range.collapse(false);//对于IE来说，参数不可省略
+        }
+    }
+
+    onSocket() {
+        socket.ws.emit("JoinRoom", this.userInfo);
+
+        socket.ws.on("WelcomeUser", (result) => {
+            $(".chat_message .sorc").append(`
+                <li class="system">
+                    <span>${result}</span>
+                </li>
+            `)
+        })
+        // 获取在线用户数
+        socket.ws.on("OnLineUserList", (UserList) => {
+            $(".chat_right p").text(`成员：${UserList.length}`);
+            $(".chat_right ul").empty()
+            UserList.forEach(v => {
+                $(".chat_right ul").append(`
+                    <li>
+                        <img src="${v.img}" alt="${v.name}">
+                        <span>${v.name}</span>
+                    </li>
+                `)
+            });
+        })
+        // 发送消息
+        socket.ws.on("SetMessage", (result) => {
+            this.createdMessage(result)
+        });
+
+        $(".icon-zhendong").click(() => {
+            console.log("点击");
+            socket.ws.emit("shake", this.userInfo);
+        });
+
+        socket.ws.on("addShake", (res) => {
+            console.log("addShake addShake addShake");
+            $(".chat").addClass("shake")
+            setTimeout(() => {
+                $(".chat").removeClass("shake")
+            }, 3000)
+        });
+
+    }
+}
+
+new Index()

历届学生/18课程/class18_2/项目/上课项目/聊天室/fontend/js/login.js

@@ -0,0 +1,79 @@
+
+class Login {
+    constructor() {
+        this.socket = socket.ws;
+        this.onSocket();
+        this.RenderImg();
+        this.BindEnter();
+    }
+
+    RenderImg() {
+
+        var YouSelect = "";
+        for (var i = 1; i<=10; i++) {
+            if (i == 3 || i == 4 || i == 5) {
+                $("#SelectImg .modal-body").append(`
+                  <img src="./img/${i}.gif"/>
+                `)
+               
+            } else {
+                $("#SelectImg .modal-body").append(`
+                    <img src="./img/${i}.jpg"/>
+                `)
+            }
+        }
+
+        $("#SelectImg .modal-body img").on('click',function() {
+            $(this).addClass("select_active").siblings().removeClass("select_active")
+            YouSelect = $(this).attr("src")
+        })
+
+        $(".ok").click(function() {
+            if (YouSelect.length != 0) {
+                $(".userimg").attr({
+                    src: YouSelect
+                })
+            }
+
+            $('#SelectImg').modal('hide')
+        })
+        
+    }
+
+    BindEnter() {
+
+        $(".entry").click(function() {
+            var username = $(".username").val();
+            var roomid = $(".roomid").val();
+            if (username.length != 0 && roomid.length != 0) {
+                socket.ws.emit("login", {
+                    img: $(".userimg").attr("src"),
+                    name: username,
+                    roomid: roomid
+                })
+            } else {
+                new $.zui.Messager('用户名或房间号不能为空', {
+                    icon: 'info',
+                    type: 'danger'
+                }).show();
+            }
+        });
+    }
+
+    onSocket() {
+        this.socket.on("userNameExists", function() {
+            new $.zui.Messager('用户名已经存在，请修改', {
+                icon: 'info',
+                type: 'danger'
+            }).show();  
+        });
+
+        this.socket.on("LoginSuccess", function(res) {
+            localStorage.setItem("userInfo", JSON.stringify(res));
+            location.href = "index.html";
+        })
+    }
+}
+
+
+new Login()

历届学生/18课程/class18_2/项目/上课项目/聊天室/fontend/js/socket.js

@@ -0,0 +1,12 @@
+class Socket {
+    constructor () {
+        this.ws = null;
+        this.CreatedSocket();
+    }
+
+    CreatedSocket() {
+        this.ws = io(config.SocketUrl);
+    }
+}
+
+var socket = new Socket()