Active message notification design ideas and examples:
The server sends a message,
The client receives the message and saves it into the database
The page is refreshed regularly to find out the current user's message
Call the sending method of the message where it needs to be sent, notify the client through the message (queue mode), the client listens to the message, consumes the queue, and inserts it into the database.
Page polling (public page), consider the parameter input design when making the interface, and change the state when there is a click to read
The existing is to find out all the dialogue records of the interlocutor, without changing the database state after clicking
The place that needs to send a message notification is simulated with the sending interface (calling the sending interface), the place where the receiving flickering is simulated with the receiving box (the page is refreshed regularly), and the middle monitoring (queue) is inserted (automatic monitoring),
The timed polling of the page is the same, that is, after clicking (the icon no longer flashes (that is, it does not display when the previous message queue is empty)), all the message lists are displayed.
flickering problem
1. Use the state of the message (no, the effect is that clicking the icon will not flash) the new state flashes (the same page regularly checks whether there is a new state message)
The new state is just inserted. As long as the icon is clicked, the new state becomes old, that is, a field is used to mark the icon flashing state.
As for the read status of the message is marked with another field
Send: call the send interface
Receive: intermediate monitoring (queue) insertion (automatic monitoring) ----- "addTipReg (existing system) with stored procedure
Reminder: Just inserting is in the new state, as long as the icon is clicked, the new state becomes old, that is, a field is used to mark the icon flashing state (the page regularly checks whether there is a new state message) ----- "updateTipStatus (existing system)
LOOK_TIMES This is the tag field
Display: The list of all messages is still displayed----(As for whether there is a connection or not, you can send more information out)-----"getTipData (existing system) (in the background, all the information owned by the logged-in person can be found out. menuId is ok,
The front desk is filtered by cuntomKey) sql is another set, refer to the front desk jar package
It can be seen that the notification of the message is only based on the original addition of mq to prevent high concurrency blocking and lost requests
Before addTipReg is to be inserted, a message is sent to mq, and then the listener goes to addaddTipReg one by one (cache first, then insert, not directly insert),
The same is true for other places to be applied to mq. Before doing it, cache it and then do it in the listener.
Message encoding:
When submitting, first put the object of the price increase in json, and then group some tag information into a larger json string. Send---"put into queue buffer
send:
@RequestMapping(value = "/message/offer/submit", method = RequestMethod.POST)
public void TbConOrdPriceSubmit(HttpSession session, HttpServletRequest request, HttpServletResponse response, Model model, TbConOrdVo tbConOrdVo)
throws EsteelException, IOException {
String currentUserKey = getCurrentUserKey(request, session);
if (!currentUserKey.equals(tbConOrdVo.getCustomerKey())) {
/* For testing purposes only, this line needs to be deleted ★★★ */
currentUserKey = tbConOrdVo.getCustomerKey();
}
if (!currentUserKey.equals(tbConOrdVo.getTradeCustomerKey()) && !currentUserKey.equals(tbConOrdVo.getTbConobjCustomerKey())) {
response.getWriter().write("Access denied!");
} else {
if (currentUserKey.equals(tbConOrdVo.getTbConobjCustomerKey())) {
tbConOrdVo.setOrdpriceMan("B");
} else {
tbConOrdVo.setOrdpriceMan("A");
}
/* Convert to json first, */
JSONObject object = JSONObject.fromObject(tbConOrdVo);//Convert the object to json
String tempstr = object.toString();
/* Add name information, and ipAddress information */
tempstr = "{\"objectName\":\"Message\",\"ipAddress\":" + EsteelNetworkUtil.getIpAddress(request) + ",\"object\":" + tempstr + "}";
/* Then write to activemq */
topicSender.sendMessage(tempstr);
System.out.println("==============Write to MQ success============");
response.getWriter().write("Success submit!");
}
}
take over:
Filter out the json string of the kind of message you want according to the json sent with additional information, convert the json converted from the previous object, return it to the object, and then change the operation of the ordinary system to how to operate --- "take it from the queue ,
Then how to do it---usually complete the storage
public void onMessage(Message m) {
ObjectMessage om = (ObjectMessage) m;
try {
String key_esteelMessage = om.getStringProperty("key_esteelMessage");
JSONObject object1 = JSONObject.fromObject(key_esteelMessage);
String objectName = (String)object1.get("objectName");
if(objectName.equals("Message")){//Filter out the json string you need
JSONObject object2 = (JSONObject) object1.get("object");
TbConOrdVo tbConOrdVo=(TbConOrdVo)JSONObject.toBean(object2, TbConOrdVo.class);
TbConOrd tbConOrd = new TbConOrd();
/*Get ipAddress*/
String ipAddress = (String)object1.get("ipAddress");
/* Extract tbConOrd from tbConOrdVo */
tbConOrd = copyTbConOrd(tbConOrdVo, tbConOrd, ipAddress);
/* write tbConOrd */
tbConOrd = tbConOrdService.insertTbConOrd(tbConOrd);
TbConOrdPrice tbConOrdPrice = new TbConOrdPrice();
tbConOrdPrice = copyTbConOrdPrice(tbConOrd, tbConOrdVo, tbConOrdPrice);
/* Write chat text to tbConOrdPrice*/
String msgText = tbConOrdPrice.getMsgText();
if (msgText.equals("Please enter your negotiation message, the maximum length is 300 characters! Press Ctrl+Enter to submit!")) {
tbConOrdPrice.setMsgText("");
}
//tbConOrd = tbConOrdService.getTbConOrdByObj(tbConOrd);
//tbConOrdPrice.setOrdKey(tbConOrd.getOrdKey());
tbConOrdPrice=tbConOrdPriceService.insertTbConOrdPrice(tbConOrdPrice);
/* Also have to write the data of tbConObj */
TbConObj tbConObj=tbConObjService.getTbConObjById(tbConOrd.getConobjKey());
if(tbConObj.getContradeType().equals("A")){
/*Sales Order*/
/*Set the lowest price*/
if(tbConObj.getHighPrice()==null){
tbConObj.setHighPrice(tbConObj.getOrderPrice());
}
if(tbConOrdPrice.getOrdpriceMan()==null){
/* The current object is the guest */
tbConObj.setLowPrice(tbConOrd.getOrderPrice());
}else if(tbConOrdPrice.getOrdpriceMan().equals("A")){
/* The current object is the guest */
tbConObj.setLowPrice(tbConOrd.getOrderPrice());
}else{
/* The current object is the owner */
tbConObj.setHighPrice(tbConOrd.getOrderPrice());
}
}else{
/*Purchase Order*/
/*Set the lowest price*/
if(tbConObj.getLowPrice()==null){
tbConObj.setLowPrice(tbConObj.getOrderPrice());
}
if(tbConOrdPrice.getOrdpriceMan()==null){
/* The current object is the guest */
tbConObj.setHighPrice(tbConOrd.getOrderPrice());
}else if(tbConOrdPrice.getOrdpriceMan().equals("A")){
/* The current object is the guest */
tbConObj.setHighPrice(tbConOrd.getOrderPrice());
}else{
/* The current object is the owner */
tbConObj.setLowPrice(tbConOrd.getOrderPrice());
}
}
tbConObj = tbConObjService.updateTbConObj(tbConObj);
tbConObjService.listClearCache(tbConObj.getConobjKey());
tbConOrdService.listClearCache();
tbConOrdService.listClearCache(tbConObj.getConobjKey(),tbConOrdVo.getTradeCustomerKey());
}
System.out.println("==============MQ Write to Database success============");
} catch (JMSException e) {
e.printStackTrace ();
} catch (EsteelException e) {
e.printStackTrace ();
}
}
The page periodically polls data from the database:
<title>Negotiation</title>
<div class="chart1" id="pop_up" style="height: 600px; overflow: auto; cursor: move;">
<div class="biaodan">
<form id="submitForm" name="submitForm" action="" method="post"
onkeydown= "javascript:if(event.ctrlKey && event.keyCode==13){checkCanBuy();}">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td>
<td rowspan="3"><br /> <br /> <input type="button"
name="button" id="button_messageRecord" value="消息" class="btnhr30">
</td>
</tr>
</tbody>
</table>
</form>
<!-- <input type="button" onclick="getmessageRecord();" value="ok"> -->
<div class="con pr" id="messageRecord">
</div>
<div id="messageRecordJsonHidden" style="display:none">
</div>
</div>
</div>
Several ways of js timing
1,function show_tip(){
getTipData();
setTimeout("show_tip()",3000);
}
2. Use the jquery plugin directly:
The context in jsp needs to use jsp-specific built-in objects such as (${pageContext.request.contextPath}),
It can only be recognized in jsp, but if js files like plugins need to use this, you can declare the above as variables in the global js of the jsp page,
The js plugin is loaded in this js. The code of the js plugin is quite written in jsp. Of course, this global variable can be used directly (which scripts are in front of the variable, and these scripts can be used directly)
Such as
In jsp:
The weburl variable can be used directly in jquery.message.offer.js
<script>
var webUrl = "${pageContext.request.contextPath}";
$.getScript("${pageContext.request.contextPath}/resources/js/message/jquery.timer.js",////You can schedule here
function() {
$.getScript("${pageContext.request.contextPath}/resources/js/message/jquery.message.offer.js",//custom plugin function
function() {$.getScript("${pageContext.request.contextPath}/resources/js/message/jquery.form.js",//表单插件
function() {
$(".btnhr30").on('click',
function() {
checkCanBuy();
});
/* Get data every 3 seconds */
timermessageRecord = $ .timer (3000,
function() {
var count=infoCount(0);
//alert(count);
if(count>0){
$("#button_messageRecord").val("消息("+count+")");
$("#button_messageRecord").fadeOut(100).fadeIn(100);////////////flickering effect
}
});
$(".class_customerNameSet").on('click',
function(){
switchCustomer(this);
}
);
//$(".class_customerNameSet").eq(0).click();
//checkmessageRecord(1);
});
});
});
</script>
jquery.timer.js:
/**
* jQuery Timer Plugin (jquery.timer.js)
* @version 1.0.1
* @author James Brooks <[email protected]>
* @website http://james.brooks.so
* @lit MIT - http://jbrooksuk.mit-license.org
*/
(function($) {
jQuery.timer = function(interval, callback, options) {
// Create options for the default reset value
var options = jQuery.extend({ reset: 500 }, options);
var interval = interval || options.reset;
if(!callback) { return false; }
var Timer = function(interval, callback, disabled) {
// Only used by internal code to call the callback
this.internalCallback = function() { callback(self); };
// Clears any timers
this.stop = function() {
if(this.state === 1 && this.id) {
clearInterval(self.id);
this.state = 0;
return true;
}
return false;
};
// Resets timers to a new time
this.reset = function(time) {
if(self.id) { clearInterval(self.id); }
var time = time || options.reset;
this.id = setInterval($.proxy(this.internalCallback, this), time);
this.state = 1;
return true;
};
// Pause a timer.
this.pause = function() {
if(self.id && this.state === 1) {
clearInterval(this.id);
this.state = 2;
return true;
}
return false;
};
// Resumes a paused timer.
this.resume = function() {
if(this.state === 2) {
this.state = 1;
this.id = setInterval($.proxy(this.internalCallback, this), this.interval);
return true;
}
return false;
};
// Set the interval time again
this.interval = interval;
// Set the timer, if enabled
if (!disabled) {
this.id = setInterval($.proxy(this.internalCallback, this), this.interval);
this.state = 1;
}
var self = this;
};
// Create a new timer object
return new Timer(interval, callback, options.disabled);
};
})(jQuery);