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 Validate表单验证插件实现代码
Jun 08 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jQuery实现高级检索功能
May 28 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
jquery插件实现图片悬浮
Apr 16 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生成自己的LOG文件
2006/10/09 PHP
使用PHP维护文件系统
2006/10/09 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
实例讲解React 组件
2020/07/07 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
Python制作豆瓣图片的爬虫
2017/12/28 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
python实现简单成绩录入系统
2019/09/19 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
AJAX的全称是什么
2012/11/06 面试题
集体婚礼证婚词
2014/01/13 职场文书
家长评语和期望
2014/02/10 职场文书
对标管理实施方案
2014/03/12 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
三年级学生期末评语
2014/12/26 职场文书