JavaScript与Node.js一起打造一款聊天App
聊天是我们人与人交流最直接的方式,互联网的加入使我们交流更加便捷。我们手机上的微信、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"