之前看到别人的网页打开后都有个聊天框,可以与同时在网上的网友聊点简单话题,于是便找了个最简单的方法

使用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 实现的简约聊天框的更多相关文章

  1. JS代码实现的聊天框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. UWP开发之控件:用WebView做聊天框

    目录 说明 WebView存在的价值 使用WebView的几个重要技巧 使用WebView做的聊天框 说明 大家都知道,无论是之前的Winform.WPF还是现在的IOS.Android开发中,都存在 ...

  3. 基于Node.js + WebSocket 的简易聊天室

    代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...

  4. LayIM聊天框全屏根据浏览器高宽自适应

    个人博客 地址:http://www.wenhaofan.com/article/20190410190628 问题 由于LayIM没有处理聊天框在全屏状态下根据浏览器缩放处理高宽,所以会导致在浏览器 ...

  5. 制作qq简易聊天框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 【转】关于FLASH中图文混排聊天框的小结

    原文链接 图文混排也是FLASH里一个很古老的话题了,我们不像美国佬那样游戏里面聊天框就是聊天框,全是文字干干净净,也不像日本人发明了并且频繁地使用颜文字.不管是做论坛.做游戏,必定要实现的一点就是带 ...

  7. C# 使用js正则表达式,让文本框只能输入数字和字母,最大长度5位

    使用js正则表达式,让文本框只能输入数字和字母,最大长度5位,只需要加个onkeyup事件,即可简单实现 <asp:TextBox ID="txtBegin" runat=& ...

  8. (三)在js(jquery)中获得文本框焦点和失去焦点的方法

    在js(jquery)中获得文本框焦点和失去焦点的方法   文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $(" ...

  9. 超炫HTML5 SVG聊天框拖拽弹性摇摆动画特效

    这是一款很有创意的HTML5 SVG聊天框拖拽弹性摇摆动画特效. 用户能够用鼠标点击或用手滑动聊天框上的指定区域,该区域会以很有弹性的弹簧效果拉开聊天用户列表.点击一个用户头像后.又以同样的弹性特效切 ...

随机推荐

  1. Android多线程----异步消息处理机制之Handler详解

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  2. Unity开发 资源准备

    开发环境准备 插件资源 当有喜欢的资源,选择去泽国社区和纳金网下载,仅用于学习目的. Fbx查看器 下载版本对应的FBX插件 比如:fbx20133_quicktime_win.exe 对应Quick ...

  3. 性能测试一般过程与LR性能测试过程

    性能测试作为测试分类的一个大类,等同于系统测试中的功能测试.安全性测试和配置测试等,因此她的测试过程是对整个测试类型中测试过程的一个描述,因此包含了测试需要的确认目标,熟悉系统.获得需求等部分,因此性 ...

  4. hydra爆破用法

    -R 根据上一次进度继续破解 -S 使用SSL协议连接 -s 指定端口 -l 指定用户名 -L 指定用户名字典(文件) -p 指定密码破解 -P 指定密码字典(文件) -e 空密码探测和指定用户密码探 ...

  5. 语义化的html结构的好处

    HTML是提供网页文档内容的上下文结构和含义:html本身是没有表现的,我们看到例如<h1>是粗体,字体大小2em,加粗:<strong>是加粗的,不要认为这是html的表现, ...

  6. MySQL主从同步几个文件

    MySQL主从同步:   M锁表 M导出S导入 M解锁 M建同步帐号 S获取点位:产生master.info S开启同步   3306: mysql-bin.0000x mysql-bin.index ...

  7. 如何配置CentOS或者RedHat5.X、6.X、7.X的网络yum源

    第一步:找到一个可靠的yum源 中科大帮助:https://lug.ustc.edu.cn/wiki/mirrors/help/centos源:http://mirrors.ustc.edu.cn/c ...

  8. Asp.net MVC十问十答[译]

    1. Explain MVC (Model-View-Controller) in general? MVC (Model-View-Controller) is an architectural s ...

  9. JS 之DOM range对象

    DOM范围 DOM中的range对象是DOM2中新定义的接口.通过这个对象可以选择文档中的某个区域,而不必考虑节点的界限. 创建范围 document.createRange()创建一个范围,这个范围 ...

  10. 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; ...