关于个人全栈项目【臻美Chat】遇到的BUG以及解决方法

傷城~ 2021-08-13 22:58 360阅读 0赞

## 项目展示： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 3]

## 问题总结： ##

## 一、单用户重复登录设备 ##

将每次输入的用户名与已经记录在后台的数组ar比较，如果存在则表示重复。

// 生成数组
      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,不使用数据库，怎么传值，怎么保存信息 ##

可以使用socket.emit（）发送到后台，  
然后socket.on（）监听。

// 传名
        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);
        })
    // 监听后台名
     var users2 = "";
     socket.on('users', function (users) { 
         users2 = users;
        // console.log(users2);
     });
     // 监听后台密码
     var pass2=""
      socket.on('pass', function (val) { 
         pass2 = val;
        // console.log(pass2)
     });

前台传进来的数据通过写入文件的方式保存。

//名字
    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;
                  }
              });
        })

## 四、怎么实现私发消息 ##

给每个用户提供生成私有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();
    });
    // 私聊发送
    socket.on('sayTo', function (data) { 
        var toName = data.to;
        var toId;
        console.log(toName);
        if (toId = hashName[toName]) { 
            privateSocket(toId).emit('message1', data);
        }
    });

## 五、当两个以上用户同时登录出现用户列表被清空，实现实时更新列表 ##

使用数组去重，每次捕捉在线的用户，重新赋值

// 统计在线人数
    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 = ''
      })

## 六、离线发送消息 ##

手机端切换后台有效，熄屏无效。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]: /images/20210813/1ca543e6998c4726912898f84aa4918c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 1]: /images/20210813/6f0c659a9a89469fa55a86553efe8418.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 2]: /images/20210813/e7122aa6eaf2425a9c5819d2020dec96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 3]: /images/20210813/4efb8f36ad34428b9b9aff6de0275509.png