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

使用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 2541 幂运算

    codevs 2541 幂运算  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题目描述 Description 从m开始,我们只需要6次运算就可以计算出 ...

  2. codeforces gym-101078

    题目链接: http://codeforces.com/gym/101078 A: #include <iostream> #include <cstdio> #include ...

  3. TopCoder SRM 633 Div.2 500 Jumping

    题意:给一个点(x,y),给一些步长delta1,delta2...deltaN,问从(0,0)严格按照步长走完N步后能否正好到达(x,y)点. 解法:其实就是判断这些线段和(0,0)-(x,y)这条 ...

  4. UVA 11573 Ocean Currents --BFS+优先队列

    采用优先队列做BFS搜索,d[][]数组记录当前点到源点的距离,每次出队时选此时eng最小的出队,能保证最先到达的是eng最小的.而且后来用普通队列试了一下,超时..所以,能用优先队列的,就要用优先队 ...

  5. Mecanim的Avater

    角色共用同一套动作原理 先说说为什么不同的角色可以共用同一套动作:因为导入之后,我们需要为它们每一个模型都创建一个Avater,而Avater里存储了骨骼的蒙皮信息(创建Avater时把三维软件里的蒙 ...

  6. c#中结构体(struct)和类(class)的区别

    一.类与结构的示例比较: 结构示例: public struct Person { string Name; int height; int weight public bool overWeight ...

  7. kprobe原理解析(二)

    上一篇文章和大家简要说明了下kprobe到底应该怎样用,那么现在我们就揭开kprobe神秘的面纱,刨根问底,一睹kprobe的庐山真面目. kprobe的工作过程大致如下: 1)注册kprobe.注册 ...

  8. JAVA 根据数据库表内容生产树结构JSON数据

    1.利用场景 组织机构树,通常会有组织机构表,其中有code(代码),pcode(上级代码),name(组织名称)等字段 2.构造数据(以下数据并不是组织机构数据,而纯属本人胡编乱造的数据) List ...

  9. Camera中对焦模式总结

    1,相机对焦模式有以下几种: auto  //自动 infinity //无穷远 macro //微距 continuous-picture //持续对焦 fixed //固定焦距   2,常见对焦模 ...

  10. JS 禁用和重新启用a标签的点击事件

    function changeHomePageModule(){ var css = $('#collapseExample').attr('class'); if(css=='collapse'){ ...