first commit

历届学生/front-end-team-11/项目开发/上课项目/聊天室/fontend/js/config/index.js

@@ -0,0 +1,3 @@
+var config = {
+    socketBaseUrl: 'ws://127.0.0.1:3000',
+}

历届学生/front-end-team-11/项目开发/上课项目/聊天室/fontend/js/lib/rem.js

@@ -0,0 +1,10 @@
+((w, d) => {
+    function setSize() {
+        var screenWidth = d.documentElement.clientWidth;
+        var currentFontSize = screenWidth * 100 / 750;
+        d.documentElement.style.fontSize = currentFontSize + 'px';
+    }
+    w.addEventListener('resize', setSize);
+    w.addEventListener('pageShow', setSize)
+    w.addEventListener('DOMContentLoaded', setSize)
+})(window, document)

历届学生/front-end-team-11/项目开发/上课项目/聊天室/fontend/js/page/index.js

@@ -0,0 +1,266 @@
+const { ipcRenderer } = require('electron')
+
+class Index {
+    constructor() {
+        this.user = getItem("UserInfo")
+        this.setting()
+        this.sendMessage()
+        this.emitEvent()
+        this.onEvent()
+    }
+
+    emitEvent() {
+        sc.emit('JoinRoom', this.user);
+    }
+
+    onEvent() {
+
+        sc.on('ShakeMessage', data => {
+            if (data.user_name == this.user.user_name) {
+                this.renderSystemMessage(`你发送了一个窗口抖动`)
+            } else {
+                this.renderSystemMessage(`${data.user_name}给你发送了窗口抖动`)
+            }
+        })
+
+        sc.on('WelcomeUser', data => {
+            this.renderSystemMessage(data)
+        })
+
+        sc.on('ServerMessage', data => {
+            this.renderMessage(data, "other")
+        })
+
+        sc.on('onLineUserList', data => {
+            $(".c_right .title").text(`群成员 ${data.length}`)
+            $(".c_right ul").empty()
+
+            
+            
+            data.forEach(v => {
+
+                if (v.user_name ==  this.user.user_name) {
+                    this.user.level = v.level
+                }
+
+                $(".c_right ul").append(`
+                    <li>
+                        <div class="use">
+                            <img src="${v.user_img}" alt="">
+                            <span>${v.user_name}</span>
+                        </div>
+                        ${v.level == 3
+                        ? ''
+                        : `<i class="iconfont icon-yonghu ${v.level == 1 ? 'qz' : 'gly'}"></i>`
+                    }
+                        
+                    </li>
+                `)
+            });
+
+            console.log("得到在线用户数后的user:",this.user);
+        })
+
+        sc.on('uploadImgName', data => {
+            data.message = `
+                <img class="gif_img" src="http://127.0.0.1:3000/upload/${data.message}" alt="">
+            `
+            this.renderMessage(data, "other")
+        })
+
+        sc.on('openShake', () => {
+            ipcRenderer.send('windowsShake')
+        })
+
+    }
+
+    sendMessage() {
+        var self = this;
+        $(".input").keydown(function (event) {
+            let { keyCode, ctrlKey } = event;
+            if (keyCode == 13 && ctrlKey) {
+                $(".input").append("<div><br></div>")
+                self.moveEnd($(".input")[0],'end')
+
+            } else if (keyCode == 13) {
+                if ($(".input").html().length != 0) {
+                    self.user.message = $(".input").html()
+                    self.user.timestamp = timestamp()
+
+                    sc.emit('sendMessage', self.user);
+                    self.renderMessage(self.user, 'me')
+                    $(".input").html("")
+                }
+                return false;
+            }
+        });
+    }
+
+    renderMessage(v, type, isImg) {
+        var self = this;
+        $(".c_left").append(`
+            <li class="${type == "me" ? 'm_r' : '' } ">
+                <div class="time">${format('hh:mm:ss',v.timestamp)}</div>
+                <div class="item">
+                    <img class="avatar" src="${v.user_img}" alt="">
+                    <div class="text">
+                        <div class="name">
+                          ${
+                            v.level == 3 
+                            ? ''
+                            : `<span class="${v.level == 1 ? 'tips_qz' : 'tips_gly'}">${v.level == 1 ? '群主' : '管理员'}</span>`
+                          }
+                          
+                          <lb class="u_n">${v.user_name}</lb>
+                        </div>
+                        <div class="message ${isImg == "gif" ? 'noback' : ''}">${v.message}</div>
+                    </div>
+                </div>
+            </li>
+        `);
+
+       
+        $(".c_left .avatar").last().click(function() {
+            self.user.clickUserName = $(this).parent().find(".u_n").text()
+            sc.emit('socketShake', self.user)
+        })
+    }
+
+    renderSystemMessage(text) {
+        $(".c_left").append(`
+            <li class="system_message">
+                <span>${text}</span>
+            </li>
+        `)
+    }
+
+    moveEnd(el) {
+        el.focus();
+        var range = window.getSelection();
+        range.selectAllChildren(el);
+        range.collapseToEnd();
+    }
+
+    setting() {
+        var self = this;
+
+
+        $(".f_action i").click(function() {
+            if ($(this).index() <= 3) {
+                console.log(this);
+                if ($(".menu").css("display") == "none") {
+                    self.changeActive(
+                        $(".menu_footer li").eq($(this).index())
+                    )
+                    $(".menu").show()
+                } else {
+                    if (
+                        $(".menu_footer li").eq($(this).index())
+                        .hasClass("active")
+                    ) {
+                        $(".menu").hide()
+                    } else {
+                        self.changeActive(
+                            $(".menu_footer li").eq($(this).index())
+                        )
+                    }
+                }
+            }
+        })
+
+        $(".menu_footer li").click(function() {
+            self.changeActive($(this))
+        })
+
+        for(let i = 0; i <= 274; i++) {
+            $(".emote").append(`
+                <img src="../img/icon/${i}fix@2x.png" alt="">
+            `)
+        }
+
+        $(".emote img").hover(
+            function () {
+              $(this).attr({
+                src: `../img/icon/${$(this).index()}@2x.gif`
+              })
+            },
+            function () {
+                $(this).attr({
+                    src: `../img/icon/${$(this).index()}fix@2x.png`
+                })
+            }
+        );
+
+        $(".emote img").click(function() {
+            $(".input").append(`
+              <img class="emote_img" src="../img/icon/${$(this).index()}@2x.gif" alt="">
+            `)
+        })
+
+        for(let i = 0; i <= 12; i++) {
+            $(".gif").append(`
+                <img class="gif_img" src="../img/gif/${i}.gif" alt="">
+            `)
+        }
+
+        $(".gif img").click(function() {
+            self.user.message = $(this).prop("outerHTML")
+            self.user.timestamp = timestamp()
+
+            sc.emit('sendMessage', self.user);
+            self.renderMessage(self.user, 'me','gif')
+        })
+
+        $(".icon-tupian1").click(async function() {
+            let path = await ipcRenderer.invoke('openFileSelect')
+            console.log("你选择的文件路径未：", path);
+            let base64url = await imgToBase64(path)
+           
+            self.user.message = `
+                <img class="gif_img" src="${path}" alt="">
+            `
+            self.user.timestamp = timestamp()
+
+            self.renderMessage(self.user, "me")
+
+            sc.emit('uploadFile', {
+                user:  self.user,
+                base64: base64url,
+                fileType: path.match(/\.(\w+)$/)[1]
+            });
+
+        })
+
+        $(".icon-shake").click(function() {
+            delete self.user.clickUserName
+            sc.emit('socketShake', self.user)
+        })
+
+        $(".user img").attr({
+            src: getItem("UserInfo").user_img
+        })
+
+        $(".user .name").text(getItem("UserInfo").user_name)
+        $(".header .room_name").text(getItem("UserInfo").room_id)
+
+       
+    }
+
+    changeActive(el) {
+        el.addClass("active")
+        .siblings()
+        .removeClass("active")
+
+        $(".menu_title").text(
+            $(el).text()
+        );
+
+        $(".menu_list .menu_item").eq(
+            $(el).index()
+        ).addClass("active")
+        .siblings()
+        .removeClass("active")
+    }
+}
+
+new Index()

