主頁 > 移動端開發 > ajax在線咨詢

ajax在線咨詢

2020-10-24 02:05:29 移動端開發

之前聽說過別人使用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/yidong/188163.html

標籤:其他

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

下一篇:JS物件

標籤雲
其他(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)

熱門瀏覽
  • 【從零開始擼一個App】Dagger2

    Dagger2是一個IOC框架,一般用于Android平臺,第一次接觸的朋友,一定會被搞得暈頭轉向。它延續了Java平臺Spring框架代碼碎片化,注解滿天飛的傳統。嘗試將各處代碼片段串聯起來,理清思緒,真不是件容易的事。更不用說還有各版本細微的差別。 與Spring不同的是,Spring是通過反射 ......

    uj5u.com 2020-09-10 06:57:59 more
  • Flutter Weekly Issue 66

    新聞 Flutter 季度調研結果分享 教程 Flutter+FaaS一體化任務編排的思考與設計 詳解Dart中如何通過注解生成代碼 GitHub 用對了嗎?Flutter 團隊分享如何管理大型開源專案 插件 flutter-bubble-tab-indicator A Flutter librar ......

    uj5u.com 2020-09-10 06:58:52 more
  • Proguard 常用規則

    介紹 Proguard 入口,如何查看輸出,如何使用 keep 設定入口以及使用實體,如何配置壓縮,混淆,校驗等規則。

    ......

    uj5u.com 2020-09-10 06:59:00 more
  • Android 開發技術周報 Issue#292

    新聞 Android即將獲得類AirDrop功能:可向附近設備快速分享檔案 谷歌為安卓檔案管理應用引入可安全隱藏資料的Safe Folder功能 Android TV新主界面將顯示電影、電視節目和應用推薦內容 泄露的Android檔案暗示了傳說中的谷歌Pixel 5a與折疊屏新機 谷歌發布Andro ......

    uj5u.com 2020-09-10 07:00:37 more
  • AutoFitTextureView Error inflating class

    報錯: Binary XML file line #0: Binary XML file line #0: Error inflating class xxx.AutoFitTextureView 解決: <com.example.testy2.AutoFitTextureView android: ......

    uj5u.com 2020-09-10 07:00:41 more
  • 根據Uri,Cursor沒有獲取到對應的屬性

    Android: 背景:呼叫攝像頭,拍攝視頻,指定保存的地址,但是回傳的Cursor檔案,只有名稱和大小的屬性,沒有其他諸如時長,連ID屬性都沒有 使用 cursor.getInt(cursor.getColumnIndexOrThrow(MediaStore.Video.Media.DURATIO ......

    uj5u.com 2020-09-10 07:00:44 more
  • Android連載29-持久化技術

    一、持久化技術 我們平時所使用的APP產生的資料,在記憶體中都是瞬時的,會隨著斷電、關機等丟失資料,因此android系統采用了持久化技術,用于存盤這些“瞬時”資料 持久化技術包括:檔案存盤、SharedPreference存盤以及資料庫存盤,還有更復雜的SD卡記憶體儲。 二、檔案存盤 最基本存盤方式, ......

    uj5u.com 2020-09-10 07:00:47 more
  • Android Camera2Video整合到自己專案里

    背景: Android專案里呼叫攝像頭拍攝視頻,原本使用的 MediaStore.ACTION_VIDEO_CAPTURE, 后來因專案需要,改成了camera2 1.Camera2Video 官方demo有點問題,下載后,不能直接整合到專案 問題1.多次拍攝視頻崩潰 問題2.雙擊record按鈕, ......

    uj5u.com 2020-09-10 07:00:50 more
  • Android 開發技術周報 Issue#293

    新聞 谷歌為Android TV開發者提供多種新功能 Android 11將自動填表功能整合到鍵盤輸入建議中 谷歌宣布Android Auto即將支持更多的導航和數字停車應用 谷歌Pixel 5只有XL版本 搭載驍龍765G且將比Pixel 4更便宜 [圖]Wear OS將迎來重磅更新:應用啟動時間 ......

    uj5u.com 2020-09-10 07:01:38 more
  • 海豚星空掃碼投屏 Android 接收端 SDK 集成 六步驟

    掃碼投屏,開放網路,獨占設備,不需要額外下載軟體,微信掃碼,發現設備。支持標準DLNA協議,支持倍速播放。視頻,音頻,圖片投屏。好點意思。還支持自定義基于 DLNA 擴展的操作動作。好像要收費,沒體驗。 這里簡單記錄一下集成程序。 一 跟目錄的build.gradle添加私有mevan倉庫 mave ......

    uj5u.com 2020-09-10 07:01:43 more
最新发布
  • 歡迎頁輪播影片

    如圖,引導開始,球從上落下,同時淡入文字,然后文字開始輪播,最后一頁時停止,點擊進入首頁。 在來看看效果圖。 重力球先不講,主要歡迎輪播簡單實作 首先新建一個類 TextTranslationXGuideView,用于影片展示 文本是類似的,最后會有個圖片箭頭影片,布局很簡單,就是一個 TextVi ......

    uj5u.com 2023-04-20 08:40:31 more
  • 【FAQ】關于華為推送服務因營銷訊息頻次管控導致服務通訊類訊息

    一. 問題描述 使用華為推送服務下發IM訊息時,下發訊息請求成功且code碼為80000000,但是手機總是收不到訊息; 在華為推送自助分析(Beta)平臺查看發現,訊息發送觸發了頻控。 二. 問題原因及背景 2023年1月05日起,華為推送服務對咨詢營銷類訊息做了單個設備每日推送數量上限管理,具體 ......

    uj5u.com 2023-04-20 08:40:11 more
  • 歡迎頁輪播影片

    如圖,引導開始,球從上落下,同時淡入文字,然后文字開始輪播,最后一頁時停止,點擊進入首頁。 在來看看效果圖。 重力球先不講,主要歡迎輪播簡單實作 首先新建一個類 TextTranslationXGuideView,用于影片展示 文本是類似的,最后會有個圖片箭頭影片,布局很簡單,就是一個 TextVi ......

    uj5u.com 2023-04-20 08:39:36 more
  • 【FAQ】關于華為推送服務因營銷訊息頻次管控導致服務通訊類訊息

    一. 問題描述 使用華為推送服務下發IM訊息時,下發訊息請求成功且code碼為80000000,但是手機總是收不到訊息; 在華為推送自助分析(Beta)平臺查看發現,訊息發送觸發了頻控。 二. 問題原因及背景 2023年1月05日起,華為推送服務對咨詢營銷類訊息做了單個設備每日推送數量上限管理,具體 ......

    uj5u.com 2023-04-20 08:39:13 more
  • iOS從UI記憶體地址到讀取成員變數(oc/swift)

    開發除錯時,我們發現bug時常首先是從UI顯示發現例外,下一步才會去定位UI相關連的資料的。XCode有給我們提供一系列debug工具,但是很多人可能還沒有形成一套穩定的除錯流程,因此本文嘗試解決這個問題,順便提出一個暴論:UI顯示例外問題只需要兩個步驟就能完成定位作業的80%: 定位例外 UI 組 ......

    uj5u.com 2023-04-19 09:16:23 more
  • FIDE重磅更新!性能飛躍!體驗有禮!

    FIDE 開發者工具重構升級啦!實作500%性能提升,誠邀體驗! 一直以來不少開發者朋友在社區反饋,在使用 FIDE 工具的程序中,時常會遇到諸如加載不及時、代碼預覽/渲染性能不如意的情況,十分影響開發體驗。 作為技術團隊,我們深知一件趁手的開發工具對開發者的重要性,因此,在2023年開年,FinC ......

    uj5u.com 2023-04-19 09:16:15 more
  • 游戲內嵌社區服務開放,助力開發者提升玩家互動與留存

    華為 HMS Core 游戲內嵌社區服務提供快速訪問華為游戲中心論壇能力,支持玩家直接在游戲內瀏覽帖子和交流互動,助力開發者擴展內容生產和觸達的場景。 一、為什么要游戲內嵌社區? 二、游戲內嵌社區的典型使用場景 1、游戲內打開論壇 您可以在游戲內繪制論壇入口,為玩家提供沉浸式發帖、瀏覽、點贊、回帖、 ......

    uj5u.com 2023-04-19 09:15:46 more
  • iOS從UI記憶體地址到讀取成員變數(oc/swift)

    開發除錯時,我們發現bug時常首先是從UI顯示發現例外,下一步才會去定位UI相關連的資料的。XCode有給我們提供一系列debug工具,但是很多人可能還沒有形成一套穩定的除錯流程,因此本文嘗試解決這個問題,順便提出一個暴論:UI顯示例外問題只需要兩個步驟就能完成定位作業的80%: 定位例外 UI 組 ......

    uj5u.com 2023-04-19 09:14:53 more
  • FIDE重磅更新!性能飛躍!體驗有禮!

    FIDE 開發者工具重構升級啦!實作500%性能提升,誠邀體驗! 一直以來不少開發者朋友在社區反饋,在使用 FIDE 工具的程序中,時常會遇到諸如加載不及時、代碼預覽/渲染性能不如意的情況,十分影響開發體驗。 作為技術團隊,我們深知一件趁手的開發工具對開發者的重要性,因此,在2023年開年,FinC ......

    uj5u.com 2023-04-19 09:14:08 more
  • 游戲內嵌社區服務開放,助力開發者提升玩家互動與留存

    華為 HMS Core 游戲內嵌社區服務提供快速訪問華為游戲中心論壇能力,支持玩家直接在游戲內瀏覽帖子和交流互動,助力開發者擴展內容生產和觸達的場景。 一、為什么要游戲內嵌社區? 二、游戲內嵌社區的典型使用場景 1、游戲內打開論壇 您可以在游戲內繪制論壇入口,為玩家提供沉浸式發帖、瀏覽、點贊、回帖、 ......

    uj5u.com 2023-04-19 09:08:34 more