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

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

问题总结:


一、单用户重复登录设备


将每次输入的用户名与已经记录在后台的数组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 = ''
  })


六、离线发送消息


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


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()



相关文章
|
4月前
|
C# 开发者 Windows
勇敢迈出第一步:手把手教你如何在WPF开源项目中贡献你的第一行代码,从选择项目到提交PR的全过程解析与实战技巧分享
【8月更文挑战第31天】本文指导您如何在Windows Presentation Foundation(WPF)相关的开源项目中贡献代码。无论您是初学者还是有经验的开发者,参与这类项目都能加深对WPF框架的理解并拓展职业履历。文章推荐了一些适合入门的项目如MvvmLight和MahApps.Metro,并详细介绍了从选择项目、设置开发环境到提交代码的全过程。通过具体示例,如添加按钮点击事件处理程序,帮助您迈出第一步。此外,还强调了提交Pull Request时保持专业沟通的重要性。参与开源不仅能提升技能,还能促进社区交流。
46 0
|
6月前
|
测试技术 虚拟化 云计算
GitHub高赞!速通Python编程基础手册,被玩出花了!
随着云时代的来临,Python 语言越来越被程序开发人员喜欢和使用,因为其不仅简单易学,而且还有丰富的第三方程序库和相应完善的管理工具。 从命令行脚本程序到 GUI程序,从图形技术到科学计算,从软件开发到自动化测试,从云计算到虚拟化,所有这些领域都有 Python 的身影。 今天给小伙伴们分享的这份手册采用以任务为导向的编写模式,全面地介绍了 Python 编程基础及其相关知识的应用,讲解了如何利用 Python 的知识解决部分实际问题。
GitHub高赞!速通Python编程基础手册,被玩出花了!
|
7月前
|
C语言 Python
专为编程小白设计的Python零基础入门教程,GitHub星标破W
市面上大多数技术类的书籍都着重于一步步的构建系统的知识体系,并不是说这样就是不对的,但这样按部就班的学习注定了需要花费大量的时间用来掌握“基础知识”,或死记硬背,或慢慢理解。 然而世界不会迁就你,而是在步步紧逼的告诉你要赶紧学完,赶紧找工作,赶紧挣钱,这才是你生活的基础。 今天给小伙伴们带来了一份《编程小白的第一步Python书》,这本书是专为零基础小白设计的,不会告诉“先学C语言,会更好理解Python”这种狗屁道理。而是先带你掌握搭建项目所用到的最少得知识,再真实的项目搭建中实践自己的所学,逐渐的完善知识体系。
|
设计模式 Java 程序员
膜拜!阿里P8退休前撰写1500页程序性能调优笔记:GitHub标星79k
性能优化 Java性能优化个人觉得是Java进阶的必经之路。很多Java工程师对于执行代码后,底层运行的Java虚拟机可能一知半解。Java相比C/C++最大的区别是,少了内存管理。让工程师可以专注于应用主体逻辑,而不用去管理内存的使用,但这是一把双刃剑,如果让程序达到最佳的性能,是Java性能优化的初衷。
|
架构师 Java 程序员
GitHub爆出初级程序员到架构师【程序员能力模型】星标150k
一个优秀的程序员应该有自己的职业规划,并且能够精准的定位自己所处的位置。一般来说,每一个位置都会有明确的划分,并且也应该能够得到相应的岗位待遇。而我们下面就是以北上深(一线城市)的学员做为调研对象,归纳总结了一个程序员从初级程序员到架构师的能力模型。
置顶两个月!《程序员如何向架构师转型》神作在Github持续霸榜
企业架构在过去十年中取得了长足的进步。随着越来越多新技术出现,充分利用这些因素来将企业架构创建得更好十分重要。通过将新技术集成到企业架构中,即使在困难时期,也能取得丰硕的成果。
|
XML NoSQL 前端开发
如何当个优秀的文档工程师?从 TC China 看技术文档工程师的自我修养
既然技术文档工程师传播的是技术内容,那么技术内容是如何进行传播呢?一名优秀的文档工程师又如何借助这种规律,让内容传播的更远,在其中他又可以借助什么工具来提升效率呢?
409 0
|
人工智能 IDE 测试技术
用嘴写代码?继ChatGPT和NewBing之后,微软又开始整活了,Github Copilot X!
用嘴写代码?继ChatGPT和NewBing之后,微软又开始整活了,Github Copilot X!
202 0
|
缓存 数据可视化 测试技术
开源多年后,Facebook这个调试工具,再登Github热门榜
让许多工程师合作开发大型应用大多会面临一个挑战,通常没有一个人知道每个模块是如何工作的,这种技能会让开发新功能、调查Bug或优化性能变得困难,为了解决这个问题,Facebook创建并开源了Flipper,一个可扩展的跨平台的调试工具,用来调试 iOS 和 Android 应用。近日又双叒登上了Github热榜。
|
人工智能 自动驾驶 程序员
Swift 周报 第十九期 |技术汇总
十期磨一剑,废铁亦有形,Swift社区就是你梦想已久的香格里拉,哪怕青冥长天,纵然绿水波澜!👊👊👊
169 0