历届学生/front-end-team-11/项目开发/上课项目/聊天室/fontend/js/page/login.js

@@ -0,0 +1,62 @@
+const { ipcRenderer } = require('electron')
+
+class Login {
+    constructor() {
+        this.bindEvent()
+    }
+
+    bindEvent() {
+
+        $(".loginbut").click(() => {
+            if ($(".roomid").val().length == 0) {
+                new $.zui.Messager('房间号不为空', {
+                    type: 'danger' 
+                }).show();
+                return;
+            }
+
+            if ($(".username").val().length == 0) {
+                new $.zui.Messager('用户名不为空', {
+                    type: 'danger' 
+                }).show();
+                return;
+            }
+
+            setItem("UserInfo",{
+                user_name: $(".username").val(),
+                room_id: $(".roomid").val(),
+                user_img: $(".user_img").attr("src")
+            });
+
+            ipcRenderer.send('openIndex')
+        })
+
+        let fileType = ""
+        for (let i = 1; i <= 10; i++) {
+            if (i == 3 || i == 4 || i == 5) {
+                fileType = "gif"
+            } else {
+                fileType = "jpg"
+            }
+
+            $(".modal-body").append(`
+                <img src="../img/${i}.${fileType}" alt="">
+            `)
+        }
+
+        $(".modal-body img").click(function(){
+            $(".user_img").attr({
+                src: $(this).attr("src")
+            })
+
+            $('#myModal').modal('hide')
+        })
+
+
+        $(".user_img").click(() => {
+           
+        })
+    }
+}
+
+new Login()

