JavaWeb 最简单的聊天室设计

2017-11-26 19:05:13来源:CSDN作者:larger5人点击

分享

一、前沿

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

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

希望对大家有启发!!

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台