關于個人全棧項目【臻美Chat】遇到的BUG以及解決方法

項目展示：

 

















































問題總結：
一、單用戶重復登錄設備

將每次輸入的用戶名與已經記錄在后臺的數(shù)組ar比較，如果存在則表示重復。

// 生成數(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("不能重復登錄哦！"); return }

 

二、不能跟自己聊天

判斷點擊是否是同一個信息

          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ā)送到后臺，
然后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)聽后臺名
 var users2 = "";
 socket.on('users', function (users) {
     users2 = users;
    //  console.log(users2);
 });
 // 監(jiān)聽后臺密碼
 var pass2=""
  socket.on('pass', function (val) {
     pass2 = val;
    //  console.log(pass2)
 });

 






前臺傳進來的數(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;
              }
              // 寫入成功后讀取測試
              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;
              }
          });
    })

 

四、怎么實現(xiàn)私發(fā)消息

給每個用戶提供生成私有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){
// 寫入成功后讀取測試
fs.readFile('./user.xls', 'utf-8', function (err, data) {
    if(data!=null){
    var value = data.split('\n');
     io.sockets.emit("users", value);    
    }

});
// 寫入成功后讀取測試
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);
    }
});

 

五、當兩個以上用戶同時登錄出現(xiàn)用戶列表被清空，實現(xiàn)實時更新列表

使用數(shù)組去重，每次捕捉在線的用戶，重新賦值

// 統(tǒng)計在線人數(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ā)送消息

手機端切換后臺有效，熄屏無效。

function sock () {
    return io.connect("localhost:3003");
}
 // 心跳機制

 
document.addEventListener('visibilitychange',function() {
    if(document.visibilityState == 'hidden') {
        //記錄頁面隱藏時間
        var hiddenTime = new Date().getTime()    
         setTimeout(function(){
                io.connect("localhost:3003");
            },1500);
    } else {
        var visibleTime = new Date().getTime();
        //頁面再次可見的時間-隱藏時間>3S,重連    
        if((visibleTime - hiddenTime) / 1000 > 3){    
            // 主動關閉連接
            // console.log('我要斷開')
            io.disconnect()
            // 1.5S后重連 因為斷開需要時間，防止連接早已關閉了
            setTimeout(function(){
                io.connect("localhost:3003");
            },1500);    
        }else{
             console.log('還沒有到斷開的時間')
        }
    }
})
var socket = sock()
 

 

作者：Vam的金豆之路

主要領域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路