Ajax实现聊天室

运行效果如下:

代码显示:

var net=new Object();
//编写构造函数
net.AjaxRequest=function(url,onload,onerror,method,params){
this.req=null;
this.onload=onload;
this.onerror=(onerror) ? onerror : this.defaultError;
this.loadDate(url,method,params);
}
//编写用于初始化XMLHttpRequest对象并指定处理函数,最后发送HTTP请求的方法
net.AjaxRequest.prototype.loadDate=function(url,method,params){
if (!method){
method="GET";
}
if (window.XMLHttpRequest){
this.req=new XMLHttpRequest();
} else if (window.ActiveXObject){
this.req=new ActiveXObject("Microsoft.XMLHTTP");
}
if (this.req){
try{
var loader=this;
this.req.onreadystatechange=function(){
net.AjaxRequest.onReadyState.call(loader);
}
this.req.open(method,url,true);
if(method=="POST"){
this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
this.req.send(params);
}catch (err){
this.onerror.call(this);
}
}
}
//重构回调函数
net.AjaxRequest.onReadyState=function(){
var req=this.req;
var ready=req.readyState;
if (ready==4){
if (req.status==200 ){
this.onload.call(this);
}else{
this.onerror.call(this);
}
}
}
//重构默认的错误处理函籹
net.AjaxRequest.prototype.defaultError=function(){
alert("错误数据\n\n回调状态:"+this.req.readyState+"\n状态: "+this.req.status);
}
<script language="javascript" src="JS/AjaxRequest.js"></script>
<script language="javascript">
/******************错误处理的方法*******************************/
function onerror(){
alert("您的操作有误!");
}
/******************实例化Ajax对象的方法*******************************/
function getCheckCode1(showCheckCode,checkCode){
var loader1=new net.AjaxRequest("getPictureCheckCode.jsp?nocache="+
new Date().getTime(),deal_getCheckCode,onerror,"GET");
showCheckCode.style.display='';
checkCode.focus();
}
/************************回调函数**************************************/
function deal_getCheckCode(){
document.getElementById("showCheckCode").innerHTML=this.req.responseText;
}
</script>
ServletContext application = getServletContext();
application.setAttribute(String name,Object object);
name:用于指定一个属性名,该属性在整个Servlet上下文中都适用。
object:用于指定属性值。
application.setAttribute("message", sourceMessage);
application. getAttribute(String name);
name:用于指定一个属性名。
String sourceMessage = application.getAttribute("message").toString();
package com.wgh.model;
import java.util.Vector;
public class UserInfo {
private static UserInfo user = new UserInfo();
private Vector vector = null;
// 利用private定义构造函数,防止被外界产生新的instance对象
public UserInfo() {
this.vector = new Vector();
}
// 外界使用的instance对象
public static UserInfo getInstance() {
return user;
}
// 增加用户
public boolean addUser(String user) {
if (user != null) {
this.vector.add(user);
return true;
} else {
return false;
}
}
// 获取用户列表
public Vector getList() {
return vector;
}
// 移除用户
public void removeUser(String user) {
if (user != null) {
vector.removeElement(user);
}
}
}
package com.wgh.servlet;
import com.wgh.model.UserInfo;
import javax.servlet.http.HttpSessionBindingEvent;
public class UserListener implements
javax.servlet.http.HttpSessionBindingListener {
private String user;
private UserInfo container = UserInfo.getInstance(); //获得UserInfo类的对象
public UserListener() {
user = "";
}
// 设置在线监听人员
public void setUser(String user) {
this.user = user;
}
// 获取在线监听
public String getUser() {
return this.user;
}
// 当Session有对象加入时执行的方法
public void valueBound(HttpSessionBindingEvent arg0) {
System.out.println("上线用户:" + this.user);
}
// 当Session有对象移除时执行的方法
public void valueUnbound(HttpSessionBindingEvent arg0) {
System.out.println("下线用户:" + this.user);
if (user != "") {
container.removeUser(user);
}
}
}
public void loginRoom(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
HttpSession session = request.getSession();
String username=request.getParameter("username"); //获得登录用户名
UserInfo user=UserInfo.getInstance(); //获得UserInfo类的对象
session.setMaxInactiveInterval(600); //设置Session的过期时间为10分钟
Vector vector=user.getList();
boolean flag=true; //标记是否登录的变量
//判断用户是否登录
if(vector!=null&&vector.size()>0){
for(int i=0;i<vector.size();i++){
if(user.equals(vector.elementAt(i))){
PrintWriter out;
try {
out = response.getWriter();
out.println("<script language='javascript'>alert('该用户已经登录');"+
"window.location.href='index.jsp';</script>");
} catch (IOException e) {
e.printStackTrace();
}
flag=false;
break; //跳出for循环
}
}
}
//保存用户信息
if(flag){
UserListener ul=new UserListener(); //创建UserListener的对象
ul.setUser(username); //添加用户
user.addUser(ul.getUser()); //添加用户到UserInfo类的对象中
session.setAttribute("user",ul); //将UserListener对象绑定到Session中
session.setAttribute("username",username); //保存当前登录的用户名
session.setAttribute("loginTime",new Date().toLocaleString()); //保存登录时间
}
ServletContext application=getServletContext(); //获取Application对象
String sourceMessage="";
if(null!=application.getAttribute("message")){
sourceMessage=application.getAttribute("message").toString();
}
sourceMessage+="系统公告:<font color='gray'>" + username + "走进了聊天室!</font><br>";
application.setAttribute("message",sourceMessage);
try {
request.getRequestDispatcher("login_ok.jsp").forward(request, response);
} catch (Exception ex) {
Logger.getLogger(Messages.class.getName()).log(Level.SEVERE, null, ex);
}
}
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:redirect url="/main.jsp"/>
function showOnline(){
var loader=new net.AjaxRequest("online.jsp?nocache="+
new Date().getTime(),deal_online,onerror,"GET");
}
<%@page contentType="text/html" pageEncoding="UTF-8" %>
<%@ page import="com.wgh.model.UserInfo"%>
<%@ page import="java.util.*"%>
<%
UserInfo list=UserInfo.getInstance();
Vector vector=list.getList();
int amount=0;
%>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td height="32" align="center" class="word_orange ">欢迎来到心之语聊天室!</td></tr>
<tr>
<td height="23" align="center"><a href="#" onclick="set('所有人')">所有人</a></td>
</tr>
<%if(vector!=null&&vector.size()>0){
String username="";
amount=vector.size();
for(int i=0;i<amount;i++){
username=(String)vector.elementAt(i);
%>
<tr>
<td height="23" align="center">
<a href="#" onclick="set('<%=username%>')"><%=username%></a>
</td>
</tr>
<%}}%>
<tr><td height="30" align="center">当前在线[<font color="#FF6600"><%=amount%></font>]人</td></tr>
</table>
<td width="165" valign="top" bgcolor="#f6fded" id="online" style="padding:5px">在线人员列表</td>
function deal_online(){
online.innerHTML=this.req.responseText;
}
window.setInterval("showOnline();",10000);
window.onload=function(){
showOnline(); //当页面载入后显示在线人员列表
}
<script language="javascript">
function set(selectPerson){ //自动添加聊天对象
if(selectPerson!="${username}"){
form1.to.value=selectPerson;
}else{
alert("请重新选择聊天对象!");
}
}
</script>
<a href="#" onclick="set('<%=username%>')"><%=username%></a>
function send(){ //验证聊天信息并发送
if(form1.to.value==""){
alert("请选择聊天对象!");return false;
}
if(form1.content1.value==""){
alert("发送信息不可以为空!");form1.content1.focus();return false;
}
var param="from="+form1.from.value+"&face="+form1.face.value+"&color="+form1.color.value+
"&to="+form1.to.value+"&content="+ form1.content1.value;
var loader=new net.AjaxRequest("Messages?action=sendMessage",deal_send,onerror,"POST",param);
}
public void sendMessages(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
Random random = new Random();
String from = request.getParameter("from"); //发言人
String face = request.getParameter("face"); //表情
String to = request.getParameter("to"); //接收者
String color = request.getParameter("color"); //字体颜色
String content = request.getParameter("content"); //发言内容
String sendTime = new Date().toLocaleString(); //发言时间
ServletContext application = getServletContext();
String sourceMessage = application.getAttribute("message").toString();
try {
//发言时间
sourceMessage += "<font color='blue'><strong>" + from +
"</strong></font><font color='#CC0000'>" + face + "</font>对<font color='green'>[" +
to + "]</font>说:" + "<font color='" + color + "'>" + content + "</font>(" +
sendTime + ")<br>";
application.setAttribute("message", sourceMessage);
request.getRequestDispatcher("Messages?action=getMessages&nocache=" +
random.nextInt(10000)).forward(request, response);
} catch (Exception ex) {
Logger.getLogger(Messages.class.getName()).log(Level.SEVERE, null, ex);
}
}
function showContent(){
var loader1=new net.AjaxRequest("Messages?action=getMessages&nocache="+
new Date().getTime(),deal_content,onerror,"GET");
}
public void getMessages(HttpServletRequest request,HttpServletResponse response) {
response.setContentType("text/html;charset=UTF-8");
try {
request.getRequestDispatcher("content.jsp").forward(request, response);
} catch (Exception ex) {
Logger.getLogger(Messages.class.getName()).log(Level.SEVERE, null, ex);
}
}
<%@page contentType="text/html" pageEncoding="UTF-8" %>
${message}
<div style="height:290px; overflow:hidden" id="content">聊天内容</div>
function deal_content(){
var returnValue=this.req.responseText; //获取Ajax处理页的返回值
var h=returnValue.replace(/\s/g,""); //去除字符串中的Unicode空白符
if(h=="error"){
Exit();
}else{
content.innerHTML=sysBBS+returnValue+"</span>";
//当聊天信息超过一屏时,设置最先发送的聊天信息不显示
document.getElementById('content').scrollTop = document.getElementById('content').scrollHeight*2;
}
}
window.setInterval("showContent();",1000);
window.onload=function(){
showContent(); //当页面载入后显示聊天内容
}
function Exit(){
window.location.href="leave.jsp";
alert("欢迎您下次光临!");
}
<input name="button_exit" type="button" class="btn_grey" value="退出聊天室" onClick="Exit()">
<%@page contentType="text/html" pageEncoding="UTF-8" %>
<%
session.invalidate();
response.sendRedirect("index.jsp");
%>

Ajax实现聊天室的更多相关文章

  1. 基于servlet和ajax的聊天室

    (手贱点了更新发布时间,发布时间变成6-9...) 2017-5-20,在这个奇特的日子,我不再满足于在本地测试javaweb,于是在上腾讯云买了第一个云服务器,由于是学生认证,所以一个月只要10块钱 ...

  2. 使用PHP+ajax打造聊天室应用

    方法1.  comet http://www.xiumu.org/technology/the-php-notes-comet-long-connection-instance.shtml  这篇文章 ...

  3. ajax实现聊天室功能

    需求如下: 先死后活. 需求分析,分析思路如图所示: 1.创建数据库 create database chat; create table messages( id int unsigned prim ...

  4. 采用PHP实现”服务器推”技术的聊天室

      传统的B/S结构的应用程序,都是采用”客户端拉”结束来实现客户端和服务器端的数据交换. 本文将通过结合Ticks(可以参看我的另外一篇文章:关于PHP你可能不知道的-PHP的事件驱动化设计),来实 ...

  5. 分享一个基于长连接+长轮询+原生的JS及AJAX实现的多人在线即时交流聊天室

    实现网页版的在线聊天室的方法有很多,在没有来到HTML5之前,常见的有:定时轮询.长连接+长轮询.基于第三方插件(如FLASH的Socket),而如果是HTML5,则比较简单,可以直接使用WebSoc ...

  6. PHP+ajax聊天室源码!支持长轮循跟定时请求两种

      var lastID = "1";//声明上次取回的消息的ID var isposted = false; var mGetTime;//设置setTimeout的返回值 // ...

  7. Ajax PHP JavaScript MySQL实现简易的无刷新在线聊天室

    思路 消息显示区 发消息 板块 消息显示 消息发送 优化 显示非重复性的数据 优化显示 加上滚动条 每次都显示最新消息 完整代码 前端代码 数据库表结构 服务器端代码 总结与展望 总结 展望 为更好的 ...

  8. php websocket-网页实时聊天之PHP实现websocket(ajax长轮询和websocket都可以时间网络聊天室)

    php websocket-网页实时聊天之PHP实现websocket(ajax长轮询和websocket都可以时间网络聊天室) 一.总结 1.ajax长轮询和websocket都可以时间网络聊天室 ...

  9. php+websocket搭建简易聊天室实践

    1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...

随机推荐

  1. pwnable.tw calc

    题目代码量比较大(对于菜鸡我来说orz),找了很久才发现一个能利用的漏洞 运行之发现是一个计算器的程序,简单测试下发现当输入的操作数超过10位时会有一个整型溢出 这里调试了一下发现是printf(&q ...

  2. python numpy和pandas做数据分析时去掉科学记数法显示

    1.Numpy import numpy as np np.set_printoptions(suppress=True, threshold=np.nan) suppress=True 取消科学记数 ...

  3. WPF使用第三方字体(TTF字体)

    1.下载第三方字体文件,将以TTF结尾的文件复制到项目中 2.在App.xaml中或者你需要的地方添加资源的定义 <Application.Resources> <FontFamil ...

  4. ansible-mysql

    ansible mysql -m command -a "yum -y install https://www.percona.com/downloads/percona-monitorin ...

  5. 在服务器上实现SSH(Single Stage Headless)

    服务器上ssh实现 写在前面:这只是我在服务器上的环境实现的,仅供参考.要根据自己系统的环境做出修改. ==github源码(https://github.com/mahyarnajibi/SSH)= ...

  6. day22.面向对象初识

    1.面向对象引入 先来创建一个小游戏:人狗大战 # 定义一个狗 def Gog(name,blood,aggr,kind): dog = { 'name':name, 'blood':blood, ' ...

  7. SparkStreaming

    Spark Streaming用于流式数据的处理.Spark Streaming支持的数据输入源很多,例如:Kafka.Flume.Twitter.ZeroMQ和简单的TCP套接字等等.数据输入后可以 ...

  8. Vue-Router动态路由匹配

    //重点在于路由出口 <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- & ...

  9. Csharp 连接NHibernate下需要注意的几个点

    背景: 在学习Photon Server 时,我看的教程中使用了NHibernate 框架来连接管理Mysql数据库. 我在以前只使用过java中的Spring boot,感觉两者有些相似之处. 我写 ...

  10. [linux]CentOS安装pre-built Nginx

    官方文档:https://nginx.org/en/linux_packages.html Nginx安装分为软件包安装和pre-built安装.这里使用的pre-built安装,不用自己编译. 设置 ...