只用js 实现的简约聊天框

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

使用js,客户端 打开页面,不断的给服务器发送请求来得到 新的消息

 

用JavaScript实现的轮询的优点和缺点:

  1. 优点:很容易实现,不需要任何服务器端的特定功能,且在所有的浏览器上都能工作。

  2. 缺点:这种方法很少被用到,因为它是完全不具伸缩性的。试想一下,在100个客户端每个都发出2秒钟的轮询请求的情况下,所损失的带宽和资源数量,在这种情况下30%的请求没有返回数据。

 

代码实现:页面使用了 Uediter 编辑器,后台存储最新消息,获取最新消息

rootroom.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
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();
    }
}

  

posted @   panie2015  阅读(2482)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
点击右上角即可分享
微信分享提示