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

使用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. 双向广搜 codevs 3060 抓住那头奶牛

    codevs 3060 抓住那头奶牛 USACO  时间限制: 1 s  空间限制: 16000 KB  题目等级 : 黄金 Gold   题目描述 Description 农夫约翰被告知一头逃跑奶牛 ...

  2. UVA 11983 Weird Advertisement --线段树求矩形问题

    题意:给出n个矩形,求矩形中被覆盖K次以上的面积的和. 解法:整体与求矩形面积并差不多,不过在更新pushup改变len的时候,要有一层循环,来更新tree[rt].len[i],其中tree[rt] ...

  3. Codeforces Round 261 Div.2 D Pashmak and Parmida's problem --树状数组

    题意:给出数组A,定义f(l,r,x)为A[]的下标l到r之间,等于x的元素数.i和j符合f(1,i,a[i])>f(j,n,a[j]),求有多少对这样的(i,j). 解法:分别从左到右,由右到 ...

  4. 我发现:在StackOverflow上拯救歪果仁十分有意思!

    菊长:火星特工们!今天是周五了,大家有什么提议? BeJavaGod:报告菊长!我发现,在StackOverflow上拯救歪果仁十分有意思! 噗哈哈,时不时遇到问题会使用到StackOverflow, ...

  5. 谈谈Git的忽略规则.gitignore

    对于经常使用Git的朋友来说,.gitignore配置一定不会陌生. 今天就来说说这个.gitignore的使用. 首先要强调一点,这个文件的完整文件名就是“.gitignore”,注意最前面有个“. ...

  6. 有一家做BPM的公司叫K2,Gartner和IDC都说好!

    有一家公司被Gartner称为成长最快速的BPMS厂商,被IDC称为破坏性创新者… IDC及Gartner均称K2为成长最快速的商务流程管理套装平台(BPMS)厂商.IDC称K2为“破坏性创新者,在关 ...

  7. py变量

        1, python以数据为主 x=2,是给数据2开辟了个空间, X指向了2 y=x ,即y指向了2 x=5 ,x重新赋值 但是y依旧是原来的

  8. Asp.net设计模式笔记之二:应用程序分离与关注点分离

    本次笔记主要涉及的内容如下: 1.将智能UI(SmartUI)反模式重构成分层方式的示例代码 2.分层设计与传统的Asp.net WebForm模型(代码后植)相比具有的优势 3.逻辑分层概念以及分离 ...

  9. JS闭包的理解

    闭包的两个特点: 1.作为一个函数变量的一个引用 - 当函数返回时,其处于激活状态.2.一个闭包就是当一个函数返回时,一个没有释放资源的栈区. 其实上面两点可以合成一点,就是闭包函数返回时,该函数内部 ...

  10. IOS开发之——友盟社会化分享UMSocial_SDK的使用

    友盟第三方官方网址:http://dev.umeng.com/social/ios/quick-integration