历届学生/front-end-team-11/项目开发/上课项目/聊天室/fontend/js/utils/index.js

@@ -0,0 +1,110 @@
+class Utils {
+  query(name) {
+    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+    var r = window.location.search.substr(1).match(reg);
+    if (r != null)
+      return decodeURIComponent(r[2]);
+    return null;
+  }
+
+  setItem(key, value) {
+    localStorage.setItem(
+      key,
+      value.constructor == Object || value.constructor == Array
+        ? JSON.stringify(value)
+        : value
+    )
+  }
+
+  getItem(key) {
+    return localStorage.getItem(key) == null ? false : JSON.parse(localStorage.getItem(key))
+  }
+
+  initSocket() {
+    window.sc = io(config.socketBaseUrl);
+  }
+
+  timestamp() {
+    return new Date().getTime()
+  }
+
+  format(fmt, time) {
+    time = new Date(time)
+    var o = {
+      "M+": time.getMonth() + 1,                 //月份
+      "d+": time.getDate(),                    //日
+      "h+": time.getHours(),                   //小时
+      "m+": time.getMinutes(),                 //分
+      "s+": time.getSeconds(),                 //秒
+      "q+": Math.floor((time.getMonth() + 3) / 3), //季度
+      "S": time.getMilliseconds()             //毫秒
+    };
+
+    if (/(y+)/.test(fmt)) {
+      fmt = fmt.replace(RegExp.$1, (time.getFullYear() + "").substr(4 - RegExp.$1.length));
+    }
+
+    for (var k in o) {
+      if (new RegExp("(" + k + ")").test(fmt)) {
+        fmt = fmt.replace(
+          RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+      }
+    }
+
+    return fmt;
+  }
+
+  async imgToBase64(url) {
+    var file = await getFileFromUrl(url);
+    var reader  = new FileReader();
+    return new Promise((resolve, reject) => {
+      reader.addEventListener("load", function () {
+        var base64gif = reader.result; 
+        resolve(base64gif)
+      }, false);
+
+      if (file) {
+        reader.readAsDataURL(file);
+      }
+    })
+
+    
+
+    
+  }
+
+  getFileFromUrl(url) {
+    let fileName = url.substr(url.lastIndexOf(".") -1 )
+    let type = url.match(/\.(\w+)$/)[1]
+    console.log(type);
+
+    return new Promise((resolve, reject) => {
+      var blob = null;
+      var xhr = new XMLHttpRequest();
+      xhr.open("GET", url);
+      xhr.setRequestHeader('Accept', `image/${type}`);
+      xhr.responseType = "blob";
+      // 加载时处理
+      xhr.onload = () => {
+        // 获取返回结果
+        blob = xhr.response;
+        let file = new File([blob], fileName, { type: `image/${type}` });
+        // 返回结果
+        resolve(file);
+      };
+      xhr.onerror = (e) => {
+        reject(e)
+      };
+      // 发送
+      xhr.send();
+    });
+  }
+}
+
+let {
+  query, setItem, getItem, initSocket, timestamp, format,
+  imgToBase64, getFileFromUrl
+} = new Utils()
+
+initSocket()
+