只用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(); } } |
作者:panie
出处:http://www.cnblogs.com/panie2015/
如果您希望与我交流互动,欢迎加我微信
本文内容为作者辛苦整理书写,欢迎转载,但请保留文章出处
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?