JavaWeb 最简单的聊天室设计

来源：互联网发布：贝叶斯算法的应用编辑：程序博客网时间：2024/05/21 06:23

一、前沿

设计一个简单的聊天室，是很多同学感兴趣的项目，网上应该也有很多教程，但是代码量都比较多、读起来不是很容易明白到底是怎么一回事，其实，笔者认为，只要大家了解最核心部位的代码（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类了。

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

希望对大家有启发！！

阅读全文

1 0