使用 Servlet+jQuery+MySQL 实现简单的聊天室

一、前沿

设计一个简单的聊天室，是很多同学感兴趣的项目，网上应该也有很多教程，但是代码量都比较多、读起来不是很容易明白到底是怎么一回事，其实，笔者认为，只要大家了解最核心部位的代码（jQuery包装好的Ajax技术）要怎么写就好了，其他的内容都是来源于基础的JavaWeb知识，自己再细心地去优化就好了。
下面笔者就写一个超简单的聊天室，希望对大家有帮助~

二、功能介绍

打开两个页面，都是这个项目这个页面，在第一个页面输进去的信息，按下回车键，在第二个页面就能立即显示最新信息，第二个页面输进去的信息，在第一个也页面同理也可以看到最新的信息。

三、代码结构与解释

四、代码与注释

①index.jsp 主界面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<% 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>
<base href="<%=basePath%>">
<title>我的聊天室</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript"> $(function() { $("#cin").keypress(function(evebt) { if (evebt.keyCode == 13) {//按下回车键（keyCode=13）来发送信息，同时保存到数据库中 var message = $.trim(this.value); $.post("s1", { "message" : message }); this.value = ""; } }) askForNew(); function askForNew() { $.post("s2", { "ss" : "ss" }, function(data) { $("#cout").empty(); for (var i = 0; i < data.length; i++) { $("#cout").append("<div>" + data[i] + "</div>"); } }, "json"); setTimeout(askForNew,1000); //之所以能在另一个页面立即显示最新的信息，就是这里一直在查数据库的数据并把它显示到页面上 } }); </script>
<link rel="stylesheet" type="text/css" href="style/css.css" />
</head>
<body>
       <h2>聊天内容</h2>
       <div id="cout"></div>
       <br>
       <h2>输入信息</h2>
       <textarea id="cin"></textarea>
       <script type="text/javascript"></script>
</body>
</html>

②Cin.java 处理输进去的信息的 Servlet

package mycin;
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Cin extends HttpServlet {
       // 代号s1：负责把cin文本框的内容保存到数据库
       public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
              try {
                     String message = request.getParameter("message");  //获取jQuery那个 $.post 里面的~
                     System.out.println(message);
                     Class.forName("com.mysql.jdbc.Driver");
                     Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/car", "root", "123");
                     String sql = "INSERT INTO talk(message) VALUE(?)";
                     PreparedStatement stat = conn.prepareStatement(sql);
                     stat.setString(1, message);
                     int rs = stat.executeUpdate();
                     if (rs == 1) {
                           System.out.println("插入成功");
                     } else {
                           System.out.println("插入失败");
                     }
              } catch (ClassNotFoundException e) {
                     e.printStackTrace();
              } catch (SQLException e) {
                     e.printStackTrace();
              }
       }
}

③Cout.java 处理要显示的信息的 Servlet

package mycin;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
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 com.google.gson.Gson;
public class Cout extends HttpServlet {
       // 代号s2:负责包数据库的信息转项cout文本框
       public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
              try {
                     String message = request.getParameter("message");
                     System.out.println(message);
                     Class.forName("com.mysql.jdbc.Driver");
                     Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/car", "root", "123");
                     String sql = "SELECT * FROM talk";
                     Statement stat = conn.createStatement();
            ResultSet rs =stat.executeQuery(sql);
                     List<String> list = new ArrayList<>();
                     while (rs.next()) {
                           String cin = rs.getString("message");
                           System.out.println(cin);
                           list.add(cin);
                     }
                     Gson gson = new Gson();
                     String json = gson.toJson(list); //万能语句~
                     // 4.将JSON字符串作为响应数据返回
                     response.setContentType("text/json;charset=UTF-8");
                     PrintWriter writer = response.getWriter();
                     writer.write(json);
              } catch (ClassNotFoundException e) {
                     e.printStackTrace();
              } catch (SQLException e) {
                     e.printStackTrace();
              }
       }
}

④css 样式，其实也没什么东西，为了清晰显示核心代码，美化方面交给大家，

@CHARSET "UTF-8";
textarea { height: 150px; width: 300px; }
h2{ color: yellowgreen; }
#cout{ overflow: scroll; overflow-x:hiden; height: 200px; width: 300px; }

⑤由于篇幅的原因，web.xml 就省略了，其实使用了注解都不用配置了，eclipse和Myclipse都可以直接new一个Servlet，new完之后，已经帮你注解或配置好了。

三、优化方面的
①：下拉框没有到最低，界面不是很美观
②：注册数据库驱动后没有释放资源，容易因为内存问题而是服务器崩溃
③：没有使用数据库连接池，不能很好地提高性能
④：每条聊天记录没有显示时间等，若每条聊天记录包含的内容多了，就要新建一个JavaBean类了。

以上是几点优化建议，但是对于新手而言，徒增阅读的难度，笔者就省略掉了。

希望对大家有启发！！

更多相关文章

随机推荐