聊天是我们人与人交流最直接的方式,互联网的加入使我们交流更加便捷。我们手机上的微信、QQ是我们手机必不可少的应用软件。那么,我们是否可以做一款聊天应用呢?

之前我自己闲着没事,研究过一些技术,做了一款即时通讯应用,下面我将选取几幅具有代表性的图片供大家参考。
一、应用示图

以上是这款应用的主要页面,功能可能相对简陋点,不过基本的功能已经实现了,下面我将给出核心代码,全部源码地址在文末。
二、部分核心源码

前台主要核心逻辑:

这里我只列举了js核心代码,查看完整代码可以去文末。

function sock() {
return io.connect("http://localhost:3003"); // http环境下
}
// 心跳机制
document.addEventListener('visibilitychange', function () {
if (document.visibilityState == 'hidden') {
//记录页面隐藏时间
sock()
console.log('隐藏了')
}
})
setInterval(() => {
sock()
}, 10000);
var socket = sock()
var re = document.querySelector("#re");
var register1 = document.querySelector(".register");
var init = document.querySelector(".init");
var passr = document.querySelector("#passr");
var passl = document.querySelector("#passl");
var login1 = document.querySelector(".login");
var register_b = document.querySelector("#register_b");
var lo = document.querySelector("#lo");
var chat = document.querySelector("#chat");
var login_b = document.querySelector("#login_b");
var myMes = "";
var vf = "";
var na = "";
var p = "";
var we = "";
var div = "";
var v = "";
var q = 0;
var regCn = /[@:]/im;
var pattern = /^[\u4E00-\u9FA5]{1,5}$/;
// 同意
document.querySelector('.yes').onclick=function () {
document.querySelector('.dark').style.display='none'
}
document.querySelector('.ys').onclick = function () {
document.querySelector('.dark').style.display = 'block'
}
// 初始页面注册
document.querySelector("#reg").onclick = function () {
register1.style.display = "block";
init.style.display = "none";
document.querySelector(".bg").style.display = "none";
}
// 初始页面登录
document.querySelector("#log").onclick = function () {
login1.style.display = "block";
init.style.display = "none";
document.querySelector(".bg").style.display = "none";
}
// 登录按钮
login_b.onclick = function () {
login(); }
// 注册按钮
register_b.onclick = function () {
register();
}
//发送
document.getElementById("btn").onclick = function () {
send();
};
// 内容填充
document.getElementById("text").onkeyup = function () {
if (document.getElementById("text").value.length != 0) {
document.getElementById("btn").style.cssText = "background:#98E165;color:#fff;"
} else {
document.getElementById("btn").style.cssText = "background: #DDDEE2;color:#fff"
}
}
document.querySelector("#text").onclick = function () {
document.querySelector('#text').scrollIntoView(false);
}
// 传名
var users2 = "";
socket.on('users', function (users) {
users2 = users;
// console.log(users2);
});
// 传密码
var pass2 = ""
socket.on('pass', function (val) {
pass2 = val;
// console.log(pass2)
});
// 统计在线人数
var arrh = []
socket.on('dataval', function (val) {
vf = val;
console.log(vf);

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

JavaScript与Node.js一起打造一款聊天App的更多相关文章

  1. Vue.js与Node.js一起打造一款属于自己的音乐App(收藏)

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

  2. 京JS 2013 - A two-day conference in Beijing for the JavaScript and Node.js community

    京JS 2013 - A two-day conference in Beijing for the JavaScript and Node.js community 关于技术大会 京JS 2013 ...

  3. 创业笔记-Node.js入门之JavaScript与Node.js

    JavaScript与Node.js JavaScript与你 抛开技术,我们先来聊聊你以及你和JavaScript的关系.本章的主要目的是想让你看看,对你而言是否有必要继续阅读后续章节的内容. 如果 ...

  4. JavaScript(Node.js)+ Selenium 实现淘宝抢单

    JavaScript(Node.js)+ Selenium 淘宝抢单 为了买买买我也是拼了,看了一点selenium的资料,随便写的. 程序写的比较烂,但是够我自己用了,望各路大牛指教. 使用说明: ...

  5. Node.js+websocket+mongodb实现即时聊天室

    ChatRoom Node.js+websocket+mongodb实现即时聊天室 A,nodejs简介:Node.js是一个可以让javascript运行在服务器端的平台,它可以让javascrip ...

  6. JavaScript(Node.js)+ Selenium自动化测试

    Selenium is a browser automation library. Most often used for testing web-applications, Selenium may ...

  7. javaScript 和 node.js 的一些文章收集

    这里收集了一些文章的链接,方便自己查询翻看,也避免把别人的成果复制过来再发布,节约时间. ThinkJS 3 正式版发布 我来回答饿了么大前端的问题(1) 一起理解 Virtual DOM 探讨Nod ...

  8. 利用node.js来实现长连接/聊天(通讯实例)

    首先: 需要在服务器端安装node.js,然后安装express,socket.io这两个模块,并配置好相关的环境变量等. 其次: 服务端代码如下: var app = require('expres ...

  9. AngularJS+Node.js+socket.io 开发在线聊天室

    所有文章搬运自我的个人主页:sheilasun.me 不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍 ...

随机推荐

  1. python循环与基本数据类型内置方法

    今天又是充满希望的一天呢 一.python循环 1.wuile与else连用 当while没有被关键'break'主动结束的情况下 正常结束循环体代码之后会执行else的子代码 "" ...

  2. gin框架使用【5.表单参数】

    curl http://127.0.0.1:8080/users -X POST -d 'name=juanmaofeifei&age=10' package main import ( &q ...

  3. 数据建模软件Chiner,颜值与实用性并存

    目录 一.chiner介绍 二.值得关注的功能点 2.1. 兼容各种格式的数据建模文件 2.2. 支持多数据库.代码生成 2.3. 支持逻辑视图与物理视图设计 2.4. 自动生成数据库文档 三.总结 ...

  4. 普罗米修斯!Ubuntu下prometheus监控软件安装使用

    *Prometheus* 是一个开源的服务监控系统和时间序列数据库 官方网站:prometheus.io 一.安装prometheus cd /usr/local/        #进入安装目录 wg ...

  5. .NET 程序读取当前目录避坑指南

    前些天有 AgileConfig 的用户反映,如果把 AgileConfig 部署成 Windows 服务程序会启动失败.我看了一下日志,发现根目录被定位到了 C:\Windows\System32 ...

  6. 攻防世界-MISC:Aesop_secret

    这是攻防世界高手进阶区的的第九题,题目如下: 点击下载附件一,得到一个压缩包,解压后得到一张GIF动图,找个网站给他分解一下,得到如下图片 不知道是什么意思,所以就跑去看WP了,用010editor打 ...

  7. java自学中出现的问题或者?

    自学java之路,是如此的坎坷.经过一段时间的自学,我得出一些总结! 总结如下: 1.     在学习编程之路(Java)的,最基本的还是学习之路,对编程前程深感迷茫2.    网络中有许许多多的编程 ...

  8. 从Windows切换到Linux?看这篇就够了!

    作者:栈栈 链接:CU技术社区 微软已经马上准备在2020年1月份终止对Windows 7的支持,这意味着您将不再获得bug修复或安全更新.如果您是Windows 7的最终支持者之一,并且不想陷入一个 ...

  9. Docker系列教程03-Docker私有仓库搭建(registry)

    简介 仓库(Repository)是集中存放镜像的地方,又分为公共镜像和私有仓库. 当我们执行docker pull xxx的时候,它实际上是从registry.docker.com这个地址去查找,这 ...

  10. java实现空心金字塔

    前言 最近在学习java,遇到了一个经典打印题目,空心金字塔,初学者记录,根据网上教程,有一句话感觉很好,就是先把麻烦的问题转换成很多的简单问题,最后一一解决就可以了,然后先死后活,先把程序写死,后面 ...