- 浏览: 1113235 次
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言,WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986:
Java并发编程:自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986:
http://win.51apps.com.cn/https: ...
temp -
ztwsl:
不错,支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai:
谢谢您能将知识精华汇编总结,让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23:
谢谢了,顶顶
struts2中的ValueStack学习
概览
这款使用 PHP 和 javascript 搭建的网页在线聊天程序包括:用户登录、注销、Ajax 功能 并且支持多用户。
一、搭建聊天页面
二、css 样式
三、使用 PHP 创建登录页面
该登录页面要求用户输入用户名,使用if else 语句判断是否用户输入了用户名。
如果输入了用户名,则将其存入session中:$_SESSION['name']
特别说明一点是:我们使用了 htmlspecialchars() 函数,将 HTML 字符转换为其字符本身,以防止用户输入恶意的代码( Cross-site scripting (XSS))。
调转至登录页面
如果用户没登录,则 session 不会被创建。所以我们使用 if else 语句进行判断:
欢迎和注销
我们尚未完成登录模块。应该允许用户注销和结束会话。
让我们在 Menu 菜单栏中增加一些 PHP 代码,以实现这个功能:
1、把用户名显示出来:
2、注销确认
使用 jQuery 完成用户注销时的确认窗口:
如果用户点击确认注销,则网页会跳转至这个网址:index.php?logout=true
我们需要使用 php 获取注销页面传递过来的参数:
四、处理用户的输入
当用户点击发送按钮后,我们想获取用户的输入内容,并将其写入日志中。
1、使用 jQuery 获取用户的输入内容,并异步的发生post请求。
2、使用 php 在服务器端接受请求,并获取用户发送的内容,将其写入日志文件中:
post.php
我们将用户输入的信息都存储在 log.html 文件中。
五、展示聊天记录的内容(log.html)
向用户显示最近更新的聊天记录。
1、为了节省加载时间,可以提前将 log.html 加载:
2、使用 jQuery.ajax 发送请求:
让聊天记录可以滚动:
3、实时更新聊天记录:
每 2.5 秒钟从新加载用户聊天记录文件。
更多阅读:
Secure Your Forms With Form Keys - prevent prevent XSS (Cross-site scripting) and Cross-site request forgery
Submit A Form Without Page Refresh using jQuery - Expand on our ajax request
How to Make AJAX Requests With Raw Javascript - Learn how requests work behind the scenes with raw javascript.
-
引用:
https://code.tutsplus.com/tutorials/how-to-create-a-simple-web-based-chat-application--net-5931
-
转载请注明:
原文出处:http://lixh1986.iteye.com/blog/2336028
-
这款使用 PHP 和 javascript 搭建的网页在线聊天程序包括:用户登录、注销、Ajax 功能 并且支持多用户。
一、搭建聊天页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Chat - Customer Module</title> <link type="text/css" rel="stylesheet" href="style.css" /> </head> <div id="wrapper"> <div id="menu"> <p class="welcome">Welcome, <b></b></p> <p class="logout"><a id="exit" href="#">Exit Chat</a></p> <div style="clear:both"></div> </div> <div id="chatbox"></div> <form name="message" action=""> <input name="usermsg" type="text" id="usermsg" size="63" /> <input name="submitmsg" type="submit" id="submitmsg" value="Send" /> </form> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript"> // jQuery Document $(document).ready(function(){ }); </script> </body> </html>
二、css 样式
/* CSS Document */ body { font:12px arial; color: #222; text-align:center; padding:35px; } form, p, span { margin:0; padding:0; } input { font:12px arial; } a { color:#0000FF; text-decoration:none; } a:hover { text-decoration:underline; } #wrapper, #loginform { margin:0 auto; padding-bottom:25px; background:#EBF4FB; width:504px; border:1px solid #ACD8F0; } #loginform { padding-top:18px; } #loginform p { margin: 5px; } #chatbox { text-align:left; margin:0 auto; margin-bottom:25px; padding:10px; background:#fff; height:270px; width:430px; border:1px solid #ACD8F0; overflow:auto; } #usermsg { width:395px; border:1px solid #ACD8F0; } #submit { width: 60px; } .error { color: #ff0000; } #menu { padding:12.5px 25px 12.5px 25px; } .welcome { float:left; } .logout { float:right; } .msgln { margin:0 0 2px 0; }
三、使用 PHP 创建登录页面
<? session_start(); function loginForm(){ echo' <div id="loginform"> <form action="index.php" method="post"> <p>Please enter your name to continue:</p> <label for="name">Name:</label> <input type="text" name="name" id="name" /> <input type="submit" name="enter" id="enter" value="Enter" /> </form> </div> '; } if(isset($_POST['enter'])){ if($_POST['name'] != ""){ $_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name'])); } else{ echo '<span class="error">Please type in a name</span>'; } } ?>
该登录页面要求用户输入用户名,使用if else 语句判断是否用户输入了用户名。
如果输入了用户名,则将其存入session中:$_SESSION['name']
特别说明一点是:我们使用了 htmlspecialchars() 函数,将 HTML 字符转换为其字符本身,以防止用户输入恶意的代码( Cross-site scripting (XSS))。
调转至登录页面
如果用户没登录,则 session 不会被创建。所以我们使用 if else 语句进行判断:
<?php if(!isset($_SESSION['name'])){ loginForm(); } else{ ?> <div id="wrapper"> <div id="menu"> <p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p> <p class="logout"><a id="exit" href="#">Exit Chat</a></p> <div style="clear:both"></div> </div> <div id="chatbox"></div> <form name="message" action=""> <input name="usermsg" type="text" id="usermsg" size="63" /> <input name="submitmsg" type="submit" id="submitmsg" value="Send" /> </form> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript"> // jQuery Document $(document).ready(function(){ }); </script> <?php } ?>
欢迎和注销
我们尚未完成登录模块。应该允许用户注销和结束会话。
让我们在 Menu 菜单栏中增加一些 PHP 代码,以实现这个功能:
1、把用户名显示出来:
<p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>
2、注销确认
使用 jQuery 完成用户注销时的确认窗口:
<script type="text/javascript"> // jQuery Document $(document).ready(function(){ //If user wants to end session $("#exit").click(function(){ var exit = confirm("Are you sure you want to end the session?"); if(exit==true){window.location = 'index.php?logout=true';} }); }); </script>
如果用户点击确认注销,则网页会跳转至这个网址:index.php?logout=true
我们需要使用 php 获取注销页面传递过来的参数:
if(isset($_GET['logout'])){ //before session destroy, simple exit message is written to a log file. $fp = fopen("log.html", 'a'); fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." has left the chat session.</i><br></div>"); fclose($fp); session_destroy(); header("Location: index.php"); //Redirect the user }
四、处理用户的输入
当用户点击发送按钮后,我们想获取用户的输入内容,并将其写入日志中。
1、使用 jQuery 获取用户的输入内容,并异步的发生post请求。
//If user submits the form $("#submitmsg").click(function(){ var clientmsg = $("#usermsg").val(); $.post("post.php", {text: clientmsg}); $("#usermsg").attr("value", ""); return false; });
2、使用 php 在服务器端接受请求,并获取用户发送的内容,将其写入日志文件中:
post.php
<? session_start(); if(isset($_SESSION['name'])){ $text = $_POST['text']; $fp = fopen("log.html", 'a'); fwrite($fp, "<div class='msgln'>(".date("g:i A").") <b>".$_SESSION['name']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>"); fclose($fp); } ?>
我们将用户输入的信息都存储在 log.html 文件中。
五、展示聊天记录的内容(log.html)
向用户显示最近更新的聊天记录。
1、为了节省加载时间,可以提前将 log.html 加载:
<div id="chatbox"><?php if(file_exists("log.html") && filesize("log.html") > 0){ $handle = fopen("log.html", "r"); $contents = fread($handle, filesize("log.html")); fclose($handle); echo $contents; } ?></div>
2、使用 jQuery.ajax 发送请求:
//Load the file containing the chat log function loadLog(){ $.ajax({ url: "log.html", cache: false, success: function(html){ //Insert chat log into the #chatbox div $("#chatbox").html(html); }, }); }
让聊天记录可以滚动:
//Load the file containing the chat log function loadLog(){ //Scroll height before the request var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; $.ajax({ url: "log.html", cache: false, success: function(html){ //Insert chat log into the #chatbox div $("#chatbox").html(html); //Auto-scroll //Scroll height after the request var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; if(newscrollHeight > oldscrollHeight){ //Autoscroll to bottom of div $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); } }, }); }
3、实时更新聊天记录:
//Reload file every 2500 ms or x ms if you wish to change the second parameter setInterval (loadLog, 2500);
每 2.5 秒钟从新加载用户聊天记录文件。
更多阅读:
Secure Your Forms With Form Keys - prevent prevent XSS (Cross-site scripting) and Cross-site request forgery
Submit A Form Without Page Refresh using jQuery - Expand on our ajax request
How to Make AJAX Requests With Raw Javascript - Learn how requests work behind the scenes with raw javascript.
-
引用:
https://code.tutsplus.com/tutorials/how-to-create-a-simple-web-based-chat-application--net-5931
-
转载请注明:
原文出处:http://lixh1986.iteye.com/blog/2336028
-
发表评论
-
Javascript 测试框架之 隐式声明 之 describe
2019-06-25 15:26 2591为什么使用 javascript 测试框架时,没有显式导入 d ... -
JavaScript之ECMAScript6新特性之_03_箭头函数(Arrow Function)
2018-01-25 13:46 1119一、简介 箭头函数(Arrow Function)是 ES6 ... -
JavaScript之ECMAScript6新特性之_02_线程异步阻塞: Promise, Async / await
2018-01-12 16:51 2328刚出来不久的 ES8 包含了 async 函数,它的出现,终于 ... -
JavaScript之ECMAScript6新特性之_01_开篇
2017-08-17 02:54 603点此查看全部: http://es6-features.org ... -
jQuery Versions - browser support
2017-08-12 04:19 1618jQuery 3.2.1 Support Deskto ... -
基于HTML5实现的中国象棋游戏
2017-06-24 02:24 1688HTML5实现中国象棋游戏 http://www.w2bc.c ... -
JavaScript之跨域请求解决方案
2017-06-07 11:03 3974浏览器处于安全原因,在使用 Ajax 进行请求访问时,不允许跨 ... -
JavaScript之 25 道面试题
2017-04-17 17:05 95525 Essential JavaScript Intervi ... -
JavaScript小应用之分页算法
2017-03-16 12:56 666效果图: function getPagina ... -
jQuery之empty() VS. remove()
2017-03-16 10:32 723jQuery empty() vs remove() Wh ... -
jQuery之 prop() VS. attr()
2017-03-14 16:43 661attr() 用于自定义属性,id ; prop() 用于 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 657Jquery mouseenter() vs mouseove ... -
javascript之JS操作iframe
2017-02-28 14:56 2195JS操作iframe 1. 获得iframe的w ... -
javascript之面向对象编程之原型继承
2017-01-02 15:34 1132前文讲到“属性继承” ... -
HTML5之Cookie,localStorage 与 sessionStorage
2016-12-22 18:35 844详说 Cookie, LocalStorage 与 ... -
jquery之live(), delegate(), on() 方法
2016-11-26 23:48 928通过下面的一个实例理解 jQuery 的 live(), de ... -
javascript之编程序题目
2016-11-06 17:30 10531. 判断两个字符串是否:字母相同切长度相同(空格不算)。 ... -
javascript之面向对象编程之属性继承
2016-10-23 21:09 916函数继承可以分为两种:1、继承其 this 属性 2、继承其 ... -
javascript 之 undefined
2016-08-12 11:01 710一、用法 undefined 关键字有两种用法: 1. 如 ... -
javascript之 == vs ===
2016-06-12 15:59 656一、Comparison Overview 1. Speed ...
相关推荐
在网页聊天模块中,JSP用于接收和处理用户的输入,如发送的消息,同时也能将服务器端的更新内容发送回客户端。 **DWR (Direct Web Remoting)** 是一个开源Java库,专门用于实现Web应用程序中的AJAX(Asynchronous ...
10. **Websocket**:JavaScript可以实现Websocket协议,提供实时双向通信,常用于在线聊天、实时股票报价、多人在线游戏等场景。 11. **Web Workers**:JavaScript的Web Workers特性可以开启后台线程,处理大量计算...
网页版QQ在线聊天系统是一种基于Web技术实现的即时通讯平台,它允许用户通过浏览器进行实时的文本、语音甚至视频交流,无需安装任何客户端软件。这种系统的设计灵感来源于早期的快狗聊天系统,它在功能上提供了类似...
【标题】"简单实现网页在线聊天"涉及到的技术和知识点主要集中在使用ASP(Active Server Pages)技术构建一个实时的、基于Web的聊天应用。ASP是一种由微软开发的服务器端脚本环境,它允许开发者使用诸如VBScript或...
总的来说,纯网页聊天功能是通过结合HTML、CSS和JavaScript,尤其是利用WebSocket和jQuery库,来实现的一种无刷新、实时互动的Web应用。这个【chat_demo】项目提供了一个简单的实例,帮助开发者理解并实践这一技术。
网页聊天室是一种基于Web技术实现的在线交流平台,用户无需注册或登录即可参与聊天,提供了一种便捷的社交方式。这种技术主要依赖于浏览器的JavaScript、HTML和CSS等前端技术,以及服务器端的技术支持,如WebSocket...
JavaScript作为全球最广泛使用的脚本语言之一,它在网页开发、服务器端编程、移动应用、游戏开发等多个领域都有广泛应用。这本书通过丰富的实例,帮助读者深入理解JavaScript的核心概念和技术,从而能够独立进行Web...
**JavaScript实现网页在线聊天室详解** 在Web开发中,创建一个在线聊天室是常见的应用场景,它允许用户实时地进行互动交流。本篇文章将深入探讨如何使用JavaScript这一强大的客户端脚本语言来实现一个基本的在线...
- **实时通信**: 在网页聊天应用中,可能会用到Ajax(Asynchronous JavaScript and XML)技术来实现局部刷新,提升用户体验。WebSocket协议可以提供双向通信,使得服务器能够主动推送消息给客户端,实现即时聊天功能...
【Java网页实时聊天】是一种利用Web技术实现实时通信的应用,尤其在当今互联网时代,用户对即时互动的需求日益增长,这种技术变得尤为重要。本项目基于反向Ajax(也称为Comet技术)实现,旨在提供一个低延迟、高效能...
网页版在线聊天是一种基于网页技术实现的实时通讯方式,它让用户无需下载安装任何客户端软件,只需通过浏览器访问特定网页即可进行即时沟通。这种技术在互联网上广泛应用,为用户提供了便捷的交流途径,尤其适合跨...
5. **前端框架**:现代网页聊天应用往往采用React、Vue.js或Angular等前端框架,这些框架提供了丰富的组件和工具,简化了开发过程,提高了用户体验。 6. **数据库管理**:为了持久化存储聊天记录,需要使用数据库,...
4. **WebSockets**:提供双向通信的协议,适用于实时应用,如在线聊天、股票交易等。 通过不断学习和实践,你将能熟练掌握 JavaScript 和 AJAX 技术,开发出更加高效、交互性强的 web 应用。记住,理论知识是基础,...
在网页聊天室中,每个用户登录后,服务器会为该用户创建一个唯一的Session ID,存储在服务器端。每当用户发送或接收消息时,服务器都会检查对应的Session ID,以确认用户身份,保证消息的正确路由。Session还帮助...
【标题】"chatserver:网页在线聊天系统特定" 指的是一个专为网页设计的在线聊天系统的实现,它基于Java技术。这个系统允许用户在网页上进行实时交流,提供了基本的聊天功能,可能包括一对一私聊、群组聊天、消息发送...
【在线聊天网页】是一种利用现代Web技术实现的实时通信平台,它允许用户通过网页进行实时交互,无需安装额外的应用程序。这种系统的核心是利用Ajax(Asynchronous JavaScript and XML)技术来实现实时更新,提高用户...
ASP在线网页聊天室是一种基于Active Server Pages(ASP)技术实现的实时交互平台,它允许用户在网页上进行实时对话,无需安装任何客户端软件,只需通过浏览器即可参与聊天。这种技术在20世纪90年代末至21世纪初非常...
这里,我们主要探讨的是一个名为"web-im-1.0.7.2"的项目,它提供了详细的文档和源代码,用于帮助开发者理解和构建自己的网页聊天应用。 1. **Web开发基础**: - HTML/CSS/JavaScript:网页的基础框架,HTML负责...
在这个聊天室项目中,可能会采用Web Forms,这是一种事件驱动的模型,允许开发者创建类似于桌面应用程序的网页。 2. **页面生命周期**:在ASP.NET Web Forms中,理解页面生命周期至关重要,包括初始化、加载、回发...