主頁 > 後端開發 > ajax在線咨詢

ajax在線咨詢

2020-10-24 01:53:50 後端開發

之前聽說過別人使用ajax制作一個在線聊天室,對ajax也不熟悉,但是最近有一個需求,做一個在線咨詢,也去網上查過n次資料,下過檔案,但是一直找不到我想要的,花費了三天終于是做完了,也沒寫過博客,解決了問題,現在記錄一下,
技術上用的是jsp+servlet+ajax,

資料庫

資料庫用到4張表,用戶表,客服表,用戶咨詢表,聊天記錄表,用戶狀態有3個狀態,分別為1,2,3,分別代表在線,請求咨詢,正在咨詢,

1、用戶user表,主要欄位有username,pwd,status;
2、客服表contact主要欄位有contactname,pwd;
3、用戶咨詢表record_user欄位有recordid,username;
4、聊天記錄表record_content欄位有recordid,username,usercontent,contactname,contactcontent,tim,
每張表的主鍵為id,用戶表和客服表中的pwd主要是用來登錄用,

設計思路
1、一個用戶只有一個咨詢號,用戶第一次點擊咨詢的時候,添加咨詢號,如果用戶 有咨詢號,那么無需添加咨詢號,

2、客服端首頁將用戶處于2,3狀態的用戶展示出來,每10秒進行重繪一次界面,將2狀態的前端展示位請求咨詢,3狀態的展示位正在咨詢,正在咨詢的顏色為黃色,請求咨詢的顏色為紅色,點擊紅色可進入聊天,點擊黃色彈出彈窗顯示已有客服正在服務,

3、用戶進入咨詢界面或每發一次資訊狀態都變為2,客服進入咨詢界面或,每發一次資訊狀態都為3,

4、咨詢界面,用戶在左邊,客服在右邊,按照時間先后來排列,

sql="select * from record_content where recordid=? order by tim";

前端界面
在這里插入圖片描述
前端css樣式

<style type="text/css">
				*{
					margin:0;
					padding:0;
				}
			.one{
				background:#fff;
				margin-left:30%;
				width:510px;
				height:380px;				
				overflow-y:auto;
				overflow-x:none;
			}
			.title{
				margin-top:5px;
				text-align:center;
				margin-bottom:0px
			}
			.line{
				margin-top:5px;
				margin-bottom:5px;
			}
			.userContent{
				background:#00BFFF;
				margin-left:10px;				
				max-width:335px;
				min-height:40px;
				max-height:180px;
				color:#fff;
				line-height:40px;				
				border-radius:5px;
			}			
			.contactInfo{
				text-align:right;
				margin-bottom:0px;				
			}
			.contactContent{
				background:	#00FA9A;
				margin-left:157px;
				width:335px;
				min-height:40px;
				color:#fff;
				line-height:40px;
				max-height:180px;
				border-radius:5px;
			}
			.chat{
				margin-bottom:-1px;				
				margin-top:40px;
				overflow-y:auto;
				margin-left:30%;
				margin-top:5px;
				background:#fff;
				width:500px;
			}
			.input{
				width:380px;
				height:30px;
				margin-left:15px;
				border-radius:5px;
				border:1px blue solid;
			}
			.send{
				margin-left:15px;
				height:29px;
				width:75px;
				color:#fff;	
				border-radius:5px;		
			}
			.recordid{
				display:none;
			}
			.header{
				width:510px;
				height:20px;
				background:#fff;
				margin-left:30%;
			}
		</style>

前端body樣式

<div class="header">
			<h5 class="title">客服咨詢</h5><span class="recordid" id="recordid">${recordid }</span>
			<hr class="line">
		</div>
		<div class="one" id="one">
			
			<!-- <div class="user">
				<span class="userInfo"><span id="username">張三</span> 2020-10-14 09:29:33</span>
				<div class="userContent">你好</div>
			</div>
			<div class="contact">
				<p class="contactInfo">李四 2020-10-14 09:30:33</p>
				<div class="contactContent">你好</div>
			</div>	 -->			
			
		</div>
		<div class="chat">				
			<input type="text" class="input" id="input">
			<button class="send" id="send" onclick="send()">發送</button>				
		</div>

這里先將主體樣式注釋掉,后面內容用ajax添加,
前端js

