项目展示:



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

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

    1. &&和&都是表示与,区别是&&只要第一个条件不满足,后面条件就不再判断. 而&要对所有的条件都进行判断. public class Test { ...

  2. git的.gitignore文件内容

    **/pom.xml.versionsBackup **/target/ **/out/ *.class # Mobile Tools for Java (J2ME) .mtj.tmp/ .idea/ ...

  3. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  4. 【分享汇总】25个主题分享,360°领略OpenHarmony最新技术版图

    2021年10月,开放原子开源基金会旗下开源项目 OpenAtom OpenHarmony (以下简称"OpenHarmony") 应邀参加华为2021 HDC 开发者大会,并组织 ...

  5. 2021.12.06 P1450 [HAOI2008]硬币购物(组合数学+抽屉原理+DP)

    2021.12.06 P1450 [HAOI2008]硬币购物(组合数学+抽屉原理+DP) https://www.luogu.com.cn/problem/P1450 题意: 共有 44 种硬币.面 ...

  6. jointJS初使用随记

    jointJs使用随记 1.下载与安装 前提:一个健康良好且干净的vue脚手架项目. 还是普遍的安装方式 yarn:yarn add jointjs npm:npm install jointjs 还 ...

  7. ubuntu16.04安装MATLAB R2017b步骤详解(附完整文件包)

    摘要:介绍在ubuntu16.04中从下载到安装成功的完整步骤.本文给出MATLAB R2017b(Linux系统)的完整安装包百度云盘下载地址,逐步介绍一种简单易行的安装方法,在桌面创建快捷方式,最 ...

  8. 小程序开发之获取客户来源 scene 场景值 手机设备信息

    为什么要获取客户来源 用作数据分析,根据客户来源,做精准转化! 判断客户来源入口方式 1.通过官方的scene场景值 常见场景值 场景值ID 说明 1001 发现栏小程序主入口,「最近使用」列表 10 ...

  9. 企业级 Web 开发的挑战

    本文翻译自土牛Halil ibrahim Kalkan的<Mastering ABP Framework>,是系列翻译的起头,适合ABP开发人员或者想对ABP框架进行深入演进的准架构师. ...

  10. 聊聊Lock接口的lock()和lockInterruptible()有什么区别?

    lock()和lockInterruptible()都表示获取锁,唯一区别是,当A线程调用lock()或lockInterruptible()方法获取锁没有成功而进入等待锁的状态时,若接着调用该A线程 ...