ajax實現的聊天室程序

基於ajax的聊天室程序。程序很簡單，但是涵蓋的內容還是很多的。把做的代碼直接帖出來和大家一起分享了。。
數據庫我用的是MYSQL

drop table if exists chat;

create table chat(

chat_id int(16) not null auto_increment,

chat_name varchar(64) default null,

start_time Date default null,

primary key(chat_id)

)

drop table if exists user;

create table user(

user_id int(16) not null auto_increment,

user_name varchar(64) default null,

start_time Date default null,

primary key(user_id)

)

drop table if exists message;

create table message(

message_id int(16) not null auto_increment,

chat_id int(16) not null default '0',

user_id int(16) not null default '0',

user_name varchar(64) default null,

message varchar(1024),

post_time Date default null,

primary key(message_id)

)

insert into chat values(1,'Beijing','');

insert into chat values(2,'Shanghai','');

insert into chat values(3,'Guangzhou','');

package book.chat.table;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.util.Date;

import book.chat.util.DbManager;

public class Chat {

private int chatID;

private String chatName;

private Date startTime;

public Chat(){}

public Chat(int id){

this.chatID =id ;

if(!FromDb())

this.chatID=-1;

}

private boolean FromDb() {

int row = -1;

String sql ="select * from chat where chat_id="+this.chatID;

ResultSet rs = DbManager.getResultSet(sql);

try{

rs.last();

row = rs.getRow();

if(row == 1){

this.chatID = rs.getInt("CHAT_ID");

this.chatName = rs.getString("CHAT_NAME");

this.startTime = rs.getDate("START_TIME");

return true;

}else

return false;

}catch(SQLException e){

e.printStackTrace();

return false;

}finally{

DbManager.releaseConnection();

}

public int getChatID() {

return chatID;

}

public void setChatID(int chatID) {

this.chatID = chatID;

}

public String getChatName() {

return chatName;

}

public void setChatName(String chatName) {

this.chatName = chatName;

}

public Date getStartTime() {

return startTime;

}

public void setStartTime(Date startTime) {

this.startTime = startTime;

}

package book.chat.table;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.util.Date;

import book.chat.util.DbManager;

public class Message {

private int messageID;

private int chatID;

private int userID;

private String userName;

private String message;

private Date postTime;

public Message(){}

public Message(int id){

this.messageID =id ;

if(!FromDb())

this.messageID=-1;

}

private boolean FromDb() {

// TODO 自動生成方法存根

int row = -1;

String sql ="select * from message where message_id="+this.messageID;

ResultSet rs = DbManager.getResultSet(sql);

try{

rs.last();

row = rs.getRow();

if(row == 1){

this.messageID=rs.getInt("MESSAGE_ID");

this.chatID = rs.getInt("CHAT_ID");

this.userID = rs.getInt("USER_ID");

this.userName = rs.getString("USER_NAME");

this.message = rs.getString("MESSAGE");

this.postTime = rs.getDate("POST_TIME");

return true;

}else

return false;

}catch(SQLException e){

e.printStackTrace();

return false;

}finally{

DbManager.releaseConnection();

}

public int getChatID() {

return chatID;

}

public void setChatID(int chatID) {

this.chatID = chatID;

}

public String getMessage() {

return message;

}

public void setMessage(String message) {

this.message = message;

}

public int getMessageID() {

return messageID;

}

public void setMessageID(int messageID) {

this.messageID = messageID;

}

public int getUserID() {

return userID;

}

public void setUserID(int userID) {

this.userID = userID;

}

public String getUserName() {

return userName;

}

public void setUserName(String userName) {

this.userName = userName;

}

public Date getPostTime() {

return postTime;

}

public void setPostTime(Date postTime) {

this.postTime = postTime;

}

package book.chat.table;

import java.sql.ResultSet;

import java.sql.SQLException;

import book.chat.util.DbManager;

public class User {

private int userID;

private String userName;

private Date startTime;

public User(){}

public User(int id){

this.userID =id ;

if(!FromDb())

this.userID=-1;

}

private boolean FromDb() {

int row = -1;

String sql ="select * from user where user_id="+this.userID;

ResultSet rs = DbManager.getResultSet(sql);

try{

rs.last();

row = rs.getRow();

if(row == 1){

this.userID = rs.getInt("USER_ID");

this.userName = rs.getString("USER_NAME");

this.startTime = rs.getDate("START_TIME");

return true;

}else

return false;

}catch(SQLException e){

e.printStackTrace();

return false;

}finally{

DbManager.releaseConnection();

}

public Date getStartTime() {

return startTime;

}

public void setStartTime(Date startTime) {

this.startTime = startTime;

}

public int getUserID() {

return userID;

}

public void setUserID(int userID) {

this.userID = userID;

}

public String getUserName() {

return userName;

}

public void setUserName(String userName) {

this.userName = userName;

}

以上是對應的實體，及對應的set，get方法

寫一個連接數據庫的幫助類，要調用時很方便啦不用寫那些煩人的連接關閉！

package book.chat.util;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Statement;

public class DbManager {

private static Connection con;

public static final String CLASS_NAME="org.gjt.mm.mysql.Driver";

public static final String CONNET_URL = "jdbc:mysql://localhost:3306/chat";

public static Connection getConnection(){

try{

//利用反射加載驅動類

Class.forName(CLASS_NAME);

//獲得一個connection

con = DriverManager.getConnection(CONNET_URL,"root","root");

return con;

}catch(Exception e){

e.printStackTrace();

return null;

}

//傳入查詢DB的SQL語句,返回resultsset

public static ResultSet getResultSet(String sql){

boolean bSuccess = true;

Statement stmt = null;

ResultSet rs = null;

Connection con = getConnection();

if(con == null)

bSuccess = false;

if(bSuccess){

try{

stmt = con.createStatement();

rs = stmt.executeQuery(sql);

}catch(Exception e){

e.printStackTrace();

bSuccess = false;

}

if(bSuccess)

return rs;

else

return null;

}

//返回記錄集的總數

public static int getTotal(String sql){

ResultSet rs = getResultSet(sql);

try{

rs.last();

return rs.getRow();

}catch(Exception e){

e.printStackTrace();

return 0;

}finally{

releaseConnection();

}

//傳入執行數據更新的語句,返回更新結果集

public static boolean execute(String sql){

boolean bSuccess = true;

Statement stmt = null;

Connection con = getConnection();

if(con==null)

bSuccess = false;

if(bSuccess){

try{

stmt=con.createStatement();

bSuccess = stmt.execute(sql);

}catch(SQLException e){

e.printStackTrace();

bSuccess = false;

}

return bSuccess;

}

public static void releaseConnection(){

try{

if(con!= null)

con.close();

}catch(SQLException e){

e.printStackTrace();

}

接着來看看歡迎界面吧·····很簡潔，偶不會美工

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>

<%@ page import="book.chat.table.*" %>

<%@ page import="book.chat.util.*" %>

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Welcome to chat!</title>

</head>

<body>

<tr>

<td colspan="2" align="center"><h3>簡單AJAX聊天室</h3></td>

</tr>

<tr>

<td width="200px" class="formPrompt">請輸入你的名字:</td>

</tr>

<tr>

<td class="formPrompt">請選擇你要進入的房間:</td>

<%=ChatUtil.renderChatroom()%>

</tr>

<tr>

</tr>

</body>

</html>

再來看看ChatUtil

package book.chat.util;

import java.sql.ResultSet;

import java.util.ArrayList;

import java.util.List;

import book.chat.table.Chat;

public class ChatUtil {

public static String renderChatroom(){

List result = new ArrayList();

String sql= "select * from chat";

ResultSet rs = DbManager.getResultSet(sql);

Chat chat = new Chat();

try{

while(rs.next()){

chat = new Chat(rs.getInt("CHAT_ID"));

result.add(chat);

}

}catch(Exception e){

e.printStackTrace();

}

StringBuffer buf = new StringBuffer();

buf.append("<select name="roomlist" size="5" class="textInput">");

for(int i=0;i<result.size();i++){

Chat c = (Chat)result.get(i);

buf.append("<option value=""+c.getChatID()+"">"+c.getChatName()+"</option>");

}

buf.append("</select>");

DbManager.releaseConnection();

return buf.toString();

}

接着是這個styles.css 只做了簡單的處理

/*設置顯示*/

.formPrompt{

font-family:Arial,Helvetica,sans-serif;

font-size:10pt;

color:#000000;

TEXT-ALIGN:right;

line-height:17pt;

while-space:nowrap;

}

/*設置輸入格式*/

.formInput{

font-family:Arial,Helvetica,sans-serif;

font-size:10pt;

color:#000000;

TEXT-ALIGN:left;

}

/*設置按鈕格式*/

.normalButton{

font-size:9pt;

font-family:Arial,Helvetica,Geneva,sans-serif;

BORDER-LEFT:#A0AAA0 1px solid;

BORDER-TOP:#A0AAA0 1px solid;

BORDER-RIGHT:#404440 1px solid;

BORDER-BOTTOM:#404440 1px solid;

}

ajax_chat.js 最核心的部分了。。。有註釋有詳細大家可以自己看了。。。

//聲明發送消息的XMLHttpRequest對象

var sendReq = createAjaxObj();

//聲明發送檢索消息的XMLHttpRequest對象

var receiveReq = createAjaxObj();

//設置上次取回的Message_ID

var lastMessage = 0;

//聲明setTimeout()的返回值

var mTimer;

//聊天室的ID

var chatId;

//用戶的id

var userId;

//startChat()方法:初始化全局變量後,每兩秒鐘向DB中發送一次請求

function startChat(){

//將焦點設置到消輸入框中

document.getElementById('txt_message').focus();

//調用initial()方法初始化chatId和userId變量

initial();

//調用getChatText()方法獲得消息

getChatText();

}

function initial(){

chatId = document.frmmain.cid.value;

userId = document.frmmain.uid.value;

}

//createAjaxObj()方法創建XMLHttpRequest對象

function createAjaxObj(){

var httprequest = false;

if(window.XMLHttpRequest)

{

//如果是Mozilla,Safari等瀏覽器

httprequest=new XMLHttpRequest()

if(httprequest.overrideMimeType)

httprequest.overrideMimeType('text/xml')

}else if(window.ActiverXObject)

{

//如果是IE瀏覽器

try{

httprequest=new ActiverXObject("Msxml2.XMLHTTP");

}catch(e){

try{

httprequest=new ActiverXObject("Microsoft.XMLHTTP");

}catch(e){

}

return httprequest;

}

//getChatText()向DB中發送請求,並獲得最新的消息

function getChatText(){

//判斷上次請求的狀態是否完成或者是還未發送請求

//alert("sdfsdfsdf");

if(receiveReq.readyState==4||receiveReq.readyState==0){

//發送獲得消息的服務器地址

var submitURL = "getMessage?chatId="+chatId+"&last="+lastMessage;

//建立請求

receiveReq.open("GET",submitURL,true);

//當請求狀態改變時調用handleReceiveChat

receiveReq.onreadystatechange=handleReceiveChat;

//發送請求

receiveReq.send(null);

}

//新請求的狀態改變時調用

function handleReceiveChat(){

//此時請求已經完成

if(receiveReq.readyState==4){

//獲得顯示消息的圖層元素對象

var chat_div=document.getElementById("div_chat");

//獲得返回後的XML文件

var xmldoc = receiveReq.responseXML;

//得到所有的新消息記錄

var message_nodes = xmldoc.getElementsByTagName("message");

var n_messages = message_nodes.length;

//alert(n_messages);

//循環每一條新消息,組織成HTML格式數據

for(var i=0;i<n_messages;i++){

var user_node = message_nodes[i].getElementsByTagName("user");

var text_node = message_nodes[i].getElementsByTagName("text");

var time_node = message_nodes[i].getElementsByTagName("time");

//alert(time_node[0].firstChild.nodeValue);

chat_div.innerHTML+='(<font class="chatUser">'+user_node[0].firstChild.nodeValue+'</font>) said at  ';

chat_div.innerHTML+='<font class="chatTime">'+time_node[0].firstChild.nodeValue+'</font><br />';

chat_div.innerHTML+='<span class="title">'+text_node[0].firstChild.nodeValue+'</span><br />';

chat_div.scrollTop = chat_div.scrollHeight;

//每循環一條消息,記錄到全局變量lastMessage中

lastMessage = (message_nodes[i].getAttribute('id'));

}

//獲取數據後,設置2秒鐘後再次調用getChatText()方法

mTimer = setTimeout('getChatText();',2000);

}

//sendChatText()方法向DB中添加消息記錄

function sendChatText(){

//如果輸入的消息爲空,提示用戶輸入

if(document.getElementById('txt_message').value==''){

alert("You have not entered a message");

return;

}

//判斷上次發送消息請求的狀態是否完成或是還未發送請求

if(sendReq.readyState == 4||sendReq.readyState == 0){

//保存消息的服務器地址

var submitURL="sendMessage?cid="+chatId+"&uid="+userId+"&msg="+document.getElementById('txt_message').value;

//建立請求連接

sendReq.open("POST",submitURL,true);

sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

//當請求狀態改變時調用handleSendChat()方法

sendReq.onreadystatechange = handleSendChat();

//發送請求

sendReq.send(null);

//設置提交消息文本框爲空

document.getElementById('txt_message').value='';

}

//請求狀態改變時調用handleSendChat()方法

function handleSendChat(){

//取消間隔獲取數據的方法

clearInterval(mTimer);

//從新獲取調用getChatText()方法

getChatText();

}

room.jsp 這就是聊天室的主頁面也很簡潔的·····

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>

<%@ page import="book.chat.table.*" %>

<%@ page import="book.chat.util.*" %>

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

//接收用戶請求中的username的值

String userName = request.getParameter("username");

//如果暱稱爲空,設置爲默認的用戶名

if(userName==null||userName.equals(""))

userName="Guest User";

//獲得請求中聊天室ID的值

String r = request.getParameter("roomlist");

//如果聊天室id爲空,則返回選擇聊天室頁面

if(r==null||r.equals("")){

RequestDispatcher dispatcher = request.getRequestDispatcher("welcome.jsp");

dispatcher.forward(request,response);

return;

}

int roomID = Integer.parseInt(r);

Chat room = new Chat(roomID);

User user = null;

//得到user表中的總的記錄數

int number = DbManager.getTotal("select user_id from user")+1;

//添加user表中的一條記錄

String insertSQL = "insert into user values(" + number + ",'" + userName + "',NOW())";

//執行SQL語句

DbManager.execute(insertSQL);

//釋放DB連接

DbManager.releaseConnection();

//初始化User對象

user = new User(number);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Welcome</title>

</script>

</head>

<h3>Welcome to

out.println(room.getChatName());

</h3>

</div>

</form>

</body>

</html>

刷新時獲得消息請求的處理

package book.chat.servlet;

import java.io.IOException;

import java.io.PrintWriter;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.util.ArrayList;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import book.chat.table.Message;

import book.chat.util.DbManager;

public class GetServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

doPost(request,response);

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

// 獲得請求參數中chatId參數的值

String chatID = request.getParameter("chatId");

//獲取請求參數中last參數的值

String lastID = request.getParameter("last");

//如果chatId爲空,則返回

if(chatID==null||chatID.equals(""))

return;

//如果lastID爲空則返回

if(lastID==null||lastID.equals(""))

return;

//定義保存查詢數據結果的向量

List result = new ArrayList();

//數據庫查詢語句,查詢message表

String sql = "select message_id from message where chat_id="+chatID+" and message_id >"+lastID;

try{

//聲明一個message對象

Message message =null;

//執行查詢語句,返回記錄集

ResultSet rs = DbManager.getResultSet(sql);

//循環記錄集,將DB中的數據添加到向量中

while(rs.next()){

message = new Message(rs.getInt("MESSAGE_ID"));

result.add(message);

}

}catch(SQLException e){

e.printStackTrace();

}

//關閉DB連接

DbManager.releaseConnection();

//設置返回類型爲XML格式

response.setContentType("text/xml");

PrintWriter out = response.getWriter();

//調用parasToXML()方法

out.print(parasToXML(result));

}

public String parasToXML(List list){

StringBuffer buf = new StringBuffer();

buf.append("<?xml version="1.0" encoding="utf-8"?>");

buf.append("<root>");

for(int i=0;i<list.size();i++){

Message message = (Message)list.get(i);

buf.append("<message id=""+message.getMessageID()+"">");

buf.append("<user>"+message.getUserName()+"</user>");

buf.append("<text>"+message.getMessage()+"</text>");

buf.append("<time>"+message.getPostTime()+"</time>");

buf.append("</message>");

}

buf.append("</root>");

return buf.toString();

}

發送消息請求的處理

package book.chat.servlet;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import book.chat.table.User;

import book.chat.util.DbManager;

public class SendServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

doPost(request,response);

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

//獲得請求中cid的值

String chatID = request.getParameter("cid");

//獲得請求中uid的值

String userID = request.getParameter("uid");

//獲得請求中msg的值

String msg = request.getParameter("msg");

//判斷都不爲空

if(chatID==null||chatID.equals(""))

return;

if(userID==null||userID.equals(""))

return;

if(msg==null||msg.equals(""))

return;

User user = new User(Integer.parseInt(userID));

//插入message表記錄的sql語句

String insertSQL = "insert into message(chat_id,user_id,user_name,message,post_time) values("+chatID+","+

user.getUserID()+",'"+user.getUserName()+"','"+msg+"',NOW())";

//執行SQL

DbManager.execute(insertSQL);

}

最後一個了web.xml的配置希望大家有個好心情················@_@

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.4"

xmlns="http://java.sun.com/xml/ns/j2ee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee

http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

<servlet-name>getMessage</servlet-name>

<servlet-class>book.chat.servlet.GetServlet</servlet-class>

</servlet>

<servlet-name>sendMessage</servlet-name>

<servlet-class>book.chat.servlet.SendServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>getMessage</servlet-name>

<url-pattern>/getMessage</url-pattern>

</servlet-mapping>

<servlet-mapping>

<servlet-name>sendMessage</servlet-name>

<url-pattern>/sendMessage</url-pattern>

</servlet-mapping>

</web-app>

ajax實現的聊天室程序

servlet基礎(Tomcat的配置和應用的建立)

nqueen問題

servlet生命週期

哲學家進餐的問題

Blog第一帖

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結