<script type="text/javascript">		
			window.onload=function(){				
				var jsonString = '${beans}';
				var jsonObject = JSON.parse(jsonString);
				for(var i=0;i<jsonObject.length;i++){
					if(jsonObject[i].usernam!=null){
						$(".one").append(
								"<div class='user'><span class='userInfo'><span>"
								+jsonObject[i].usernam+
								"&nbsp;</span>"
								+jsonObject[i].tim+
								"</span><div class='userContent'>"
								+jsonObject[i].userContent+
								"</div></div>");
					}else{
						$(".one").append(
								"<div class='contact'><p class='contactInfo'>"
								+jsonObject[i].contactnam+"&nbsp;"+jsonObject[i].tim+
								"</p><div class='contactContent'>"
								+jsonObject[i].contactContent+
								"</div></div>");
					}
					
				}
				 document.getElementById("one").scrollTop=document.getElementById("one").scrollHeight;
				
			} 
		</script>
		<script type="text/javascript">
	   window.setInterval("refresh()",2000);//2秒執行一次,重繪功能 
		function refresh(){//用于追加新發的訊息
			$.ajax({
				type:"post",
				url:"lianXiKeFuHistoryServlet",
				contentType: "application/json;charset=utf-8",	
				success:function(data){
					/* alert(data); */
					console.log(data);
					var jsonString = data;
					var jsonObject = JSON.parse(jsonString);					
					for(var i=0;i<jsonObject.length;i++){
						
						if(jsonObject[i].usernam!=null){
							$(".one").append(
									"<div class='user'><span class='userInfo'><span>"
									+jsonObject[i].usernam+
									"&nbsp;</span>"
									+jsonObject[i].tim+
									"</span><div class='userContent'>"
									+jsonObject[i].userContent+
									"</div></div>");
						}else{
							$(".one").append(
									"<div class='contact'><p class='contactInfo'>"
									+jsonObject[i].contactnam+"&nbsp;"+jsonObject[i].tim+
									"</p><div class='contactContent'>"
									+jsonObject[i].contactContent+
									"</div></div>");
						}
					} 
				},
				error:function(e){
					console.log("失敗");
				}
						
			})
			 document.getElementById("one").scrollTop=document.getElementById("one").scrollHeight;
		}
		</script>
		<script type="text/javascript">
			window.setInterval("run()",500);//0.5秒執行一次 
			function run(){
				var input=document.getElementById("input").value;
				var send=document.getElementById("send");
				if(input==""){
					send.style.backgroundColor="#ddd";
					send.disabled=true;//設定不可點擊
				}else{
					send.style.backgroundColor="blue";
					send.disabled=false;//設定可點擊
				}				
			}
		</script>
		<script type="text/javascript">
			function send(){//發資訊,使用ajax,異步處理
				var input=document.getElementById("input").value;
				var input1=document.getElementById("input");
				var recordid=document.getElementById("recordid").innerText;
				
				$.ajax({
					type:"post",
					url:"addLianXiKeFuServlet?userContent="+input+"&recordid="+recordid,
					contentType: "application/json;charset=utf-8",
					success:function(data){
						input1.value="";//發送成功之后,input的值變為空
						/* refresh(); */
					},
					error:function(e){
						alert("發送失敗");
					}
				})
			} 
		</script>

當聊天窗內的訊息過多時,聊天框會溢位界面,所以聊天窗css樣式添加:

overflow-y:auto;
overflow-x:none;

每次進入聊天界面滾動條都在最上面,用戶體驗不好,于是設計每次進入,聊天窗滾動條在最下面,

document.getElementById("one").scrollTop=document.getElementById("one").scrollHeight;

輸入框為空時,訊息不能發送,按鈕為灰色,每0.5秒檢測一次,輸入框不為空,則按鈕變為藍色,界面每2秒重繪一次,時間重繪的太短,可能會一下子刷出幾條資料出來,
ajax使用Jquery的相對要簡單方便一些,可以使用json傳也可以使用拼接字串,但是使用json傳注意一定要加上:

contentType: "application/json;charset=utf-8"

防止后端接收到的是亂碼,

后端物體類
用戶物體類userBean,在這里只要注意username,pwd,status,

package Bean;

public class userBean {
	private int id;
	private String usernam;
	private String telephone;
	private String sex;
	private String pwd;
	private String age;
	private String description;
	private String status;
	
