first commit

历届学生/逯帅帅/项目开发/上课项目/聊天室/fontend/js/config/index.js

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

历届学生/逯帅帅/项目开发/上课项目/聊天室/fontend/js/index.js

@@ -0,0 +1,154 @@
+class Index {
+  constructor() {
+    this.userinfo = JSON.parse(localStorage.getItem("userinfo"));
+    this.fontSetConfig = {
+      fontSize: '22px',
+      color: '',
+      bgColor: ''
+    }
+    this.setUserInfo();
+    this.golableOn();
+    this.sendMessage();
+    this.renderBiaoQing();
+    this.fontSet()
+  }
+
+  golableOn() {
+    io.socket.emit("getUserOnline",this.userinfo.roomid);
+
+    io.socket.on('UserOnline', (list) => {
+      $(".right_header p").text(list.length)
+      $(".right_content").empty();
+      list.forEach((v,i) => {
+        $(".right_content").append(`
+          <div>
+              <img src="${v.img}" alt="">
+              <p>${v.username}</p>
+          </div>
+        `)
+      })
+    });
+
+    io.socket.on('sedMessage', (list) => {
+      console.log("其他人收到的消息为: ",list)
+      this.renderMessage(list,'left')
+    })
+  }
+
+  setUserInfo() {
+    $(".user img").attr("src", this.userinfo.img);
+    $(".user p").text(this.userinfo.username);
+    $(".rightlog").text(this.userinfo.roomid);
+  }
+
+  sendMessage() {
+    $('.shuru').on('keydown', (event) => {
+      if(event.keyCode == 13){
+        event.preventDefault();
+        if ($(".shuru").text().length > 0) {
+          var data = Object.assign(this.userinfo, {
+            message: `<div style="font-size: 
+${this.fontSetConfig.fontSize}; color: ${this.fontSetConfig.color};
+background: ${this.fontSetConfig.bgColor};
+">
+${$(".shuru").html()}
+</div>`
+          });
+          this.renderMessage(data);
+          io.socket.emit("getMessage",data);
+          $(".shuru").html("")
+        }
+      }
+    });
+  }
+
+  renderMessage(data, position = "right") {
+    if (position == "right") {
+      $(".left_content .chat_message").append(`
+        <div class="liaotianmast">
+            <div>
+                <p>${data.username}</p>
+                <span>${data.message}</span>
+            </div>
+            <img src="${data.img}" width="40" height="40" style="border-radius: 100%;" alt="">
+        </div>
+      `);
+    } else {
+      $(".left_content .chat_message").append(`
+        <div class="leftlog liaotian">
+            <img src="${data.img}" width="40" height="40" style="border-radius: 100%;" alt="">
+            <div>
+               <p>${data.username}</p>
+                <span>${data.message}</span>
+            </div>
+        </div>
+      `)
+    };
+
+    $(".left_content").animate({
+      scrollTop: $(".chat_message").outerHeight()
+    }, 1);
+  }
+
+
+  renderBiaoQing() {
+    for (var i = 2;i<=209;i++) {
+      $(".bq").append(`
+      <li>
+          <img src="./img/icon/${i}x.png" alt="">
+      </li>
+      `)
+    };
+
+    $(".bq li img").mouseover(function (){
+      var oldImg = $(this).attr("src");
+
+      $(this).attr("src", oldImg.replace("png","gif"))
+    });
+
+    $(".bq li img").mouseout(function (){
+      var oldImg = $(this).attr("src");
+      $(this).attr("src", oldImg.replace("gif","png"))
+    });
+
+    var a = this;
+    $(".bq li img").click(function () {
+      a.innerEmoji($(this).attr("src"))
+    });
+
+    $(".icon-xiaolian1").click(function (){
+      $(".bq").toggle();
+    })
+  }
+
+  innerEmoji(src) {
+    if (window.getSelection) {
+      var sel = window.getSelection();
+      var range = sel.getRangeAt(0);
+      var img = new Image();
+      range.deleteContents()
+      img.src = src;
+      console.log(range);
+      range.insertNode(img);
+      range.collapse(false);//对于IE来说，参数不可省略
+    }
+  }
+
+  fontSet() {
+    var self = this;
+    $(".fontSize").change(function(){
+      self.fontSetConfig.fontSize = $(this).val();
+      console.log("self.fontSetConfig: ", self.fontSetConfig)
+    });
+
+    $(".fontColor").change(function(){
+      self.fontSetConfig.color = $(this).val();
+    });
+
+    $(".bgColor").change(function(){
+      self.fontSetConfig.bgColor = $(this).val();
+    });
+  }
+}
+
+new Index();

历届学生/逯帅帅/项目开发/上课项目/聊天室/fontend/js/log.js

@@ -0,0 +1,72 @@
+class Log {
+  constructor() {
+    this.userinfo = {}
+    this.renderImg();
+    this.submitLogin();
+    this.golableOn();
+  }
+
+  renderImg() {
+    var userchioose = "./img/1.jpg"
+    for (var i = 1;i<11;i++) {
+      if (i == 3 || i == 4 || i == 5) {
+        $(".modal-body").append(`<img src="./img/${i}.gif" alt="">`)
+      } else {
+        $(".modal-body").append(`<img class="${i==1?'active': ''}" src="./img/${i}.jpg" alt="">`)
+      }
+    }
+
+    $(".modal-body img").click(function (){
+      $(this).addClass('active').siblings().removeClass("active");
+      console.log($(this).attr("src"))
+      userchioose = $(this).attr("src");
+    });
+
+    $(".submit").click(function () {
+      $(".header img").attr("src", userchioose)
+      $('#myModal').modal('hide', 'fit')
+    })
+  }
+
+  golableOn() {
+    io.socket.on('UserNameExist', () => {
+      new $.zui.Messager('用户名已存在，请重新输入', {
+        icon: 'heart',
+        placement: 'top-right', // 定义显示位置
+        type: 'danger'
+      }).show();
+    });
+
+    io.socket.on('LoginSuccess', () => {
+      console.log(this.userinfo);
+      localStorage.setItem("userinfo", JSON.stringify(this.userinfo))
+      location.href = "index.html";
+    })
+  }
+
+  submitLogin() {
+    $(".login").click(() => {
+      var room = $(".header input[type=number]")
+      var username = $(".header input[type=text]");
+      if (room.val().length == 0 || username.val().length ==0) {
+        new $.zui.Messager('房间号和用户名不能为空', {
+          icon: 'heart',
+          placement: 'top-right', // 定义显示位置
+          type: 'danger'
+        }).show();
+      } else {
+        this.userinfo = {
+          roomid: room.val(),
+          username: username.val(),
+          img: $(".header img").attr("src")
+        };
+        io.socket.emit('login', this.userinfo);
+
+
+      }
+    });
+  }
+
+}
+
+new Log();

历届学生/逯帅帅/项目开发/上课项目/聊天室/fontend/js/utils/socket.js

@@ -0,0 +1,7 @@
+class Socket {
+  constructor() {
+    this.socket = io(config.socketUrl);
+  }
+}
+
+var io = new Socket()