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

使用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. 苹果手机 微信调用百度地图Javascript API 频繁闪退问题

    最近在网页中调用百度地图API js大众版,但是在IOS8系统中,缩放的时候频繁闪退,安卓手机没有这个问题! 在网上查询了下,有网友回答说不要频繁的去new marker,而是初始化话一定量的mark ...

  2. Watir、Selenium2、QTP区别

    1.支持的语言 Watir:ruby Selenium2:支持多种语言,如:python,ruby,java,c#,php,perl,javascript QTP:vbscript 2.支持的浏览器 ...

  3. c++ web服务器

    https://github.com/facebook/proxygen http://tengine.taobao.org/ http://code.google.com/p/mongoose/ht ...

  4. 普通请求和ajax请求的区别

    普通请求和ajax请求的区别? 下面的action返回一个json文件,文件内容为sts.*,data1

  5. 【C#】【MySQL】C# 查询数据库语句@Row:=@Row+1

    如何实现数据库查询产生虚拟的一列序号的功能: ) )AS r; 该语句可以实现产生虚拟的一列数据在MySQL中运行没有问题. 但是在C#里面调用去出现了错误"Parameter '@ROW' ...

  6. 基于jsp的文件上传和下载

    参考: 一.JavaWeb学习总结(五十)--文件上传和下载 此文极好,不过有几点要注意: 1.直接按照作者的代码极有可能listfile.jsp文件中 <%@taglib prefix=&qu ...

  7. JS 之匿名函数

    匿名函数以及闭包 匿名函数就是没有名字的函数.闭包是指有权访问另一个函数作用域中的变量的函数.创建闭包的常见方式是在一个函数的内部创建另一个函数.闭包会携带包含它的函数的作用域,因此会比其他函数占用更 ...

  8. 缓存算法之belady现象

    前言 在使用FIFO算法作为缺页置换算法时,分配的缺页增多,但缺页率反而提高,这样的异常现象称为belady Anomaly. 虽然这种现象说明的场景是缺页置换,但在运用FIFO算法作为缓存算法时,同 ...

  9. WPF Binding INotifyPropertyChanged 多线程 深入理解

    例子 先来看一个例子 Person.cs public class Person : ObservableObject,INotifyPropertyChanged { private string ...

  10. log4j使用教程

    日志是应用软件中不可缺少的部分,Apache的开源项目 Log4j 是一个功能强大的日志组件,提供方便的日志记录. 在官网:https://logging.apache.org/ ,点击 进入后,可以 ...