	public userBean(int id, String usernam, String telephone, String sex, String pwd, String age,String description) {
		this.id = id;
		this.usernam = usernam;
		this.telephone = telephone;
		this.sex = sex;
		this.pwd = pwd;
		this.age = age;
	}
	public userBean(int id, String usernam, String telephone, String sex,String age,String description) {
		this.id = id;
		this.usernam = usernam;
		this.telephone = telephone;
		this.sex = sex;
		this.age = age;
		this.description=description;
		
	}
	public userBean(int id, String telephone, String sex,String age,String description) {
		this.id = id;
		this.telephone = telephone;
		this.sex = sex;
		this.age = age;
		this.description=description;
		
	}
	public userBean(String usernam, String telephone, String sex, String age,String description) {
		this.usernam = usernam;
		this.telephone = telephone;
		this.sex = sex;
		this.description=description;
		this.age = age;
	}
	
	
	public userBean(String usernam, String pwd) {
		this.usernam=usernam;
		this.pwd=pwd;
	}

	public userBean(String usernam) {
		this.usernam=usernam;
	}
	
	public userBean(int id) {
		// TODO Auto-generated constructor stub
		this.id=id;
	}
	public userBean(int id, String telephone, String sex, String age) {
		// TODO Auto-generated constructor stub
		this.id = id;
		this.telephone = telephone;
		this.sex = sex;
		this.age = age;
	}
	public userBean(int id, String usernam, String status) {
		// TODO Auto-generated constructor stub
		this.id=id;
		this.usernam=usernam;
		this.status=status;
	}
	
	public String getStatus() {
		return status;
	}
	public void setStatus(String status) {
		this.status = status;
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getUsernam() {
		return usernam;
	}
	public void setUsernam(String usernam) {
		this.usernam = usernam;
	}
	public String getTelephone() {
		return telephone;
	}
	public void setTelephone(String telephone) {
		this.telephone = telephone;
	}
	public String getSex() {
		return sex;
	}
	public void setSex(String sex) {
		this.sex = sex;
	}
	public String getPwd() {
		return pwd;
	}
	public void setPwd(String pwd) {
		this.pwd = pwd;
	}
	public String getAge() {
		return age;
	}
	public void setAge(String age) {
		this.age = age;
	}
	public String getDescription() {
		return description;
	}
	public void setDescription(String description) {
		this.description = description;
	}
	
}

客服物體類contactBean,這里只要注意contactname,pwd,

package Bean;

public class contactBean {
	private int id;
	private String contactnam;
	private String telephone;
	private String sex;
	private String pwd;
	private String age;
	private String description;
	public contactBean(String contactnam, String telephone, String sex, String pwd, String age) {
		this.contactnam = contactnam;
		this.telephone = telephone;
		this.sex = sex;
		this.pwd = pwd;
		this.age = age;
	}

	public contactBean(String contactnam, String pwd) {
		// TODO Auto-generated constructor stub
		this.contactnam = contactnam;
		this.pwd = pwd;
	}
	public contactBean(int id, String contactnam, String telephone) {
		// TODO Auto-generated constructor stub
		this.id=id;
		this.contactnam = contactnam;
		this.telephone = telephone;
	}

	public contactBean(String contactnam) {
		// TODO Auto-generated constructor stub
		this.contactnam=contactnam;
	}

	public contactBean(int id, String contactnam, String telephone, String sex, String age, String description) {
		// TODO Auto-generated constructor stub
		this.id=id;
		this.contactnam = contactnam;
		this.telephone = telephone;
		this.sex = sex;		
		this.age = age;
		this.description=description;
	}

	public contactBean(int id2, String telephone2, String sex2, String age2, String description2) {
		// TODO Auto-generated constructor stub
		this.id=id2;
		this.telephone=telephone2;
		this.sex=sex2;
		this.age=age2;
		this.description=description2;
	}

	public contactBean(int id, String contactnam, String telephone, String sex, String pwd, String age,
			String description) {
		// TODO Auto-generated constructor stub
		this.id=id;
		this.contactnam = contactnam;
		this.telephone = telephone;
		this.sex = sex;	
		this.pwd=pwd;
		this.age = age;
		this.description=description;
	}

	public contactBean(String contactnam2, String telephone2, String sex2, String age2) {
		// TODO Auto-generated constructor stub
		this.contactnam = contactnam2;
		this.telephone = telephone2;
		this.sex = sex2;		
		this.age = age2;
	}

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getContactnam() {
		return contactnam;
	}

	public void setContactnam(String contactnam) {
		this.contactnam = contactnam;
	}

	public String getTelephone() {
		return telephone;
	}

	public void setTelephone(String telephone) {
		this.telephone = telephone;
	}

	public String getSex() {
		return sex;
	}

	public void setSex(String sex) {
		this.sex = sex;
	}

	public String getPwd() {
		return pwd;
	}

