我做的项目实现的是当用户预约你,就是对数据库进行修改时或者增加时,对你进行消息弹窗提示,当你不在线,再次登录时。系统检测到你登录,就会进行消息弹窗提示。前提是服务器不会断开连接。
基本思路是:当对数据库进行操作时,将相应的消息存到一个数组中;
效果如下:
弹窗的html代码:
<div class="col-sm-3 col-xs-8 messageTC" style="opacity:1;background:#fff;z-index:999;display:none;height:200px;position: fixed;border:1px solid #e2dbdb;border-radius: 10px; bottom: 0;right: 0;border">
<button type="button" class="close" onclick="javascript:$(this).parent().slideUp()" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="text-info">消息通知</h3>
<hr>
<textarea class="form-control messageTextTC" rows="3" readonly></textarea>
</div>
相应的javascript代码:
<c:if test="${foreigner!=null||normaluser!=null }">
<script type="text/javascript">
$(function(){
setInterval("messagePost()",2000);
});
function messagePost(){
$.post("${pageContext.request.contextPath}/message","",function(data){
var dat = eval("("+data+")");
if(dat.length>0){
$(".messageTC").slideDown();
}
for(var i=0;i<dat.length;i++){
var text="用户 "+dat[i].name+" "+dat[i].message+"\n";
$(".messageTextTC").prepend(text);
}
});
}
</script>
</c:if>
最重要的一个工具类:
public class MessageUtils {
private static ArrayList<Message> telmessage = new ArrayList<>();
public static void addMessage(Message mes) {
telmessage.add(mes);
}
public static String getMessage(String tel) {
ArrayList<Message> arr = new ArrayList<>();
for(int i=0;i<telmessage.size();i++) {
if(telmessage.get(i).getTel().equals(tel)) {
arr.add(telmessage.get(i));
}
}
telmessage.removeAll(arr);
JSONArray json = JSONArray.fromObject(arr);
return json.toString();
}
}
相应的消息类:
public class Message {
private String name;
private String message;
private String tel;
public String getTel() {
return tel;
}
public void setTel(String tel) {
this.tel = tel;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
}
在对数据库相应的操作的时候,顺便将相应的消息封装到Message中,然后添加到util中,最后再发到用户中就可以了