JSP + AJAX 打造簡單聊天室
一個簡單的聊天室程式,但基本包含了簡單的AJAX的使用方法,可以做為簡單的Demo用來學習。
整個程式包含三個文件,頁面文件chat.html,後臺處理的Servlet文件Chat.java以及簡單的用戶資料的UserSessionListener.java類。其中chat.html用于接受用戶輸入,並將接收資料傳給後臺Servlet處理,UserSessionListener主要用於登入和登出時用戶列表及提示信息的處理。
chat.html如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5" />
<title></title>
<script type="text/javascript">
var HttpRequest;
var url = "Chat";
function getRequest(){
if(window.XMLHttpRequest){
return(new XMLHttpRequest());
}else if(window.ActiveXObject){
try{
return(new ActiveXObject("Msxm12.XMLHTTP"));
}catch(e){
try{
return(new ActiveXObject("Microsoft.XMLHTTP"));
}catch(e){}
}
}
}
function sendRequest(){
if(document.getElementById("txtMessage").value.length<=0){
return false;
}
HttpRequest = getRequest();
//HttpRequest.onreadystatechange = getMessage;
HttpRequest.open("POST", url, true);
HttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var msg;
msg = "Action=AddMessage&Message=" + escape(document.getElementById("txtMessage").value);
HttpRequest.send(msg);
document.getElementById("txtMessage").value = "";
//document.getElementById("txtMessage").focus();
}
function DisplayMessage(){
if(HttpRequest.readyState == 4 && HttpRequest.status == 200){
//alert("abd");
//alert(HttpRequest.responseText);
var messages;
//alert(HttpRequest.responseText);
messages = HttpRequest.responseText.split("!@#");
//document.writeln(messages[0]);
//document.writeln(messages[1]);
document.getElementById("Messages").innerHTML = messages[0];
document.getElementById("userList").innerHTML = "User List <br>" + messages[1];
//document.getElementById
}
}
function logout(){
HttpRequest = getRequest();
HttpRequest.open("POST", url, true);
HttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var msg;
msg = "Action=Logout";
HttpRequest.send(msg);
}
function getMessage(){
HttpRequest = getRequest();
HttpRequest.onreadystatechange = DisplayMessage;
HttpRequest.open("POST", url, true);
HttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var msg;
msg = "Action=GetMessage";
HttpRequest.send(msg);
document.all.txtMessage.focus();
}
function login(){
HttpRequest = getRequest();
var WshNetwork = new ActiveXObject("WScript.Network");
HttpRequest.open("POST", url, true);
HttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var msg;
msg = "Action=Login&UserName=" + WshNetwork.UserName;
HttpRequest.send(msg);
setInterval('getMessage();', 1000);
}
function chkSubmit(e){
if(window.event){
var keyNumber = e.keyCode;
if(keyNumber == 13){
sendRequest();
}
}
}
</script>
</head>
<body onunload="logout();" onload="login();">
<form action="#" onsubmit="return false;">
<table>
<tr valign="top">
<td width="400"><div id="Messages" style="font-size:9pt;width:800;height:400"></div></td>
<td width="100" id="userList"></td>
</tr>
</table>
<input type="text" size="20" id="txtMessage" onkeypress="chkSubmit(event);">
<button onclick="sendRequest();">Say</button>
</form>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5" />
<title></title>
<script type="text/javascript">
var HttpRequest;
var url = "Chat";
function getRequest(){
if(window.XMLHttpRequest){
return(new XMLHttpRequest());
}else if(window.ActiveXObject){
try{
return(new ActiveXObject("Msxm12.XMLHTTP"));
}catch(e){
try{
return(new ActiveXObject("Microsoft.XMLHTTP"));
}catch(e){}
}
}
}
function sendRequest(){
if(document.getElementById("txtMessage").value.length<=0){
return false;
}
HttpRequest = getRequest();
//HttpRequest.onreadystatechange = getMessage;
HttpRequest.open("POST", url, true);
HttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var msg;
msg = "Action=AddMessage&Message=" + escape(document.getElementById("txtMessage").value);
HttpRequest.send(msg);
document.getElementById("txtMessage").value = "";
//document.getElementById("txtMessage").focus();
}
function DisplayMessage(){
if(HttpRequest.readyState == 4 && HttpRequest.status == 200){
//alert("abd");
//alert(HttpRequest.responseText);
var messages;
//alert(HttpRequest.responseText);
messages = HttpRequest.responseText.split("!@#");
//document.writeln(messages[0]);
//document.writeln(messages[1]);
document.getElementById("Messages").innerHTML = messages[0];
document.getElementById("userList").innerHTML = "User List <br>" + messages[1];
//document.getElementById
}
}
function logout(){
HttpRequest = getRequest();
HttpRequest.open("POST", url, true);
HttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var msg;
msg = "Action=Logout";
HttpRequest.send(msg);
}
function getMessage(){
HttpRequest = getRequest();
HttpRequest.onreadystatechange = DisplayMessage;
HttpRequest.open("POST", url, true);
HttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var msg;
msg = "Action=GetMessage";
HttpRequest.send(msg);
document.all.txtMessage.focus();
}
function login(){
HttpRequest = getRequest();
var WshNetwork = new ActiveXObject("WScript.Network");
HttpRequest.open("POST", url, true);
HttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var msg;
msg = "Action=Login&UserName=" + WshNetwork.UserName;
HttpRequest.send(msg);
setInterval('getMessage();', 1000);
}
function chkSubmit(e){
if(window.event){
var keyNumber = e.keyCode;
if(keyNumber == 13){
sendRequest();
}
}
}
</script>
</head>
<body onunload="logout();" onload="login();">
<form action="#" onsubmit="return false;">
<table>
<tr valign="top">
<td width="400"><div id="Messages" style="font-size:9pt;width:800;height:400"></div></td>
<td width="100" id="userList"></td>
</tr>
</table>
<input type="text" size="20" id="txtMessage" onkeypress="chkSubmit(event);">
<button onclick="sendRequest();">Say</button>
</form>
</body>
</html>
用於處理頁面提交信息的Servlet Chat.java代碼如下:
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.LinkedList;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import moon.UserSessionListener;
/**
* Servlet implementation class for Servlet: Chat
*
*/
public class Chat extends javax.servlet.http.HttpServlet implements
javax.servlet.Servlet {
static final long serialVersionUID = 1L;
private String userName = "";
/*
* (non-Java-doc)
*
* @see javax.servlet.http.HttpServlet#HttpServlet()
*/
public Chat() {
super();
}
private String getNow(){
Date date = new Date();
SimpleDateFormat df = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
return df.format(date);
}
/*
* (non-Java-doc)
*
* @see javax.servlet.http.HttpServlet#doGet(HttpServletRequest request,
* HttpServletResponse response)
*/
@SuppressWarnings("unchecked")
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String action = request.getParameter("Action");
if (action == null) {
} else if (action.equals("GetMessage")) {
PrintWriter out = response.getWriter();
out.print(getMessages() + "!@#" + getOnlineUsers());
} else if (action.equals("AddMessage")) {
String message = request.getParameter("Message");
userName = ((UserSessionListener) request.getSession()
.getAttribute("UserName")).toString();
addMessage(getNow() + " " + userName + " Says: " + message);
}else if(action.equals("Logout")){
request.getSession().removeAttribute("UserName");
}else if(action.equals("Login")){
request.getSession().setAttribute("UserName", new UserSessionListener(request.getParameter("UserName")));
}
// TODO Auto-generated method stub
}
/*
* (non-Java-doc)
*
* @see javax.servlet.http.HttpServlet#doPost(HttpServletRequest request,
* HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
// TODO Auto-generated method stub
}
@SuppressWarnings("unchecked")
private String getMessages() {
String result = null;
ServletContext application = getServletContext();
LinkedList<String> messages = (LinkedList<String>) application
.getAttribute("ChatMessage");
if (messages == null) {
result = "";
} else {
StringBuilder sb = new StringBuilder("");
for (String tmp : messages) {
sb.append(tmp);
sb.append("<br>");
}
result = sb.toString();
}
return result;
}
@SuppressWarnings("unchecked")
private String getOnlineUsers() {
String result;
LinkedList<String> onlineUsers = (LinkedList<String>)getServletContext().getAttribute("UserList");
if (onlineUsers == null) {
result = "";
} else {
StringBuilder users = new StringBuilder("");
for (String tmp : onlineUsers) {
users.append(tmp);
users.append("<br>");
}
result = users.toString();
}
return result;
}
@SuppressWarnings("unchecked")
private void addMessage(String message) {
ServletContext application = getServletContext();
synchronized (application) {
LinkedList<String> messages = (LinkedList<String>) application
.getAttribute("ChatMessage");
if (messages == null) {
messages = new LinkedList<String>();
}
if (messages.size() > 30) {
messages.removeFirst();
}
messages.add(message);
application.setAttribute("ChatMessage", messages);
}
}
public void destroy() {
super.destroy();
}
}
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.LinkedList;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import moon.UserSessionListener;
/**
* Servlet implementation class for Servlet: Chat
*
*/
public class Chat extends javax.servlet.http.HttpServlet implements
javax.servlet.Servlet {
static final long serialVersionUID = 1L;
private String userName = "";
/*
* (non-Java-doc)
*
* @see javax.servlet.http.HttpServlet#HttpServlet()
*/
public Chat() {
super();
}
private String getNow(){
Date date = new Date();
SimpleDateFormat df = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
return df.format(date);
}
/*
* (non-Java-doc)
*
* @see javax.servlet.http.HttpServlet#doGet(HttpServletRequest request,
* HttpServletResponse response)
*/
@SuppressWarnings("unchecked")
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String action = request.getParameter("Action");
if (action == null) {
} else if (action.equals("GetMessage")) {
PrintWriter out = response.getWriter();
out.print(getMessages() + "!@#" + getOnlineUsers());
} else if (action.equals("AddMessage")) {
String message = request.getParameter("Message");
userName = ((UserSessionListener) request.getSession()
.getAttribute("UserName")).toString();
addMessage(getNow() + " " + userName + " Says: " + message);
}else if(action.equals("Logout")){
request.getSession().removeAttribute("UserName");
}else if(action.equals("Login")){
request.getSession().setAttribute("UserName", new UserSessionListener(request.getParameter("UserName")));
}
// TODO Auto-generated method stub
}
/*
* (non-Java-doc)
*
* @see javax.servlet.http.HttpServlet#doPost(HttpServletRequest request,
* HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
// TODO Auto-generated method stub
}
@SuppressWarnings("unchecked")
private String getMessages() {
String result = null;
ServletContext application = getServletContext();
LinkedList<String> messages = (LinkedList<String>) application
.getAttribute("ChatMessage");
if (messages == null) {
result = "";
} else {
StringBuilder sb = new StringBuilder("");
for (String tmp : messages) {
sb.append(tmp);
sb.append("<br>");
}
result = sb.toString();
}
return result;
}
@SuppressWarnings("unchecked")
private String getOnlineUsers() {
String result;
LinkedList<String> onlineUsers = (LinkedList<String>)getServletContext().getAttribute("UserList");
if (onlineUsers == null) {
result = "";
} else {
StringBuilder users = new StringBuilder("");
for (String tmp : onlineUsers) {
users.append(tmp);
users.append("<br>");
}
result = users.toString();
}
return result;
}
@SuppressWarnings("unchecked")
private void addMessage(String message) {
ServletContext application = getServletContext();
synchronized (application) {
LinkedList<String> messages = (LinkedList<String>) application
.getAttribute("ChatMessage");
if (messages == null) {
messages = new LinkedList<String>();
}
if (messages.size() > 30) {
messages.removeFirst();
}
messages.add(message);
application.setAttribute("ChatMessage", messages);
}
}
public void destroy() {
super.destroy();
}
}
用于做用戶登陸,登出處理類UserSessionListener代碼如下:
import javax.servlet.ServletContext;
import javax.servlet.http.HttpSessionBindingEvent;
import javax.servlet.http.HttpSessionBindingListener;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.LinkedList;
public class UserSessionListener implements HttpSessionBindingListener {
private String userName;
public UserSessionListener(String userName) {
super();
this.userName = userName;
}
private String getNow(){
Date date = new Date();
SimpleDateFormat df = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
return df.format(date);
}
@SuppressWarnings("unchecked")
public void valueBound(HttpSessionBindingEvent arg0) {
// TODO Auto-generated method stub
arg0.getSession().setMaxInactiveInterval(120);
ServletContext application = arg0.getSession().getServletContext();
synchronized (application) {
LinkedList<String> userList = (LinkedList<String>) application
.getAttribute("UserList");
if (userList == null) {
userList = new LinkedList<String>();
}
userList.add(userName);
application.setAttribute("UserList", userList);
LinkedList<String> messages = (LinkedList<String>) application
.getAttribute("ChatMessage");
if (messages == null) {
messages = new LinkedList<String>();
}
messages.add(getNow() + " " + userName + " Login...");
application.setAttribute("ChatMessage", messages);
}
}
@SuppressWarnings("unchecked")
public void valueUnbound(HttpSessionBindingEvent arg0) {
// TODO Auto-generated method stub
ServletContext application = arg0.getSession().getServletContext();
synchronized (application) {
LinkedList<String> userList = (LinkedList<String>) application
.getAttribute("UserList");
userList.remove(userName);
application.setAttribute("UserList", userList);
LinkedList<String> messages = (LinkedList<String>) application
.getAttribute("ChatMessage");
if (messages == null) {
messages = new LinkedList<String>();
}
messages.add(getNow() + " " + userName + " Logout...");
application.setAttribute("ChatMessage", messages);
}
}
/**
* @return the userName
*/
public String getUserName() {
return userName;
}
/**
* @param userName
* the userName to set
*/
public void setUserName(String userName) {
this.userName = userName;
}
public String toString() {
return this.userName;
}
}
import javax.servlet.http.HttpSessionBindingEvent;
import javax.servlet.http.HttpSessionBindingListener;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.LinkedList;
public class UserSessionListener implements HttpSessionBindingListener {
private String userName;
public UserSessionListener(String userName) {
super();
this.userName = userName;
}
private String getNow(){
Date date = new Date();
SimpleDateFormat df = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
return df.format(date);
}
@SuppressWarnings("unchecked")
public void valueBound(HttpSessionBindingEvent arg0) {
// TODO Auto-generated method stub
arg0.getSession().setMaxInactiveInterval(120);
ServletContext application = arg0.getSession().getServletContext();
synchronized (application) {
LinkedList<String> userList = (LinkedList<String>) application
.getAttribute("UserList");
if (userList == null) {
userList = new LinkedList<String>();
}
userList.add(userName);
application.setAttribute("UserList", userList);
LinkedList<String> messages = (LinkedList<String>) application
.getAttribute("ChatMessage");
if (messages == null) {
messages = new LinkedList<String>();
}
messages.add(getNow() + " " + userName + " Login...");
application.setAttribute("ChatMessage", messages);
}
}
@SuppressWarnings("unchecked")
public void valueUnbound(HttpSessionBindingEvent arg0) {
// TODO Auto-generated method stub
ServletContext application = arg0.getSession().getServletContext();
synchronized (application) {
LinkedList<String> userList = (LinkedList<String>) application
.getAttribute("UserList");
userList.remove(userName);
application.setAttribute("UserList", userList);
LinkedList<String> messages = (LinkedList<String>) application
.getAttribute("ChatMessage");
if (messages == null) {
messages = new LinkedList<String>();
}
messages.add(getNow() + " " + userName + " Logout...");
application.setAttribute("ChatMessage", messages);
}
}
/**
* @return the userName
*/
public String getUserName() {
return userName;
}
/**
* @param userName
* the userName to set
*/
public void setUserName(String userName) {
this.userName = userName;
}
public String toString() {
return this.userName;
}
}
其中UserSessionListener類實現了HttpSessionBingdingListener接口,以便于在用戶登入和登出時實現用戶列表的更新。