	public void setPwd(String pwd) {
		this.pwd = pwd;
	}

	public String getAge() {
		return age;
	}

	public void setAge(String age) {
		this.age = age;
	}

	public String getDescription() {
		return description;
	}

	public void setDescription(String description) {
		this.description = description;
	}
	
	
}

用戶咨詢物體類recordUserBean,

package Bean;

public class recordUserBean {
	private int id;
	private String recordid;
	private String usernam;
	
	public recordUserBean(int id, String recordid, String usernam) {
		// TODO Auto-generated constructor stub
		this.id=id;
		this.recordid=recordid;
		this.usernam=usernam;
	}
	public recordUserBean() {
		// TODO Auto-generated constructor stub
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getRecordid() {
		return recordid;
	}
	public void setRecordid(String recordid) {
		this.recordid = recordid;
	}
	public String getUsernam() {
		return usernam;
	}
	public void setUsernam(String usernam) {
		this.usernam = usernam;
	}	
}

聊天記錄物體類recordContentBean,

package Bean;

public class recordContentBean {
	private int id;
	private String recordid;
	private String usernam;
	private String contactnam;
	private String userContent;
	private String contactContent;
	private String tim;
		
	public recordContentBean(int id, String recordid, String usernam, String contactnam, String userContent,
			String contactContent,String tim) {		
		this.id = id;
		this.recordid = recordid;
		this.usernam = usernam;
		this.contactnam = contactnam;
		this.userContent = userContent;
		this.contactContent = contactContent;
		this.tim=tim;
	}
	
	public String getTim() {
		return tim;
	}

	public void setTim(String tim) {
		this.tim = tim;
	}

	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getRecordid() {
		return recordid;
	}
	public void setRecordid(String recordid) {
		this.recordid = recordid;
	}
	public String getUsernam() {
		return usernam;
	}
	public void setUsernam(String usernam) {
		this.usernam = usernam;
	}
	public String getContactnam() {
		return contactnam;
	}
	public void setContactnam(String contactnam) {
		this.contactnam = contactnam;
	}
	public String getUserContent() {
		return userContent;
	}
	public void setUserContent(String userContent) {
		this.userContent = userContent;
	}
	public String getContactContent() {
		return contactContent;
	}
	public void setContactContent(String contactContent) {
		this.contactContent = contactContent;
	}		
}

控制器servlet
用戶端,需要四個servlet,分別是登錄servlet;進入聊天界面,將用戶的聊天記錄加載到前端界面的servlet,添加聊天記錄的servlet,每兩秒重繪一次界面的servlet,這里就不說登錄的了,說一下聊天的servlet,

1、將用戶的聊天記錄加載到前端界面的控制器:headLianXiKeFuServlet,上代碼!

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=UTF-8");
		
		String usernam=(String)request.getSession().getAttribute("userSession");			
		
		Date d=new Date();
		SimpleDateFormat df = new SimpleDateFormat("yyyyMMddhhmmss");//以時間作為咨詢id
		String recordid=null;		
		
		//一個用戶只有一個咨詢視窗,也就是說只有一個咨詢號,創建一個之后,以后重新打開就不會重新創建
		//先查詢資料庫中record是否有用戶,如果有則無需創建,如果沒有,則創建咨詢號
		lianXiDao dao=new lianXiDao();
		
		if (dao.queryUser(usernam)) {//如果表中沒有資料,那么添加一個咨詢號
			System.out.print("已有咨詢號");
		}else {
			recordid=df.format(d);
			if (dao.addRecord(recordid, usernam)) {//添加成功
				System.out.print("咨詢號添加成功!");
			}else {
				System.out.print("咨詢號添加失敗!");
			}
		}
				
		recordUserBean bean=dao.queryRecordid(usernam);
		recordid=bean.getRecordid();		
		
		List<recordContentBean> beans=new ArrayList<>();	
		beans=dao.queryRecordHistroy(recordid);//界面重繪
		
		Gson gson = new Gson();
        String beans1 = gson.toJson(beans);  //將List轉化為Json資料
        
        //當用戶進入界面后,狀態變為2
        dao.updateStatus("2", usernam);
        
        
		request.setAttribute("beans", beans1);
		response.getWriter().write(beans1);
		request.setAttribute("recordid", recordid);
		request.getRequestDispatcher("lianXiKeFu.jsp").forward(request, response);
	}

2、添加聊天記錄的控制器:addLianXiKeFuServlet,上代碼!

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=UTF-8");
		
