154 lines
4.7 KiB
JavaScript
154 lines
4.7 KiB
JavaScript
const { ipcRenderer } = require("electron");
|
|
|
|
class Index {
|
|
constructor() {
|
|
this.color = "";
|
|
this.size = "13px";
|
|
this.UserInfo = JSON.parse(localStorage.getItem("userInfo"));
|
|
this.socket = io("ws://127.0.0.1:3000");
|
|
// console.log(this.socket);
|
|
this.socketEmit()
|
|
this.bindEvent()
|
|
}
|
|
|
|
socketEmit() {
|
|
this.socket.emit("UserLogin", this.UserInfo)
|
|
|
|
this.socket.emit("getOnlineUser", this.UserInfo)
|
|
this.socket.on("PushMessage", (arg) => {
|
|
this.sendMessage(arg, "")
|
|
})
|
|
|
|
this.socket.on("PushShake", (arg) => {
|
|
ipcRenderer.send("startShake")
|
|
})
|
|
|
|
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>
|
|
`)
|
|
});
|
|
})
|
|
|
|
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="color: ${this.color}; font-size: ${this.size};">${$(".footer_input").html()}</div>`
|
|
$(".footer_input").html("")
|
|
this.socket.emit("sendMessage", this.UserInfo)
|
|
this.sendMessage(this.UserInfo);
|
|
}
|
|
})
|
|
|
|
$(".menu_footer li").click(function() {
|
|
$(this).addClass("active").siblings().removeClass("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="">
|
|
`)
|
|
}
|
|
|
|
$(".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`
|
|
})
|
|
}
|
|
);
|
|
|
|
$(".smiling img").click(function() {
|
|
$(".footer_input").append($(this).clone())
|
|
});
|
|
|
|
$(".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()
|
|
}
|
|
})
|
|
|
|
$(".font input").on("input", function () {
|
|
self.color = $(this).val()
|
|
})
|
|
|
|
$(".font select").on("change", function () {
|
|
self.size = $(this).val()
|
|
})
|
|
|
|
$(".icon-shake").click(function () {
|
|
self.socket.emit("SetShake", self.UserInfo)
|
|
})
|
|
|
|
}
|
|
|
|
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(); |