個(gè)人中心
退出
關(guān)于個(gè)人全棧項(xiàng)目【臻美Chat】遇到的BUG以及解決方法
項(xiàng)目展示：
問題總結(jié)：
一、單用戶重復(fù)登錄設(shè)備
將每次輸入的用戶名與已經(jīng)記錄在后臺(tái)的數(shù)組ar比較，如果存在則表示重復(fù)。
// 生成數(shù)組
var ar="";
socket.on('array', function (val) {
ar = val;
// console.log(ar);
});
if(ar.indexOf(lo.value)==-1){
sweetAlert("恭喜您，登錄成功！");
socket.emit('setName', lo.value.trim());
names1(lo.value.trim());
login1.style.display="none";
document.querySelector(".bg").style.display = "none";
document.querySelector(".cd span").style.display = "none";
document.querySelector(".title img").style.display = "block";
document.querySelector(".fix").style.display = "block" ;
document.querySelector(".title").style.display = "block" ;
document.querySelector(".tit").innerText=lo.value.trim();
document.querySelector(".swal-button").onclick = function () {
document.getElementById("text").focus();
document.querySelector(".fix").addEventListener('click', function (e) {
if (e.target.nodeName ===
"LI"&&e.target.innerText !=
document.querySelector(".tit").innerText) {
document.querySelector(".fix").style.display="none";
document.querySelector(".chat_b").style.display="block";
document.querySelector(".box").style.display="block";
document.querySelector(".tit").innerText = e.target.innerText;
document.querySelector("#text").focus();
onOff=true;
}
else{
sweetAlert("不能跟自己聊天哦~");
}
})
}
}
else{ sweetAlert("不能重復(fù)登錄哦！"); return }
二、不能跟自己聊天
判斷點(diǎn)擊是否是同一個(gè)信息
if (e.target.nodeName === "LI"&&e.target.innerText != document.querySelector(".tit").innerText) {
document.querySelector(".fix").style.display="none";
document.querySelector(".chat_b").style.display="block";
document.querySelector(".box").style.display="block";
document.querySelector(".tit").innerText = e.target.innerText;
document.querySelector("#text").focus();
onOff=true;
}
else{
sweetAlert("不能跟自己聊天哦~");
}
三、不使用ajax,不使用數(shù)據(jù)庫，怎么傳值，怎么保存信息
可以使用socket.emit（）發(fā)送到后臺(tái)，
然后socket.on（）監(jiān)聽。
// 傳名
function names(value) {
this.name=value;
socket.emit("reg", name);
}
function names1(value) {
this.name1 = value;
socket.emit("join", name1);
document.title = name1 + "的臻美Chat"
}
// 傳密碼
function pass(value){
socket.emit("pass", value);
}
socket.on("join", function (user) {
this.na = user;
})
socket.on("reg", function (user) {
this.na1 = user;
})
socket.on("pass", function (val) {
// console.log(val);
})
// 監(jiān)聽后臺(tái)名
var users2 = "";
socket.on('users', function (users) {
users2 = users;
// console.log(users2);
});
// 監(jiān)聽后臺(tái)密碼
var pass2=""
socket.on('pass', function (val) {
pass2 = val;
// console.log(pass2)
});
前臺(tái)傳進(jìn)來的數(shù)據(jù)通過寫入文件的方式保存。
//名字
socket.on("reg", function (name) {
usocket[name] = socket;
this.i1=name;
io.emit("reg", name);
var myname =this.i1+"\n";
fs.writeFile('./user.xls', myname, {
'flag': 'a'
}, function (err) {
if (err) {
throw err;
}
// 寫入成功后讀取測(cè)試
fs.readFile('./user.xls', 'utf-8', function (err,data) {
if (err) {
throw err;
}
});
});
})
// 密碼
socket.on("pass",function(val){
pass[val]=socket;
this.i2=val;
io.emit("pass", val);
var password=this.i2+"\n";
fs.writeFile('./password.xls', password, {
'flag': 'a'
}, function (err) {
if (err) {
throw err;
}
});
})
四、怎么實(shí)現(xiàn)私發(fā)消息
給每個(gè)用戶提供生成私有socket
// 獲取在線
function broadcast() {
io.sockets.emit("dataval", hashName);
}
//提供私有socket
function privateSocket(toId) {
return (_.findWhere(io.sockets.sockets, {
id: toId
}));
}
// 封裝刪除
function removeByValue(arr, val) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == val) {
arr.splice(i, 1);
break;
}
}
}
// 連接socket
var io=ws(server);
io.on("connection",function(socket){
// 寫入成功后讀取測(cè)試
fs.readFile('./user.xls', 'utf-8', function (err, data) {
if(data!=null){
var value = data.split('\n');
io.sockets.emit("users", value);
}
});
// 寫入成功后讀取測(cè)試
fs.readFile('./password.xls', 'utf-8', function (err,data) {
if(data!=null){
var pass1=data.split('\n');
io.sockets.emit("pass", pass1);
}
});
broadcast();
// 生成名字
socket.on('setName', function (data) {
var name = data;
hashName[name] = socket.id;
// console.log(hashName[name]);
broadcast();
});
// 私聊發(fā)送
socket.on('sayTo', function (data) {
var toName = data.to;
var toId;
console.log(toName);
if (toId = hashName[toName]) {
privateSocket(toId).emit('message1', data);
}
});
五、當(dāng)兩個(gè)以上用戶同時(shí)登錄出現(xiàn)用戶列表被清空，實(shí)現(xiàn)實(shí)時(shí)更新列表
使用數(shù)組去重，每次捕捉在線的用戶，重新賦值
// 統(tǒng)計(jì)在線人數(shù)
var arrh=[]
socket.on('dataval', function (val) {
vf = val;
console.log(vf);
for (let i = 0; i < vf.length; i++) {
// uu++
arrh.push(vf[i])
console.log(arrh)
}
var rf = [...new Set(arrh)]
console.log(rf)
rf=vf
for (let j = 0; j < rf.length; j++) {
var li = document.createElement("li");
li.classList.add("active");
li.innerText = rf[j]
console.log(rf[j])
socket.emit("time", rf[j]);
document.querySelector(".fix").appendChild(li);
}
});
socket.on('join', function (val) {
document.querySelector(".fix").innerHTML = ''
})
socket.on('disconnect', function (val) {
document.querySelector(".fix").innerHTML = ''
})
六、離線發(fā)送消息
手機(jī)端切換后臺(tái)有效，熄屏無效。
function sock () {
return io.connect("localhost:3003");
}
// 心跳機(jī)制
document.addEventListener('visibilitychange',function() {
if(document.visibilityState == 'hidden') {
//記錄頁面隱藏時(shí)間
var hiddenTime = new Date().getTime()
setTimeout(function(){
io.connect("localhost:3003");
},1500);
} else {
var visibleTime = new Date().getTime();
//頁面再次可見的時(shí)間-隱藏時(shí)間>3S,重連
if((visibleTime - hiddenTime) / 1000 > 3){
// 主動(dòng)關(guān)閉連接
// console.log('我要斷開')
io.disconnect()
// 1.5S后重連 因?yàn)閿嚅_需要時(shí)間，防止連接早已關(guān)閉了
setTimeout(function(){
io.connect("localhost:3003");
},1500);
}else{
console.log('還沒有到斷開的時(shí)間')
}
}
})
var socket = sock()
作者：Vam的金豆之路
主要領(lǐng)域：前端開發(fā)
我的微信：maomin9761
微信公眾號(hào)：前端歷劫之路
分類導(dǎo)航