		String usernam=(String)request.getSession().getAttribute("userSession");
		String recordid=request.getParameter("recordid");
		String userContent=request.getParameter("userContent");
		String msg=null;
		
		Date d=new Date();
		SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//時間
		String tim=df.format(d);		
		
		lianXiDao dao=new lianXiDao();
		
		//防止客服離開聊天界面之后,狀態變為其他狀態,故每次發送訊息,狀態都為2 		
		dao.updateStatus("2", usernam);
		
		if (dao.addRecordContent(recordid, usernam,userContent, tim)) {			
			msg="ok";
		}else {
			System.out.print("咨詢失敗");
			msg="no";
		}		
	}

3、前端每兩秒重繪一次界面的控制器:lianXiUpdateServlet,上代碼!

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=UTF-8");
		
		String usernam=(String)request.getSession().getAttribute("userSession");		
		lianXiDao dao=new lianXiDao();
		
		recordUserBean bean=dao.queryRecordid(usernam);
		String recordid=bean.getRecordid();
		
		
		List<recordContentBean> beans=new ArrayList<>();	
		beans=dao.queryRecord_5(recordid);//重繪界面
		
		Gson gson = new Gson();
        String beans1 = gson.toJson(beans);  //將List轉化為Json資料
       
		response.getWriter().write(beans1);
}

ajax請求servlet回傳前端json資料用的是:

response.getWriter().write();

前端決議json是:

var jsonObject = JSON.parse(data);

ajax請求之后,控制器訪問dao層,dao層訪問底層until,底層訪問資料庫,

注意事項
1、訪問資料庫之后一定要關閉連接,因為每兩秒重繪一次界面,不關閉連接會對資料庫造成巨大負荷,沒一會就會給你報錯,

2、控制器回傳json資料,dao層回傳的List是Object型別的,前端js不能決議,所以要在后端進行決議,決議需要用到jar包,我用的jar包為gson.jar,

3、java在線時間的模板:yyyy-MM-dd HH:mm:ss,當小時為H時,為24小時制,當為h時為12小時制,我在設計的時候,早上還可以正常運行的,到了下午卻運行不出來了,找了半天問題,最后看到資料庫的時間記錄,下午15點結果變為3點,這樣就導致發的資訊刷不出來,

Dao層
lianxiDao

package Dao;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.mysql.jdbc.Statement;

import Bean.recordContentBean;
import Bean.recordUserBean;
import Bean.userBean;
import Until.DBUtil;

public class lianXiDao {
	DBUtil dbUtil=new DBUtil();
	ResultSet rs=null;
	String sql=null;
	
