只用js 实现的简约聊天框
之前看到别人的网页打开后都有个聊天框,可以与同时在网上的网友聊点简单话题,于是便找了个最简单的方法
使用js,客户端 打开页面,不断的给服务器发送请求来得到 新的消息
用JavaScript实现的轮询的优点和缺点:
1. 优点:很容易实现,不需要任何服务器端的特定功能,且在所有的浏览器上都能工作。
2. 缺点:这种方法很少被用到,因为它是完全不具伸缩性的。试想一下,在100个客户端每个都发出2秒钟的轮询请求的情况下,所损失的带宽和资源数量,在这种情况下30%的请求没有返回数据。
代码实现:页面使用了 Uediter 编辑器,后台存储最新消息,获取最新消息
rootroom.js
var login = true;
//发送请求函数
function sendRequest()
{
if (ueditor.hasContents()) {
ueditor.sync();
$("#chatMsg").val(ueditor.getContent());
}
//input是个全局变量,就是用户输入聊天信息的单行文本框
var chatMsg = $("#chatMsg").val();
var datas="chatMsg=" + chatMsg;
$.ajax({
type: "post",
url: "/chat",
data: datas,
datatype: "text",
success:function(data){
if(data=="nologin")
{
login=false;
alert("您还没有登录,请先登录");
window.location.href="/index.jsp";
}
else
{
login=true;
//使用chatArea多行文本域显示服务器响应的文本
$("#chatArea").html(data);
}
//清空输入框的内容
$("#chatMsg").val("");
ueditor.setContent("");
}
});
}
function sendEmptyRequest()
{
var datas="";
$.ajax({
type: "post",
url: "/chat",
data: datas,
datatype: "text",
success:function(data){ if(data=="nologin")
{
login=false;
alert("您还没有登录,请先登录");
window.location.href="/index.jsp";
}
else
{
login=true;
//使用chatArea多行文本域显示服务器响应的文本
$("#chatArea").html(data);
}
} }); //指定0.8s之后再次发送请求
if(login==true)
{
setTimeout("sendEmptyRequest()" , 800);
}
} function enterHandler(event)
{
//获取用户单击键盘的“键值”
var keyCode = event.keyCode ? event.keyCode
: event.which ? event.which : event.charCode;
//如果是回车键
if (keyCode == 13)
{
sendRequest();
}
}
只用js 实现的简约聊天框的更多相关文章
- JS代码实现的聊天框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- UWP开发之控件:用WebView做聊天框
目录 说明 WebView存在的价值 使用WebView的几个重要技巧 使用WebView做的聊天框 说明 大家都知道,无论是之前的Winform.WPF还是现在的IOS.Android开发中,都存在 ...
- 基于Node.js + WebSocket 的简易聊天室
代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...
- LayIM聊天框全屏根据浏览器高宽自适应
个人博客 地址:http://www.wenhaofan.com/article/20190410190628 问题 由于LayIM没有处理聊天框在全屏状态下根据浏览器缩放处理高宽,所以会导致在浏览器 ...
- 制作qq简易聊天框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【转】关于FLASH中图文混排聊天框的小结
原文链接 图文混排也是FLASH里一个很古老的话题了,我们不像美国佬那样游戏里面聊天框就是聊天框,全是文字干干净净,也不像日本人发明了并且频繁地使用颜文字.不管是做论坛.做游戏,必定要实现的一点就是带 ...
- C# 使用js正则表达式,让文本框只能输入数字和字母,最大长度5位
使用js正则表达式,让文本框只能输入数字和字母,最大长度5位,只需要加个onkeyup事件,即可简单实现 <asp:TextBox ID="txtBegin" runat=& ...
- (三)在js(jquery)中获得文本框焦点和失去焦点的方法
在js(jquery)中获得文本框焦点和失去焦点的方法 文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $(" ...
- 超炫HTML5 SVG聊天框拖拽弹性摇摆动画特效
这是一款很有创意的HTML5 SVG聊天框拖拽弹性摇摆动画特效. 用户能够用鼠标点击或用手滑动聊天框上的指定区域,该区域会以很有弹性的弹簧效果拉开聊天用户列表.点击一个用户头像后.又以同样的弹性特效切 ...
随机推荐
- Android多线程----异步消息处理机制之Handler详解
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...
- Unity开发 资源准备
开发环境准备 插件资源 当有喜欢的资源,选择去泽国社区和纳金网下载,仅用于学习目的. Fbx查看器 下载版本对应的FBX插件 比如:fbx20133_quicktime_win.exe 对应Quick ...
- 性能测试一般过程与LR性能测试过程
性能测试作为测试分类的一个大类,等同于系统测试中的功能测试.安全性测试和配置测试等,因此她的测试过程是对整个测试类型中测试过程的一个描述,因此包含了测试需要的确认目标,熟悉系统.获得需求等部分,因此性 ...
- hydra爆破用法
-R 根据上一次进度继续破解 -S 使用SSL协议连接 -s 指定端口 -l 指定用户名 -L 指定用户名字典(文件) -p 指定密码破解 -P 指定密码字典(文件) -e 空密码探测和指定用户密码探 ...
- 语义化的html结构的好处
HTML是提供网页文档内容的上下文结构和含义:html本身是没有表现的,我们看到例如<h1>是粗体,字体大小2em,加粗:<strong>是加粗的,不要认为这是html的表现, ...
- MySQL主从同步几个文件
MySQL主从同步: M锁表 M导出S导入 M解锁 M建同步帐号 S获取点位:产生master.info S开启同步 3306: mysql-bin.0000x mysql-bin.index ...
- 如何配置CentOS或者RedHat5.X、6.X、7.X的网络yum源
第一步:找到一个可靠的yum源 中科大帮助:https://lug.ustc.edu.cn/wiki/mirrors/help/centos源:http://mirrors.ustc.edu.cn/c ...
- Asp.net MVC十问十答[译]
1. Explain MVC (Model-View-Controller) in general? MVC (Model-View-Controller) is an architectural s ...
- JS 之DOM range对象
DOM范围 DOM中的range对象是DOM2中新定义的接口.通过这个对象可以选择文档中的某个区域,而不必考虑节点的界限. 创建范围 document.createRange()创建一个范围,这个范围 ...
- matlab建立双坐标
(1)设定双Y坐标 x=0:0.1:2*pi; y1=sin(x); y2=cos(x); y3=1-sin(x); [AX]=plotyy(x,y1,x,y2); %双Y坐标的建立 hold on; ...