jQuery实现简单聊天室


Posted in jQuery onFebruary 08, 2020

自从看了jQuery后,顿时感觉其的确很简单易学。下面就一把自己写的一个简易的聊天室程序写出来。

主要就是利用jQuery的ajax,然后,别的其实也没什么了。先上client端的程序吧。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"/>
 <meta name="viewport" content="width=device-width"/>
 <link rel="stylesheet" type="text/css" href="./styles/chat-mobile.css" rel="external nofollow" />
 <script type="text/javascript" src="./scripts/jquery-1.8.2.min.js"></script>
 <script type="text/javascript">
 $(function() {
 timestamp = 0;
 updateMsg(timestamp);
 $('button').click(function() { //重点是这里,从这里向服务器端发送数据
  $.post('chat.php', {
  'message': $('#msg').val(),
  'name': $('#name').val(),
  'timestamp': timestamp
  },function(xml) {
  $('#msg').val('');
  addMessage(xml);
  });
  return false;
 });
 
 $('#name').blur(function (){ //仅仅用来控制名字输入框的背景
  if ($('#name').val()) {
  $(this).css({"background": "url(images/background.jpg)", "border": "2px dashed #fff"});
  };
 });
 $('#name').click(function () {
  $(this).css({"background": "#fff", "border": "2px solid #fff"});
 })
 
 });
 //update message
 function updateMsg(timestamp) { //从服务器端更新聊天数据,并载入吧
 $.post('chat.php', {'timestamp': timestamp}, function(xml) {
  $('#loading').remove();
  addMessage(xml);
 });
 setTimeout('updateMsg(timestamp);', 1000); //1s刷新一次信息
 }
 function addMessage(xml) { //解析xml,并添加到页面内
 if($('status', xml).text() == 2) {
  return;
 };
 timestamp = $('timestamp', xml).text();
 $('message', xml).each(function() {
  var author = $('author', this).text();
  var content = $('content', this).text();
  var time = $('time', this).text();
  var htmlcode = '<div><strong>' + author + ': </strong><label>' + time + '</label><p>' + content + '</p></div>';
  $('#messageWindow').append(htmlcode);
  scrollToBottom();
 });
 }
 function scrollToBottom () { //控制滚动条一直显示在底部
 var height = document.getElementById('messageWindow').scrollHeight;
 if (height > $('#messageWindow').scrollTop()) {
  $('#messageWindow').scrollTop(height);
 }
 }
 
 </script>
</head>
<body>
 <header>
 <div id="hr"></div>
 </header>
 
 <div id="wrapper">
 <div id="window">
  <div id="messageWindow">
  <span id="loading">loading...</span>
  </div>
  <form id="chatform">
  <label>your message:</label>
  <textarea type="text" id="msg" size="50"/></textarea>
  <input type="text" id="name" size="10" placeholder="your name"/>
  <button accesskey="s">Send</button>
  </form>
 </div>
 </div>
 <br/>
 <br/>
 <p id="hint">Hint: 移动版的,开放的聊天室</p>
 
 <footer>
 <p>©SamuraiMe</p>
 </footer>
</body>
</html>

服务器端我是用php写的简单程序,把产生的xml贴出来。其实就是简简单单给数据库存数据取数据的一个过程。

<?xml version="1.0" encoding="utf-8"?>
<response>
 <status></status>
 <timestamp></timestamp>
 <message>
 <author></author>
 <content></content>
 <time></time>
 </message>
</response>

jQuery实现简单聊天室

上面就是最后成品,手机截图不方便,就在firefox上截了,效果是一样的。虽然css写得磕碜了点。但是还是有需要注意的地方。就像图上'how are you ...'那一大串,如果换成'1111...111'一大串,就会产生scroll-x,移动端好像没有出现滚动条,消息就看不到了。这怎么能容忍。于是要加

word-wrap: break-word;

本来我以为要写字符串程序,自己手动来换行,有了word-wrap就一句话搞定了。

最后要说,jQuery的确是简单好用,但终究是一个轻量级库,很多事情是完成不了的,就比如让那个滚动条一直显示在底部,我就发现无法用jQuery完成,也许是我才看jQuery,还没找到获取scrollHeight的方法,最后只能回到不熟悉的js上面去。

var height = document.getElementById('messageWindow').scrollHeight;
if (height > $('#messageWindow').scrollTop()) {
	$('#messageWindow').scrollTop(height);
}

差点忘了说了。

<meta name="viewport" content="width=device-width"/>

在移动端有一个虚拟可视区域,比实际的可视区域要大一些。第一次在手机上查看的时候,总有scroll出现,用了这个meta就可以解决了。

最后,这是我第一篇技术博客。希望对看到的人能有所帮助。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jquery实现点击弹出对话框
Feb 08 #jQuery
jQuery实现简易聊天框
Feb 08 #jQuery
jquery添加div实现消息聊天框
Feb 08 #jQuery
jQuery实现聊天对话框
Feb 08 #jQuery
jquery实现聊天机器人
Feb 08 #jQuery
jQuery实现获取多选框的值示例
Feb 07 #jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 #jQuery
You might like
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
使用requests库制作Python爬虫
2018/03/25 Python
Python @property使用方法解析
2019/09/17 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
python多线程使用方法实例详解
2019/12/30 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
机械专业毕业生自荐信
2013/11/02 职场文书
暑期社会实践感言
2014/02/25 职场文书
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
产品质量承诺书
2014/03/27 职场文书
出国留学经济担保书
2014/04/01 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
小学班级标语口号大全
2015/12/26 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL