ClassContent/历届学生/逯帅帅/项目开发/学生项目/应越波/聊天室/fontend/js/index.js

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();
    this.duelPicture();
    this.windowJitter();
  }
  // ---------------------------------------------------------------------------
  golableOn() {
    io.socket.emit("getUserOnline", this.userinfo.roomid);



    

    //窗口抖动
    io.socket.on('chuangkou', () => {
      $(".icon-doudong-shake").click(function () {
        //添加激活样式
        $('body').addClass('active');
        //设置定时器，1s后删除激活样式
        setTimeout(() => {
          $('body').removeClass('active')
        }, 1000);
      })
    })







    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来说，参数不可省略
    }
  }

  //斗图功能
  duelPicture() {
    //遍历，渲染
    for (var j = 0; j < 12; j++) {
      $('.dt').append(`
          <li>
            <img src="./img/gif/${j}.gif" alt="">
          </li>
        `)
    }
    //jq里面的切换
    $(".icon-GIF").click(function () {
      $(".dt").toggle();
    })

    var b = this;
    $(".dt li img").click(function () {
      b.innerEmoji($(this).attr("src"))
    });

  }


  // 抖动功能
  // windowJitter(){
  //   //获取元素，注册点击事件
  //   $(".icon-doudong-shake").click(function () {
  //     //添加激活样式
  //     $('body').addClass('active');
  //     //设置定时器，1s后删除激活样式
  //     setTimeout(()=>{
  //       $('body').removeClass('active')
  //     },1000);
  //   })
  // }

  //点击抖动向服务器发送通知
  windowJitter() {
    document.querySelector('.icon-doudong-shake').onclick = () => {
      io.socket.emit("doudong", this.userinfo.roomid);
    }

  }



  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();