	public boolean queryUser(String usernam) {//查詢record_user表中是否有用戶的咨詢號
		sql="select * from record_user where usernam=?";		
		Object[] params= {usernam};		
		return dbUtil.isExcut(sql, params);
	}
	public boolean updateStatus(String status,String usernam) {//改變用戶狀態
		sql="update user set status=? where usernam=?";		
		Object[] params= {status,usernam};		
		return dbUtil.queryExecuteUpdate(sql, params);
	}
	public boolean addRecord(String recordid,String usernam) {//在record_user表中添加咨詢號
		sql="insert into record_user(recordid,usernam) values(?,?)";		
		Object[] params= {recordid,usernam};		
		return dbUtil.queryExecuteUpdate(sql, params);
	}
	public recordUserBean queryRecordid(String usernam) {//查詢表中的資料
		sql="select * from record_user where usernam=?";
		Object[] params= {usernam};
		recordUserBean bean = null;
		rs=dbUtil.queryExecutQuery(sql, params);
		try {
			while(rs.first()) {			
				bean=new recordUserBean(rs.getInt("id"),rs.getString("recordid"),rs.getString("usernam"));
				break;
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			dbUtil.closeAll(rs, (Statement)dbUtil.pstmt, dbUtil.connection);
		}
		return  bean;
	}
	public boolean addRecordContent(String recordid,String usernam,String userContent,String tim) {//在record_user表中添加咨詢號--用戶
		sql="insert into record_content(recordid,usernam,userContent,tim) values(?,?,?,?)";		
		Object[] params= {recordid,usernam,userContent,tim};		
		return dbUtil.queryExecuteUpdate(sql, params);
	} 
	public boolean addRecordContentByContact(String recordid,String conatctnam,String conatctContent,String tim) {//在record_user表中添加咨詢號--客服
		sql="insert into record_content(recordid,contactnam,contactcontent,tim) values(?,?,?,?)";		
		Object[] params= {recordid,conatctnam,conatctContent,tim};
		return dbUtil.queryExecuteUpdate(sql, params);
	} 
	public List<recordContentBean>queryRecord_5(String recordid) {//每秒重繪資料
		sql="select * from record_content where recordid=? and tim >= now()-interval 2.3 second;";
		Object[] params= {recordid};
		recordContentBean bean = null;
		List<recordContentBean> beans=new ArrayList<>();
		rs=dbUtil.queryExecutQuery(sql, params);
		try {
			while(rs.next()) {
				bean=new recordContentBean(rs.getInt("id"),rs.getString("recordid"),rs.getString("usernam"),rs.getString("contactnam"),
						rs.getString("usercontent"),rs.getString("contactcontent"),rs.getString("tim"));
				beans.add(bean);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			dbUtil.closeAll(rs, (Statement)dbUtil.pstmt, dbUtil.connection);
		}
		return  beans;
	}
	public List<recordContentBean>queryRecordHistroy(String recordid) {//查詢歷史聊天記錄
		sql="select * from record_content where recordid=? order by tim";
		Object[] params= {recordid};
		recordContentBean bean = null;
		List<recordContentBean> beans=new ArrayList<>();
		rs=dbUtil.queryExecutQuery(sql, params);
		try {
			while(rs.next()) {
				bean=new recordContentBean(rs.getInt("id"),rs.getString("recordid"),rs.getString("usernam"),rs.getString("contactnam"),
						rs.getString("usercontent"),rs.getString("contactcontent"),rs.getString("tim"));
				beans.add(bean);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			dbUtil.closeAll(rs, (Statement)dbUtil.pstmt, dbUtil.connection);
		}
		return  beans;
	}
	public List<userBean>queryUserByContact() {//查詢處于2,3狀態的用戶
		sql="select * from user where status=2";
		Object[] params= {};
		userBean bean = null;
		List<userBean> beans=new ArrayList<>();
		rs=dbUtil.queryExecutQuery(sql, params);
		try {
			while(rs.next()) {
				bean=new userBean(rs.getInt("id"),rs.getString("usernam"),rs.getString("status"));
				beans.add(bean);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			dbUtil.closeAll(rs, (Statement)dbUtil.pstmt, dbUtil.connection);
		}
		return  beans;
	}
	public List<recordContentBean>queryRecordHistroy1(String recordid,String contactnam) {//客服進入聊天界面,查詢歷史聊天記錄
		sql="select * from record_content where recordid=? or contactnam=? order by tim";
		Object[] params= {recordid,contactnam};
		recordContentBean bean = null;
		List<recordContentBean> beans=new ArrayList<>();
		rs=dbUtil.queryExecutQuery(sql, params);
		try {
			while(rs.next()) {
				bean=new recordContentBean(rs.getInt("id"),rs.getString("recordid"),rs.getString("usernam"),rs.getString("contactnam"),
						rs.getString("usercontent"),rs.getString("contactcontent"),rs.getString("tim"));
				beans.add(bean);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			dbUtil.closeAll(rs, (Statement)dbUtil.pstmt, dbUtil.connection);
		}
		return  beans;
	}
	
}

查詢兩秒內資料庫增加的資料:

select * from 表 where 時間欄位> now()-interval 2 second;

客服聊天界面
基本上和用戶的一樣,加一個每10秒重繪界面的:

<meta http-equiv="refresh" content="10"><!-- 界面每30秒重繪一次 -->

用戶狀態:

		<script type="text/javascript">
			var statu=document.getElementsByClassName("statu");
			var a=document.getElementsByClassName("a");
			for(var i=0;i<statu.length;i++){
				if(statu[i].innerText=="2"){//狀態為2
					statu[i].style.backgroundColor="red";
					statu[i].innerText="請求咨詢";
					statu[i].style.color="#fff";											
				}else{//狀態為3
					statu[i].style.backgroundColor="yellow";
					statu[i].innerText="正在咨詢";	
					a.href="#";
				}
			}
		</script>

客服端基本上和用戶端差不多,只不過對資料庫操作有一些不同,如果想了解更多,可以評論,或者咨詢我,

轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/188141.html

標籤:python

上一篇:關于WEB-INF的訪問

下一篇:npm install -g --save --save-dev 比較

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • 【C++】Microsoft C++、C 和匯編程式檔案

    ......

    uj5u.com 2020-09-10 00:57:23 more
  • 例外宣告

    相比于斷言適用于排除邏輯上不可能存在的狀態,例外通常是用于邏輯上可能發生的錯誤。 例外宣告 Item 1:當函式不可能拋出例外或不能接受拋出例外時,使用noexcept 理由 如果不打算拋出例外的話,程式就會認為無法處理這種錯誤,并且應當盡早終止,如此可以有效地阻止例外的傳播與擴散。 示例 //不可 ......

    uj5u.com 2020-09-10 00:57:27 more
  • Codeforces 1400E Clear the Multiset(貪心 + 分治)

    鏈接:https://codeforces.com/problemset/problem/1400/E 來源:Codeforces 思路:給你一個陣列,現在你可以進行兩種操作,操作1:將一段沒有 0 的區間進行減一的操作,操作2:將 i 位置上的元素歸零。最終問:將這個陣列的全部元素歸零后操作的最少 ......

    uj5u.com 2020-09-10 00:57:30 more
  • UVA11610 【Reverse Prime】

    本人看到此題沒有翻譯,就附帶了一個自己的翻譯版本 思考 這一題,它的第一個要求是找出所有 $7$ 位反向質數及其質因數的個數。 我們應該需要質數篩篩選1~$10^{7}$的所有數,這里就不慢慢介紹了。但是,重讀題,我們突然發現反向質數都是 $7$ 位,而將它反過來后的數字卻是 $6$ 位數,這就說明 ......

    uj5u.com 2020-09-10 00:57:36 more
  • 統計區間素數數量

    1 #pragma GCC optimize(2) 2 #include <bits/stdc++.h> 3 using namespace std; 4 bool isprime[1000000010]; 5 vector<int> prime; 6 inline int getlist(int ......

    uj5u.com 2020-09-10 00:57:47 more
  • C/C++編程筆記:C++中的 const 變數詳解,教你正確認識const用法

    1、C中的const 1、區域const變數存放在堆疊區中,會分配記憶體(也就是說可以通過地址間接修改變數的值)。測驗代碼如下: 運行結果: 2、全域const變數存放在只讀資料段(不能通過地址修改,會發生寫入錯誤), 默認為外部聯編,可以給其他源檔案使用(需要用extern關鍵字修飾) 運行結果: ......

    uj5u.com 2020-09-10 00:58:04 more
  • 【C++犯錯記錄】VS2019 MFC添加資源不懂如何修改資源宏ID

    1. 首先在資源視圖中,添加資源 2. 點擊新添加的資源,復制自動生成的ID 3. 在解決方案資源管理器中找到Resource.h檔案,編輯,使用整個專案搜索和替換的方式快速替換 宏宣告 4. Ctrl+Shift+F 全域搜索,點擊查找全部,然后逐個替換 5. 為什么使用搜索替換而不使用屬性視窗直 ......

    uj5u.com 2020-09-10 00:59:11 more
  • 【C++犯錯記錄】VS2019 MFC不懂的批量添加資源

    1. 打開資源頭檔案Resource.h,在其中預先定義好宏 ID(不清楚其實ID值應該設定多少,可以先新建一個相同的資源項,再在這個資源的ID值的基礎上遞增即可) 2. 在資源視圖中選中專案資源,按F7編輯資源檔案,按 ID 型別 相對路徑的形式添加 資源。(別忘了先把檔案拷貝到專案中的res檔案 ......

    uj5u.com 2020-09-10 01:00:19 more
  • C/C++編程筆記:關于C++的參考型別,專供新手入門使用

    今天要講的是C++中我最喜歡的一個用法——參考,也叫別名。 參考就是給一個變數名取一個變數名,方便我們間接地使用這個變數。我們可以給一個變數創建N個參考,這N + 1個變數共享了同一塊記憶體區域。(參考型別的變數會占用記憶體空間,占用的記憶體空間的大小和指標型別的大小是相同的。雖然參考是一個物件的別名,但 ......

    uj5u.com 2020-09-10 01:00:22 more
  • 【C/C++編程筆記】從頭開始學習C ++:初學者完整指南

    眾所周知,C ++的學習曲線陡峭,但是花時間學習這種語言將為您的職業帶來奇跡,并使您與其他開發人員區分開。您會更輕松地學習新語言,形成真正的解決問題的技能,并在編程的基礎上打下堅實的基礎。 C ++將幫助您養成良好的編程習慣(即清晰一致的編碼風格,在撰寫代碼時注釋代碼,并限制類內部的可見性),并且由 ......

    uj5u.com 2020-09-10 01:00:41 more
最新发布
  • Rust中的智能指標:Box<T> Rc<T> Arc<T> Cell<T> RefCell<T> Weak

    Rust中的智能指標是什么 智能指標(smart pointers)是一類資料結構,是擁有資料所有權和額外功能的指標。是指標的進一步發展 指標(pointer)是一個包含記憶體地址的變數的通用概念。這個地址參考,或 ” 指向”(points at)一些其 他資料 。參考以 & 符號為標志并借用了他們所 ......

    uj5u.com 2023-04-20 07:24:10 more
  • Java的值傳遞和參考傳遞

    值傳遞不會改變本身,參考傳遞(如果傳遞的值需要實體化到堆里)如果發生修改了會改變本身。 1.基本資料型別都是值傳遞 package com.example.basic; public class Test { public static void main(String[] args) { int ......

    uj5u.com 2023-04-20 07:24:04 more
  • [2]SpinalHDL教程——Scala簡單入門

    第一個 Scala 程式 shell里面輸入 $ scala scala> 1 + 1 res0: Int = 2 scala> println("Hello World!") Hello World! 檔案形式 object HelloWorld { /* 這是我的第一個 Scala 程式 * 以 ......

    uj5u.com 2023-04-20 07:23:58 more
  • 理解函式指標和回呼函式

    理解 函式指標 指向函式的指標。比如: 理解函式指標的偽代碼 void (*p)(int type, char *data); // 定義一個函式指標p void func(int type, char *data); // 宣告一個函式func p = func; // 將指標p指向函式func ......

    uj5u.com 2023-04-20 07:23:52 more
  • Django筆記二十五之資料庫函式之日期函式

    本文首發于公眾號:Hunter后端 原文鏈接:Django筆記二十五之資料庫函式之日期函式 日期函式主要介紹兩個大類,Extract() 和 Trunc() Extract() 函式作用是提取日期,比如我們可以提取一個日期欄位的年份,月份,日等資料 Trunc() 的作用則是截取,比如 2022-0 ......

    uj5u.com 2023-04-20 07:23:45 more
  • 一天吃透JVM面試八股文

    什么是JVM? JVM,全稱Java Virtual Machine(Java虛擬機),是通過在實際的計算機上仿真模擬各種計算機功能來實作的。由一套位元組碼指令集、一組暫存器、一個堆疊、一個垃圾回收堆和一個存盤方法域等組成。JVM屏蔽了與作業系統平臺相關的資訊,使得Java程式只需要生成在Java虛擬機 ......

    uj5u.com 2023-04-20 07:23:31 more
  • 使用Java接入小程式訂閱訊息!

    更新完微信服務號的模板訊息之后,我又趕緊把微信小程式的訂閱訊息給實作了!之前我一直以為微信小程式也是要企業才能申請,沒想到小程式個人就能申請。 訊息推送平臺🔥推送下發【郵件】【短信】【微信服務號】【微信小程式】【企業微信】【釘釘】等訊息型別。 https://gitee.com/zhongfuch ......

    uj5u.com 2023-04-20 07:22:59 more
  • java -- 緩沖流、轉換流、序列化流

    緩沖流 緩沖流, 也叫高效流, 按照資料型別分類: 位元組緩沖流:BufferedInputStream,BufferedOutputStream 字符緩沖流:BufferedReader,BufferedWriter 緩沖流的基本原理,是在創建流物件時,會創建一個內置的默認大小的緩沖區陣列,通過緩沖 ......

    uj5u.com 2023-04-20 07:22:49 more
  • Java-SpringBoot-Range請求頭設定實作視頻分段傳輸

    老實說,人太懶了,現在基本都不喜歡寫筆記了,但是網上有關Range請求頭的文章都太水了 下面是抄的一段StackOverflow的代碼...自己大修改過的,寫的注釋挺全的,應該直接看得懂,就不解釋了 寫的不好...只是希望能給視頻網站開發的新手一點點幫助吧. 業務場景:視頻分段傳輸、視頻多段傳輸(理 ......

    uj5u.com 2023-04-20 07:22:42 more
  • Windows 10開發教程_編程入門自學教程_菜鳥教程-免費教程分享

    教程簡介 Windows 10開發入門教程 - 從簡單的步驟了解Windows 10開發,從基本到高級概念,包括簡介,UWP,第一個應用程式,商店,XAML控制元件,資料系結,XAML性能,自適應設計,自適應UI,自適應代碼,檔案管理,SQLite資料庫,應用程式到應用程式通信,應用程式本地化,應用程式 ......

    uj5u.com 2023-04-20 07:22:35 more