转

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();
}

js实现网页在线聊天功能（一）相关推荐

JavaWeb--使用Websocket实现在线聊天功能
首先简单介绍下WebSocket,WebSocket是HTML5中内容,是基于TCP的一种新的网络协议,它支持全双工.长连接的通信.在它出现之前,实时消息发送与接收通过轮询实现,但是频繁与服务器建立连 ...
【SpringBoot框架篇】18.使用Netty加websocket实现在线聊天功能
文章目录 1.简介 2.最终功能实现的效果图 2.1.pc端 2.2.移动端 3.实战应用 3.1.引入依赖 3.2.配置文件 3.3.测试demo 3.3.1.消息内容实体类 3.3.2.处理请求的 ...
简单java socket_基于Java Socket实现一个简易在线聊天功能（一）
最近做了一个项目,其中有一个在线网页交流的需求,好久没写代码了,手都生疏了,于是先写demo练练手,分享到脚本之家平台,以此做个记录,方便自己和大家使用. 先给大家说下实现步骤分这样几大步: 1.使用 ...
基于PHP实现一个简单的在线聊天功能（轮询ajax ）
基于PHP实现一个简单的在线聊天功能(轮询ajax ) 一.总结 1.用的轮询ajax 二.基于PHP实现一个简单的在线聊天功能一直很想试着做一做这个有意思的功能,感觉复杂的不是数据交互和表结构,麻 ...
基于PHP实现一个简单的在线聊天功能
一直很想试着做一做这个有意思的功能,感觉复杂的不是数据交互和表结构,麻烦的是前端展..于是.. 需求分析要实现功能,首先要做前端,经过对比其他网站的在线聊天功能,发现除了基本的聊天功能以外,还要注意 ...
WebSocket实现多人在线聊天功能
WebSocket是现在最流行的实现多人在线聊或者私聊的技术,它可以实现客户端到客户端的通信,和以往的TCP和UDP不一样,它俩是客户端到服务端的通信,而且服务端不能直接给客户端发送消息,但是WebS ...
JS设计“网页在线编辑器”
为扩充佳誉网站管理软件的实际功能,今天大致性的设计了一个所见即所得的网页在线编辑器,只做了个雏形出来,目前所能做的仅仅是在"编辑"状态下写入HTML代码,在"预览&quo ...
基于环信实现在线聊天功能
由于最近接触到的项目需要用到聊天功能,关于聊天的SDK跟安卓同事统一,最终选择了环信.在官方下载好SDK,并研究了一波,最终实现自定义聊天功能. ###实现前准备 1.下载环信SDK,我使用的版本是V ...
网页版聊天功能 contentEditable属性，角标问题
在做聊天功能时,用的新浪的表情插件,当点击插件中的表情时,无法将角标放在表情之后. 以下是解决方法:function moveToEnd(el) {if (typeof el.selectionSta ...
step5 . day5 网络编程基于UDP协议的多人网络在线聊天功能
模拟在线群聊功能,使用多进程完成聊天内容的接受和服务器端的转发,demo代码记录参考 //client_chat_UDP code #include <stdio.h> #include ...

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

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

js实现网页在线聊天功能（一）相关推荐

最新文章

热门文章