154 lines
3.8 KiB
JavaScript
154 lines
3.8 KiB
JavaScript
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(); |