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").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