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
JavaScript与Node.js一起打造一款聊天App的更多相关文章
- Vue.js与Node.js一起打造一款属于自己的音乐App(收藏)
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/118755888
- 京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 ...
- 创业笔记-Node.js入门之JavaScript与Node.js
JavaScript与Node.js JavaScript与你 抛开技术,我们先来聊聊你以及你和JavaScript的关系.本章的主要目的是想让你看看,对你而言是否有必要继续阅读后续章节的内容. 如果 ...
- JavaScript(Node.js)+ Selenium 实现淘宝抢单
JavaScript(Node.js)+ Selenium 淘宝抢单 为了买买买我也是拼了,看了一点selenium的资料,随便写的. 程序写的比较烂,但是够我自己用了,望各路大牛指教. 使用说明: ...
- Node.js+websocket+mongodb实现即时聊天室
ChatRoom Node.js+websocket+mongodb实现即时聊天室 A,nodejs简介:Node.js是一个可以让javascript运行在服务器端的平台,它可以让javascrip ...
- JavaScript(Node.js)+ Selenium自动化测试
Selenium is a browser automation library. Most often used for testing web-applications, Selenium may ...
- javaScript 和 node.js 的一些文章收集
这里收集了一些文章的链接,方便自己查询翻看,也避免把别人的成果复制过来再发布,节约时间. ThinkJS 3 正式版发布 我来回答饿了么大前端的问题(1) 一起理解 Virtual DOM 探讨Nod ...
- 利用node.js来实现长连接/聊天(通讯实例)
首先: 需要在服务器端安装node.js,然后安装express,socket.io这两个模块,并配置好相关的环境变量等. 其次: 服务端代码如下: var app = require('expres ...
- AngularJS+Node.js+socket.io 开发在线聊天室
所有文章搬运自我的个人主页:sheilasun.me 不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍 ...
随机推荐
- 攻防世界 favorite_number
favorite_number 进入环境得到源码 <?php //php5.5.9 $stuff = $_POST["stuff"]; $array = ['admin', ...
- echarts饼图去除圈外指向横线
series: [ { name: '实时人员信息', type: 'pie', radius: ['86%', '80%'], avoidLabelOverlap: false, label: { ...
- Java应用工程结构
分层的本质是关注点分离,隔离对下层的变化,可以简化复杂性,使得层次结构更加清晰. 1. 主流分层结构介绍 目前业界存在两种主流的应用工程结构:一种是阿里推出的<Java开发手册>中推荐的, ...
- Linux-ssh-key验证
ssh登录验证方式介绍 ssh服务登录的常用验证方式 用户/口令 基于密钥 基于用户和口令登录验证 客户端发起ssh请求,服务器会把自己的公钥发送给用户 用户会根据服务器发来的公钥对密码进行加密 加密 ...
- 程序包 applets.user.service.UserService 不存在-2022新项目
一.问题由来 接上一篇文章使用maven进行打包时报中文乱码错误,经过多次尝试后最终解决问题,显示出真正的错误信息如下: 程序包 applets.user.service.UserService 不存 ...
- drools中Fact的equality modes
一.equality modes介绍 在drools中存在如下2种equality modes. 1.identity模式 identity:这是默认的情况.drools引擎使用IdentityHas ...
- 国内访问 git 慢的方法
在国内访问 git 的时候,总会存在访问慢或者git clone 的时候报下面的错误 这个时候,我们可以使用代理的方式去进行访问 需要注意的是:你必须存在一个国外的,能够让你快速访问到 GitHub ...
- SQL中常用的字符串LEFT函数和RIGHT函数详解!
今天继续整理日常可能经常遇到的一些处理字符串的函数,记得点赞收藏!以备不时之需!看到最后有惊喜! LEFT(expression, length)函数 解析:从提供的字符串的左侧开始提取给定长度的字符 ...
- unity---GL实现案例
GL C#实现 不管是画任何东西都需要Begin()和End()函数: 画线 using System.Collections; using System.Collections.Generic; u ...
- python字符编码与文件操作
目录 字符编码 字符编码是什么 字符编码的发展史 字符编码实际应用 编码与解码 乱码问题 python解释器层面 文件操作 文件操作简介 文件的内置方法 文件的读写模式 文件的操作模式 作业 答案 第 ...