178 lines
6.5 KiB
JavaScript
178 lines
6.5 KiB
JavaScript
const { ipcRenderer } = require("electron");
|
|
class Index {
|
|
constructor() {
|
|
this.color = "";
|
|
this.size = "13px";
|
|
this.background = "";
|
|
// 获取本地存储的数据
|
|
this.UserInfo = JSON.parse(localStorage.getItem("userInfo"));
|
|
this.socket = io("ws://127.0.0.1:3000");
|
|
this.socketEmit();
|
|
this.bindEvent()
|
|
|
|
}
|
|
|
|
socketEmit() {
|
|
// 将本地存储的数据传给后端
|
|
this.socket.emit("UserLogin", this.UserInfo)
|
|
|
|
//将用户在线数发给后端
|
|
this.socket.emit("getOnlineUser", this.UserInfo)
|
|
|
|
//监听后端传来的PushMessage
|
|
this.socket.on("PushMessage", (arg) => {
|
|
this.sendMessage(arg, "") //再次调用sendMessage 把arg 和一个空数组传过去 当那边type为空时就是消息显示在左边
|
|
})
|
|
// 监听抖动
|
|
this.socket.on("PushShake", (arg) => {
|
|
ipcRenderer.send("startShake")
|
|
})
|
|
//监听后端传来的PushOnlineUser
|
|
this.socket.on("PushOnlineUser", (arg) => {
|
|
$(".content_right .title").text(`群成员 ${arg.length}`)
|
|
$(".content_right ul").empty() //先将父容器的容易清空再添加
|
|
arg.forEach(v => {
|
|
$(".content_right ul").append(`
|
|
<li>
|
|
<div class="user">
|
|
<img src="${v.img}" alt="">
|
|
<span>${v.name}</span>
|
|
</div>
|
|
${
|
|
v.type == 1
|
|
? `<i class="iconfont icon-eye"></i>`
|
|
: v.type == 2
|
|
? `<i class="iconfont icon-gif"></i>`
|
|
: ''
|
|
}
|
|
</li>
|
|
`)
|
|
});
|
|
})
|
|
|
|
|
|
|
|
|
|
//监听SystemMessage 向群里面添加arg
|
|
this.socket.on("SystemMessage", (arg) => {
|
|
$(".content_left").append(`
|
|
<li class="system">
|
|
<span>${arg}</span>
|
|
</li>
|
|
`)
|
|
})
|
|
}
|
|
|
|
|
|
|
|
|
|
bindEvent() {
|
|
var self = this;
|
|
//将头部的头像 名字 房间号更改
|
|
$(".header_left img").attr("src", this.UserInfo.img)
|
|
$(".header_left span").text(this.UserInfo.name)
|
|
$(".header_text").text(this.UserInfo.room)
|
|
|
|
|
|
//获取输入框的点击事件
|
|
$(".footer_input").keydown((e) => {
|
|
if (e.keyCode == 13 || e.keyCode == 108) {
|
|
e.preventDefault();//清空浏览器的属性
|
|
this.UserInfo.content = `<div style="border-radius: 4px;padding: 5px 10px;background:${this.background}; color: ${this.color}; font-size: ${this.size};">${$(".footer_input").html()}</div>` //为UserInfo添加个字段 里面存放在输入框输入的值
|
|
$(".footer_input").html("") //之后将输入框给清空
|
|
this.socket.emit("sendMessage", this.UserInfo) //将sendMessage传给后端 需要它把消息推送给其他人
|
|
this.sendMessage(this.UserInfo); //调用sendMessage方法将this.UserInfo传过去
|
|
}
|
|
})
|
|
|
|
//获取弹窗li的点击事件并且给添加active属性用.siblings()将除自己外所有父容器的删除
|
|
$(".menu_footer li").click(function() {
|
|
$(this).addClass("active").siblings().removeClass("active")
|
|
// 用对象加eq取到每一项的下标对其添加和删除active
|
|
$(".menu_content div").eq($(this).index()).addClass("active").siblings().removeClass("active")
|
|
//并将标题栏的文本给替换
|
|
$(".menu_title").text($(this).text())
|
|
})
|
|
|
|
// 用循环向表情栏添加表情
|
|
for (var i = 0; i <= 274; i++ ) {
|
|
$(".smiling").append(`
|
|
<img class="smiling_img" src="./img/icon/${i}fix@2x.png" alt="">
|
|
`)
|
|
}
|
|
// 用循环向动图栏添加动图
|
|
for (var i = 0; i <= 12; i++ ) {
|
|
$(".gif").append(`
|
|
<img class="gif_img" src="./img/gif/${i}.gif" alt="">
|
|
`)
|
|
}
|
|
// 添加到输入框的时候用.clone()创建个副本添加
|
|
$(".gif img").click(function() {
|
|
$(".footer_input").append($(this).clone())
|
|
})
|
|
// 鼠标对表情悬浮变成动图移除变成原来的图片
|
|
$(".smiling img").hover(
|
|
function() {
|
|
$(this).attr({
|
|
src: `./img/icon/${$(this).index()}@2x.gif`
|
|
})
|
|
},
|
|
function() {
|
|
$(this).attr({
|
|
src: `./img/icon/${$(this).index()}fix@2x.png`
|
|
})
|
|
}
|
|
);
|
|
// 添加到输入框的时候用.clone()创建个副本添加
|
|
$(".smiling img").click(function() {
|
|
$(".footer_input").append($(this).clone())
|
|
});
|
|
// 对输入框上面的图片添加点击事件
|
|
// 如果li标签包含active 也就是已经激活的状态那么就是使弹窗隐藏并且移除所有的active
|
|
$(".footer_menu .aaa").click(function() {
|
|
if ($(".menu_footer li").eq($(this).index()).hasClass("active")) {
|
|
$(".footer_topmenu").hide()
|
|
$(".menu_footer li").eq($(this).index()).removeClass("active")
|
|
// 否则就是显示弹窗并且继续点击事件
|
|
} else {
|
|
$(".footer_topmenu").show()
|
|
$(".menu_footer li").eq($(this).index()).click()
|
|
}
|
|
})
|
|
|
|
//监听input方法
|
|
$(".font input").on("input", function () {
|
|
self.color = $(this).val()
|
|
})
|
|
//监听select方法
|
|
$(".font select").on("change", function () {
|
|
self.size = $(this).val()
|
|
})
|
|
//监听qipao input方法
|
|
$(".qipao input").on("input", function () {
|
|
self.background = $(this).val()
|
|
})
|
|
|
|
$(".icon-zhendong").click(function () {
|
|
self.socket.emit("SetShake", self.UserInfo)
|
|
})
|
|
|
|
|
|
}
|
|
//创建sendMessage接收this.UserInfo为data
|
|
sendMessage(data,type = "right") {
|
|
$(".content_left").append(`
|
|
<li class="${type}">
|
|
<img class="avth" src="${data.img}" alt="">
|
|
<div class="message">
|
|
<div class="name">${data.name}</div>
|
|
<div class="message_text">${data.content}</div>
|
|
</div>
|
|
</li>
|
|
`)
|
|
}
|
|
|
|
|
|
}
|
|
|
|
new Index(); |