js实现网页在线聊天功能（一）

转

js实现网页在线聊天功能（一）

2016年04月05日 09:41:41 golden_lion 阅读数：23717更多

个人分类： JS即时通讯聊天

由于一些项目的需要，近来我自己写了一个基于JS，要使用ajax接收发送数据的一个网页在线聊天工具。

                                    图一

准备将代码贴到网上，欢迎大家指教。

功能说明：

1、本工具交互网速需要20KB左右。我目前的测试，10个用户同时聊天对服务器的压力不大！

2、文件夹有：在Chat文件夹下有：icon文件夹   存放表情。img文件夹存放工具的皮肤，表情用的gif动态图片

3、主窗口可以在网页的可见区域移动（不能超过可见区），

4、设置了发送方式，默认是Ctrl+enter 如图；还可以：，当然也可以点击【发送】按钮发送聊天信息

5、点击可以弹出，表情选择的DIV，这个层是根据主窗口的位置不同而不同的，始终保持在如图一中的位置，插入表情后会自动关闭

第一次点击为打开，再点击一次就关闭了表情窗口

6、当有新的聊天数据时，滚动条至于信息显示窗口的最底端。没有新数据时，用户可以滚动滚动条查看聊天记录（信息显示窗口）！
 

第一部分代码：

/*************
第一步：定义公共变量
*************/
var _msgw               =     390;//div的宽度
var _msgh               =     327;//div的高度
var _background         =     "#FFFFFF";//背景颜色
var _bordercolor        =     "#55BACC";//窗口边框的颜色
var _str                =     "";//初始化变量
var _IsMousedown        =     0;//鼠标初始化
var _ClickLeft          =     0;//鼠标坐标初始化
var _ClickTop           =     0;//鼠标坐标初始化
var _img                =     "";//初始化变量
var _MyMessage          =     "";//我当前的输入信息
var _SID                =     0;//发送者的ID
var _RID                =     0;//接收者的ID
var _RNAME              =     "游客";//当前和哪个在聊天，对方的名字
var _RTYPE              =     "咨询";//聊天对象是什么，是群，还是个人用户，还是企业用户
var _url                =     "";//网页地址
var _cache              =     '';//缓存上一个状态的所有信息
/*************
第二步：在界面的中心生成一个可以移动的DIV
*************/
var _Maindiv=document.createElement("div");
var _Imgdiv=document.createElement("div");
function Create_Main_Div(){
 //计算DIV在页面中的中心位置，聊天工具的主窗口
 sjw=Math.round(_msgw/2);
 sjh=Math.round(_msgh/2);
 _lastw=Math.round(document.body.clientWidth/2)-sjw;
 _lasth=Math.round(document.body.clientHeight/2)-sjw;
 _Maindiv.setAttribute('id','MAIN_DIV_0001_WJL');//ID复杂主要是想设置其为网站的唯一性！
 _Maindiv.setAttribute("align","center");
 _Maindiv.style.position="absolute";
 _Maindiv.style.background=_background;
 _Maindiv.style.border="1px solid " + _bordercolor;
 _Maindiv.style.position = "absolute";
 _Maindiv.style.overflow = "hidden";
 _Maindiv.style.left = _lastw;   
 _Maindiv.style.top = _lasth;
 _Maindiv.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";     
 _Maindiv.style.width  = _msgw + "px";   
 _Maindiv.style.height = _msgh + "px"; 
 _Maindiv.style.zIndex = "700000";//至于所有的DIV的最上面
 _Maindiv.innerHTML = set_str();
 document.body.appendChild(_Maindiv);
}
//创建一个表情DIV，因为表情的DIV必须跟随主窗口移动而移动
function CreateImgDiv(){
 var s=document.getElementById("IMG_WJL_CHAT_CET");
 if(s){
  CloseDiv(_Imgdiv);
 }else{
  var sal1=_Maindiv.style.left;
  var sal2=_Maindiv.style.top;
  var arr1=sal1.split("px");
  var arr2=sal2.split("px");
  var left=arr1[0]*1+27;
  var top=arr2[0]*1+115;
  sjw=Math.round(_msgw/2);
  sjh=Math.round(_msgh/2);
  _lastw=Math.round(document.body.clientWidth/2)-sjw;
  _lasth=Math.round(document.body.clientHeight/2)-sjw;
  _Imgdiv.setAttribute("id","IMG_WJL_CHAT_CET");
  _Imgdiv.setAttribute("align","center");
  _Imgdiv.style.background=_background;
  _Imgdiv.style.border="1px solid #E0EEF8";
  _Imgdiv.style.position = "absolute";
  _Imgdiv.style.left = left;   
  _Imgdiv.style.top = top;
  _Imgdiv.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";     
  _Imgdiv.style.width  = "110px";   
  _Imgdiv.style.height = "90px"; 
  _Imgdiv.style.zIndex = "700001";//故意设置这么高的，置于页面的最顶层
  _Imgdiv.innerHTML = Img1();
  document.body.appendChild(_Imgdiv);
 }
}
function Img1(){
 _img="";
 _img=_img+'<div style="border:solid 1px #E0EEF8; width:110px; height:90px;">';
 _img=_img+'<div  style="width:110px; height:30px;">';
 _img=_img+'<div style="float:left;width:27px; height:30px;padding:2px;">';
 _img=_img+'<img src="'+_url+'Chat/icon/1.gif" width="21" height="22" style="cursor:pointer;" onClick="recimg(this.src)" title="微笑">';
 _img=_img+'</div>';
 _img=_img+'<div style="float:left;width:27px; height:30px;padding:2px;">';
 _img=_img+'<img src="'+_url+'Chat/icon/2.gif" width="22" height="22"  style="cursor:pointer;" onClick="recimg(this.src)" title="难过">';
 _img=_img+'</div>';
 _img=_img+'<div style="float:left;width:27px; height:30px;padding:2px;">';
 _img=_img+'<img src="'+_url+'Chat/icon/3.gif" width="21" height="22" style="cursor:pointer;" onClick="recimg(this.src)" title="呲牙">';
 _img=_img+'</div>';
 _img=_img+'<div style="float:left;width:27px; height:30px;padding:2px;">';
 _img=_img+'<img src="'+_url+'Chat/icon/4.gif" width="22" height="22" style="cursor:pointer;" onClick="recimg(this.src)" title="睡">';
 _img=_img+'</div>';
 _img=_img+'</div>';
 _img=_img+'<div  style="width:110px; height:30px;">';
 _img=_img+'<div style="float:left;width:27px; height:30px;padding:2px;">';
 _img=_img+'<img src="'+_url+'Chat/icon/5.gif" width="21" height="22" style="cursor:pointer;" onClick="recimg(this.src)" title="可爱">';
 _img=_img+'</div>';
 _img=_img+'<div style="float:left;width:27px; height:30px;padding:2px;">';
 _img=_img+'<img src="'+_url+'Chat/icon/6.gif" width="22" height="22" style="cursor:pointer;" onClick="recimg(this.src)" title="憨笑">';
 _img=_img+'</div>';
 _img=_img+'<div style="float:left;width:27px; height:30px;padding:2px;">';
 _img=_img+'<img src="'+_url+'Chat/icon/7.gif" width="24" height="22" style="cursor:pointer;" onClick="recimg(this.src)" title="衰">';
 _img=_img+'</div>';
 _img=_img+'<div style="float:left;width:27px; height:30px;padding:2px;">';
 _img=_img+'<img src="'+_url+'Chat/icon/8.gif" width="22" height="22" style="cursor:pointer;" onClick="recimg(this.src)" title="惊恐">';
 _img=_img+'</div>';
 _img=_img+'<div  style="width:110px; height:30px;">';
 _img=_img+'<div style="float:left;width:27px; height:30px;padding:2px;">';
 _img=_img+'<img src="'+_url+'Chat/icon/9.gif" width="21" height="22" style="cursor:pointer;" onClick="recimg(this.src)" title="疑问">';
 _img=_img+'</div>';
 _img=_img+'<div style="float:left;width:27px; height:30px;padding:2px;">';
 _img=_img+'<img src="'+_url+'Chat/icon/10.gif" width="22" height="22" style="cursor:pointer;" onClick="recimg(this.src)" title="得意">';
 _img=_img+'</div>';
 _img=_img+'<div style="float:left;width:27px; height:30px;padding:2px;">';
 _img=_img+'<img src="'+_url+'Chat/icon/11.gif" width="24" height="22" style="cursor:pointer;" onClick="recimg(this.src)" title="大哭">';
 _img=_img+'</div>';
 _img=_img+'<div style="float:left;width:27px; height:30px;padding:2px;">';
 _img=_img+'<img src="'+_url+'Chat/icon/12.gif" width="22" height="22" style="cursor:pointer;" onClick="recimg(this.src)" title="哈欠">';
 _img=_img+'</div>';
 _img=_img+'</div>';
 _img=_img+'</div>';
 return _img;
}
function recimg(strimg){
 var tempurl=strimg.split("/");
 _Getimg=tempurl[tempurl.length-1];
 insertimg();
}