267 lines
8.8 KiB
JavaScript
267 lines
8.8 KiB
JavaScript
class Index {
|
|
constructor() {
|
|
this.UserInfo = JSON.parse(localStorage.getItem("UserInfo"))
|
|
this.onSocket()
|
|
this.bindIconClick()
|
|
this.RenderEmoji()
|
|
}
|
|
|
|
onSocket() {
|
|
|
|
// 设置用户的头像和名字
|
|
$(".main_header span").text(this.UserInfo.name)
|
|
$(".main_header img").attr("src", `../img/${this.UserInfo.url}`)
|
|
|
|
// 显示欢迎信息
|
|
ws.socket.on("WelcomeUser", (res) => {
|
|
$(".height").append(`
|
|
<li class="system">
|
|
<p>${res}</p>
|
|
</li>
|
|
`);
|
|
|
|
$(".left_chat").animate({ scrollTop: $(".height").outerHeight() }, 1);
|
|
})
|
|
|
|
// 获取在线用户数量
|
|
ws.socket.on("RoomOnline", (res) => {
|
|
$(".right_list").empty()
|
|
res.forEach(v => {
|
|
$(".right_list").append(`
|
|
<li>
|
|
<img alt="" src="../img/${v.url}">
|
|
<span>${v.name}</span>
|
|
</li>
|
|
`)
|
|
})
|
|
|
|
})
|
|
|
|
// 获取后端给的聊天内容，设置到页面上
|
|
ws.socket.on("SetMessage", (res) => {
|
|
$(".height").append(`
|
|
<li>
|
|
<img class="tx" alt="" src="../img/${res.url}">
|
|
<div class="r_text">
|
|
<p>${res.name}</p>
|
|
<div class="c_text" style="background:${res.back}">
|
|
${res.message}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
`);
|
|
$(".left_chat").animate({ scrollTop: $(".height").outerHeight() }, 1);
|
|
})
|
|
|
|
// 从后端拿到历史记录，然后渲染页面
|
|
ws.socket.on("SetHistory", (res) => {
|
|
res.forEach(v => {
|
|
$(".height").append(`
|
|
<li class="${v.name == this.UserInfo.name ? 'me_message' : ''}">
|
|
<img class="tx" alt="" src="../img/${v.url}">
|
|
<div class="r_text">
|
|
<p>${v.name}</p>
|
|
<div class="${v.message.indexOf("<img src=") != -1 ? 'clearQiPao' : ''} c_text" style="background:${v.back}">
|
|
${v.message}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
`);
|
|
|
|
$(".left_chat").animate({ scrollTop: $(".height").outerHeight() }, 1);
|
|
})
|
|
})
|
|
|
|
// 开始抖动
|
|
ws.socket.on("StartShake", (res) => {
|
|
$(".main").addClass("startAn")
|
|
setTimeout(function () {
|
|
$(".main").removeClass("startAn")
|
|
}, 3000)
|
|
})
|
|
|
|
// 加入房间
|
|
ws.socket.emit("JoinRoom", this.UserInfo)
|
|
// 获取历史聊天记录
|
|
ws.socket.emit("GetHistoryList", this.UserInfo)
|
|
|
|
$(document).keydown((event) => {
|
|
if (event.keyCode == 13) {
|
|
event.preventDefault();
|
|
var UserInput = $(".main_input textarea").val();
|
|
// 获取设置的颜色
|
|
var color = $(".main_input textarea").css("color"),
|
|
size = $(".main_input textarea").css("font-size");
|
|
var styleText = `<span style="color: ${color}; font-size: ${size}">${UserInput}</span>`;
|
|
this.UserInfo.message = styleText;
|
|
this.UserInfo.back = document.querySelector(".qipao_select").style.color
|
|
|
|
|
|
|
|
ws.socket.emit("SendMessage", this.UserInfo)
|
|
$(".height").append(`
|
|
<li class="me_message">
|
|
<img class="tx" alt="" src="../img/${this.UserInfo.url}">
|
|
<div class="r_text">
|
|
<p>${this.UserInfo.name}</p>
|
|
<div class="c_text" style="background:${this.UserInfo.back}">
|
|
${this.UserInfo.message}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
`);
|
|
|
|
$(".left_chat").animate({ scrollTop: $(".height").outerHeight() }, 1);
|
|
|
|
$(".main_input textarea").val("")
|
|
}
|
|
});
|
|
}
|
|
|
|
// 遍历表情 绑定事件
|
|
RenderEmoji() {
|
|
// 遍历表情
|
|
config.emoji.forEach(v => {
|
|
v.forEach(s => {
|
|
$(".emoji").append(`<span>${s}</span>`)
|
|
})
|
|
})
|
|
var slec = this;
|
|
$(".emoji span").on("click", function () {
|
|
slec.innerEmoji($(this).text())
|
|
})
|
|
|
|
// 遍历动图
|
|
for (var i = 0; i < config.GifLength; i++) {
|
|
$(".gif").append(`
|
|
<img src="../img/gif/${i}.gif" alt="${i}"/>
|
|
`)
|
|
}
|
|
// 为动图绑定事件
|
|
$(".gif img").on("click", function () {
|
|
slec.UserInfo.message = $(this)[0].outerHTML;
|
|
ws.socket.emit("SendMessage", slec.UserInfo)
|
|
$(".height").append(`
|
|
<li class="me_message">
|
|
<img class="tx" alt="" src="../img/${slec.UserInfo.url}">
|
|
<div class="r_text">
|
|
<p>${slec.UserInfo.name}</p>
|
|
<div class="clearQiPao c_text">
|
|
${slec.UserInfo.message}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
`);
|
|
|
|
$(".left_chat").animate({ scrollTop: $(".height").outerHeight() }, 1);
|
|
|
|
$(".main_input textarea").val("")
|
|
})
|
|
|
|
|
|
$('.font').click(function(e){
|
|
e.stopPropagation()
|
|
})
|
|
// 选择字体大小
|
|
$('.font select').change(function (e) {
|
|
var data = $(this).val();
|
|
$(".main_input textarea").css("font-size", data)
|
|
});
|
|
|
|
// 设置颜色
|
|
$('.font input').bind("input propertychange", function (e) {
|
|
$(".main_input textarea").css("color", $(this).val())
|
|
})
|
|
|
|
// 设置颜色
|
|
$('.qipao input').bind("input propertychange", function (e) {
|
|
console.log("11111");
|
|
$(".qipao_select").css("color", $(this).val())
|
|
})
|
|
|
|
|
|
}
|
|
|
|
/**
|
|
* 在光标的指定位置插入字符
|
|
* @param {*} myValue
|
|
*/
|
|
innerEmoji(myValue) {
|
|
var $t = $(".main_input textarea")[0];
|
|
if ($t.selectionStart || $t.selectionStart == "0") {
|
|
var startPos = $t.selectionStart;
|
|
var endPos = $t.selectionEnd;
|
|
var scrollTop = $t.scrollTop;
|
|
$t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
|
|
$t.focus();
|
|
$t.selectionStart = startPos + myValue.length;
|
|
$t.selectionEnd = startPos + myValue.length;
|
|
$t.scrollTop = scrollTop;
|
|
} else {
|
|
this.value += myValue;
|
|
$t.focus();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 为底部工具栏图标绑定点击事件
|
|
*/
|
|
bindIconClick() {
|
|
var self = this;
|
|
var isShowEmoji = false;
|
|
var isShowGif = false;
|
|
$(".tools i").on("click", function () {
|
|
switch ($(this).index()) {
|
|
// 表情 被点击
|
|
case 0:
|
|
console.log("表情");
|
|
if (isShowEmoji) {
|
|
$(".emoji").css({
|
|
width: 0,
|
|
height: 0
|
|
});
|
|
isShowEmoji = false
|
|
} else {
|
|
$(".emoji").css({
|
|
width: "402px",
|
|
height: "200px"
|
|
});
|
|
isShowEmoji = true
|
|
}
|
|
break;
|
|
case 1:
|
|
console.log("动图");
|
|
if (isShowGif) {
|
|
$(".gif").css({
|
|
width: 0,
|
|
height: 0
|
|
});
|
|
isShowGif = false
|
|
} else {
|
|
$(".gif").css({
|
|
width: "415px",
|
|
height: "200px"
|
|
});
|
|
isShowGif = true
|
|
}
|
|
break;
|
|
case 2:
|
|
console.log("字体");
|
|
$('.font').toggle()
|
|
break;
|
|
// 抖动 被点击
|
|
case 3:
|
|
console.log("抖动");
|
|
ws.socket.emit("Shake", self.UserInfo)
|
|
break;
|
|
case 4:
|
|
console.log("气泡");
|
|
$('.qipao').toggle()
|
|
break;
|
|
}
|
|
|
|
})
|
|
}
|
|
}
|
|
|
|
new Index() |