项目展示:



问题总结:
一、单用户重复登录设备

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

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/118669243

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

  1. 《从零开始做一个MEAN全栈项目》(3)

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 上一篇文章给大家讲了一下本项目的开发计划,这一章将会开始着手搭建一个MEAN项目.千里之行,始于足下, ...

  2. 《从零开始做一个MEAN全栈项目》(2)

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习.   上一节简单介绍了什么是MEAN全栈项目,这一节将简要介绍三个内容:(1)一个通用的MEAN项目的技 ...

  3. 《从零开始做一个MEAN全栈项目》(1)

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 在本系列的开篇,我打算讲一下全栈项目开发的优势,以及MEAN项目各个模块的概览. 为什么选择全栈开发? ...

  4. 一个关于vue+mysql+express的全栈项目(一)

    最近学了mysql数据库,寻思着能不能构思一个小的全栈项目,思来想去,于是就有了下面的项目: 先上几张效果图吧       目前暂时前端只有这几个页面,后端开发方面,有登录,注册,完善用户信息,获取用 ...

  5. 全栈项目|小书架|服务器端-NodeJS+Koa2 实现书籍详情接口

    通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 书籍详情分析 书籍详情页面如下: 从上图可以分析出详情页面大概有以下 ...

  6. 全栈项目|小书架|服务器端-NodeJS+Koa2实现首页图书列表接口

    通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 首页书籍信息 先来回顾一下首页书籍都有哪些信息: 从下面的图片可以看 ...

  7. 全栈项目|小书架|服务器开发-NodeJS 使用 JWT 实现登录认证

    通过这篇 全栈项目|小书架|服务器开发-JWT 详解 文章我们对JWT有了深入的了解,那么接下来介绍JWT如何在项目中使用. 安装 $ npm install jsonwebtoken 生成 Toke ...

  8. vue3+node全栈项目部署到云服务器

    一.前言 最近在B站学习了一下全栈开发,使用到的技术栈是Vue+Element+Express+MongoDB,为了让自己学的第一个全栈项目落地,于是想着把该项目部署到阿里云服务器.经过网上一番搜索和 ...

  9. Vue、Node全栈项目~面向小白的博客系统~

    个人博客系统 前言 ❝ 代码质量问题轻点喷(去年才学的前端),有啥建议欢迎联系我,联系方式见最下方,感谢! 页面有啥bug也可以反馈给我,感谢! 这是一套包含前后端代码的个人博客系统,欢迎各位提出建议 ...

  10. SpringBoot 整合 Elastic Stack 最新版本(7.14.1)分布式日志解决方案,开源微服务全栈项目【有来商城】的日志落地实践

    一. 前言 日志对于一个程序的重要程度不用过多的言语修饰,本篇将以实战的方式讲述开源微服务全栈项目 有来商城 是如何整合当下主流日志解决方案 ELK +Filebeat . 话不多说,先看实现的效果图 ...

随机推荐

  1. SpringMVC快速使用——基于XML配置和Servlet3.0

    SpringMVC快速使用--基于XML配置和Servlet3.0 1.官方文档 https://docs.spring.io/spring-framework/docs/5.2.8.RELEASE/ ...

  2. 面试官:RabbitMQ怎么实现消费端限流

    哈喽!大家好,我是小奇,一位不靠谱的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 RabbitMQ有很多高级特性, ...

  3. JavaScript学习总结8-DOM

    今天学习了DOM的增删改查 innerText可以用来修改文本的内容,但是无法识别标签,要修改标签样式使用innerHTML 删除节点的步骤:先获取父节点,在通过父节点删除子节点 注意:删除节点是一个 ...

  4. acwing刷题--激光炸弹--前缀和(后期会有优化做法)

    地图上有 N 个目标,用整数 Xi,Yi 表示目标在地图上的位置,每个目标都有一个价值 Wi. 注意:不同目标可能在同一位置. 现在有一种新型的激光炸弹,可以摧毁一个包含 R×R 个位置的正方形内的所 ...

  5. SpringMVC的文件上传下载,异常处理,拦截器的小总结

    文件的上传和下载 我们通常在访问网页时会使用到文件的上传与下载的功能,那么他是如何实现的呢? 1 下载: ResponseEntity :用于控制器方法的返回值类型,该控制器方法的返回值就是响应到浏览 ...

  6. 基于Koa与umi实现服务端(SSR)渲染

    工具: umijs:react前端应用框架. koa:基于 Node.js 平台的web 开发框架. 介绍: 本文主要是简单介绍,利用umi开发前端页面,打包成服务端渲染工程包.由Koa实现服务端渲染 ...

  7. py文件加密打包成exe文件

    python的py.pyc.pyo.pyd文件区别 py是源文件: pyc是源文件编译后的文件: pyo是源文件优化编译后的文件: pyd是其他语言写的python库: 为什么选用Cpython .p ...

  8. 数据交换格式 JSON

    1. 什么是 JSON 概念 : JSON 的英文全称是 JavaScript ObjEct Notation, 即 "JavaScript 对象表示法" . 简单来讲 : JSO ...

  9. 使用FastJson导出JSON

    概述 fastjson是目前java语言中最快的json库,比自称最快的jackson速度要快,比gson快大约6倍. https://github.com/alibaba/fastjson Fast ...

  10. BootstrapBlazor实战 Markdown 编辑器使用

    基础工程使用工程: B08. BootstrapBlazor实战 Menu 导航菜单使用 实战BootstrapBlazorMenu Markdown 编辑器使用, 以及整合Freesql orm快速 ...