js的聊天室组件的封装
需求
1.聊天框,用户名,输入框,发送按钮
2.用户名,输入框同时有内容,才能成功点击发送
3.点击发送按钮后,聊天框中添加一条内容
4.别人发送的消息也能在一定时间内返回到聊天框中
效果图:
发送后效果图:
分析:
- 点击发送或者回车后调用ajax向服务器发送JSON数据
- 每隔0.5秒向服务器发送请求,返回数据
- 获取到数据后,用textArea=,每次返回数据都会覆盖前面的内容,如果这里用+=就会一直累加。
接口文档
发送方式 POST
数据类型 JSON
地址 http://10.9.65.224:4020
1、主动发消息给服务器
req
{
type:1
user:张三
msg:你好
}
res
[
{user:张三,msg:你好,time:当前时间},
{user:张三,msg:你好,time:当前时间},
{user:张三,msg:你好,time:当前时间},
{user:张三,msg:你好,time:当前时间},
{user:张三,msg:你好,time:当前时间},
]
2、主动获取聊天消息
req
{
type:2
}
res
[
{user:张三,msg:你好,time:当前时间},
{user:张三,msg:你好,time:当前时间},
{user:张三,msg:你好,time:当前时间},
{user:张三,msg:你好,time:当前时间},
{user:张三,msg:你好,time:当前时间},
]
聊天室组件分装:
import Utils from "./Utils.js";
export default class ChatIndex{
bool;
ip;
constructor(_bool,_ip){
this.bool=_bool;
this.ip=_ip;
this.elem=this.creatElem();
setInterval(e=>this.aniamtion(e),500)
document.addEventListener("keyup",e=>this.clickHandler(e));
}
appendTo(parent){
if(typeof parent==="string") parent=document.querySelector(parent);
parent.appendChild(this.elem);
}
creatElem(){
var div=Utils.ce("div",{
// position:"relative",
});
this.textArea=Utils.ce("textarea",{
resize: "none",
"880px",
height: "400px",
backgroundColor: "white",
display:"block",
})
this.user=Utils.ce("input",{
// position:"absolute",
// left:0,
// top:"401px",
float:"left",
display:"block",
"120px",
height: "30px",
textAlign: "center",
fontSize: "25px",
outline: "none",
verticalAlign: "middle",
})
this.user.setAttribute("name","user");
this.msg=Utils.ce("input",{
height: "30px",
textAlign: "left",
fontSize: "25px",
outline: "none",
borderRadius: "30px",
padding:" 0px 15px",
"650px",
verticalAlign: "middle",
float:"left",
display:"block",
})
this.msg.setAttribute("name","msg");
var btn=Utils.ce("button",{
"70px",
height: "30px",
borderRadius: "30px",
outline: "none",
float:"left",
display:"block",
})
btn.textContent="发送";
btn.addEventListener("click",e=>this.clickHandler(e));
div.appendChild(this.textArea);
div.appendChild(this.user);
div.appendChild(this.msg);
div.appendChild(btn);
return div;
}
clickHandler(e){
if(e.type==="keyup" && e.keyCode!==13) return;
if(this.user.value.trim().length===0 || this.msg.value.trim().length===0) return;
this.ajax({
type:1,
user:this.user.value,
msg:this.msg.value,
bool:this.bool
})
this.msg.value="";
}
ajax(data){
var xhr=new XMLHttpRequest();
xhr.addEventListener("load",e=>this.loadHandler(e));
xhr.open("POST",this.ip);
xhr.send(JSON.stringify(data));
}
aniamtion(){
this.ajax({type:2});
}
loadHandler(e){
if(this.bool) var str="----";
else var str="";
this.textArea.value=JSON.parse(e.currentTarget.response).reduce((value,item)=>{ //不能用+=
console.log(item);
value+=item.user+":"+item.msg+str+item.time+"
";
return value;
},"")
this.textArea.scrollTop=this.textArea.scrollHeight;
}
}
服务器代码
var http=require("http");
var arr=[];
var querystring=require("querystring");
var server=http.createServer(function(req,res){
var data="";
req.on("data",function(_data){
data+=_data;
})
req.on("end",function(){
if(data.trim().length===0) data=req.url.split("?")[1];
else{
try{
data=JSON.parse(data);
}catch(error){
}
}
if(typeof data==="string"){
try{
data=querystring.parse(data);
}catch(error){
res.end("数据类型错误");
return;
}
}
if(!data){
res.end("数据类型错误");
return;
}
if(data.type===1){
if(arr.length>500) arr.shift();
var date=new Date();
time=date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
if(data.bool) arr.push({user:data.user,msg:data.msg,time:time});
else arr.push({user:data.user,msg:data.msg,time:""});
console.log(arr);
}
// console.log(arr);
res.writeHead(200,{
"content-type":"text/html;charset=utf-8",
"Access-Control-Allow-Origin":"*"
});
res.write(JSON.stringify(arr));
res.end();
})
})
server.listen(4003,"10.9.65.224",function(){
console.log("服务开启")
})
Utils.js是工具包
export default class Utils{
static time=0;
static ids=0;
static timeManage={};
static timeStart(){
if(Utils.time) return;
Utils.time=new Date().getTime();
}
static timeEnd(){
var t=new Date().getTime()-Utils.time;
Utils.time=0;
return t;
}
static ts(){
Utils.ids++;
Utils.timeManage[Utils.ids]=new Date().getTime();
return ids;
}
static te(id){
if(!Utils.timeManage[Utils.id]) return 0;
var t=new Date().getTime()-Utils.timeManage[Utils.id];
delete Utils.timeManage[Utils.id];
return t;
}
static randomColor(){
var col="#";
for(var i=0;i<6;i++){
col+=Math.floor(Math.random()*16).toString(16);
}
return col;
}
static random(min,max){
return Math.floor(Math.random()*(max-min)+min);
}
static ce(type,style,parent){
var elem=document.createElement(type);
if(style){
for(var prop in style){
elem.style[prop]=style[prop];
}
}
if(typeof parent==="string") parent=document.querySelector(parent);
if(parent) parent.appendChild(elem);
return elem;
}
static setStyle(styles){
var style=document.createElement("style");
document.head.appendChild(style);
var styleSheet=document.styleSheets[document.styleSheets.length-1];
for(var prop in styles){
Utils.addCss(styleSheet,prop,styles[prop]);
}
}
static addCss(styleSheet,selector,style){
var str=selector+" {";
for(var prop in style){
var value=style[prop]
prop=prop.replace(/([A-Z])/g,function($1){
return "-"+$1.toLowerCase();
})
str+=prop+":"+value+";"
}
str+=" }";
styleSheet.insertRule(str,styleSheet.cssRules.length);
}
static CSStoString(str){
return str.replace(/(?<=:)(.*?)(?=;)|-[a-z](?=.+:)|;/g,function(item){
if(item===";") return ","
if(item[0]==="-") return item[1].toUpperCase();
return "'"+item.trim()+"'";
});
}
// TODO 将CSS转换为对象
static CSStoObject(str){
str=Utils.CSStoString(str);
return str.split(",").reduce((value,item)=>{
item=item.replace(/
/g,"");
var arr=item.split(":");
arr[0]=arr[0].replace(/s/g,"");
if(arr[1]===undefined) return value;
arr[1]=arr[1].replace(/'/g,"");
value[arr[0]]=arr[1];
return value;
},{})
}
static getCookie(){
return document.cookie.split(/;s*/).reduce((value,item)=>{
var arr=item.split("=");
value[arr[0]]=isNaN(arr[1]) ? arr[1] : Number(arr[1]);
return value;
},{})
}
static getCookieValue(key){
return Utils.getCookie()[key];
}
static setCookie(key,value,date){
if(!date){
document.cookie=`${key}=${value}`;
return;
}
document.cookie=`${key}=${value};expires=${date.toUTCString()}`;
}
static setCookies(obj,date){
for(var key in obj){
Utils.setCookie(key,obj[key],date);
}
}
// TODO 删除Cookie
static removeCookie(key){
Utils.setCookie(key,"",new Date());
}
static clearCookie(){
for(var key in Utils.getCookie()){
Utils.removeCookie(key);
}
}
}