JS -- 如何實現前臺推送

jsp

<%@ page import="com.n******.a*****.view.core.message.SocketRegister"%>
<%
	String socketServerPath = SocketRegister.getPath();
	String source = SocketRegister.getSource();
%>

<script type="text/javascript">
	var socketServerPath = "<%=socketServerPath%>";
	var msgSource = "<%=source%>"; 
</script>

js

require.config({

	paths: {
		'socket-io'				:	viewCoreComponentPath + "/scripts/message/socket.io",
		'message'				:	viewCoreComponentPath + "/scripts/message/noRequire/message",
	},
	
    shim: {
		'message': {
			deps:['socket-io'],
			exports:'message'
		},
	}
});

需要用到推送的頁面

框

define(['jquery','vue','vue-router','ELEMENT','bootstrap','showLoading','message','common-confirm','jqueryAjaxTimeoutHandler','text!' + componentPath + '/pages/appMgmt/appDeploy.html'],
		function($,Vue,vueRouter,ELEMENT,bootstrap,showLoading,message,commonConfirm,jqueryAjaxTimeoutHandler,appDeployHtml){

	
})

其中的 mounted 方法

this.mounted=function(){
	message.connect({
		url : socketServerPath,
		msgSource : msgSource,
		nickname : username
	});
}

其中的 methods 方法，這裏的 topicId 需要和 java 中的 topicId 名字完全一致

// 執行同步方法，獲取topicId
$.ajax({
	url : path + "/appOperator/appOperatorAction!getTopicId.action",
	cache: false,
	type : 'post',
	async:false,
	data:{
		appTempId : _self.appTemplateId,
		detail:JSON.stringify(details)
	},
	success : function(data) {
		_self.topicId = data;
	},
	error : function(err) {
	}
 });

// 執行邏輯和推送邏輯是異步方法，後臺且執行，前臺且推送

// 這句話不能放在success中，要放在ajax外面
// 否則可能會存在已經開始推送，但是taskExeDialogVisible還沒置爲true
// 此時推送框相關代碼會報錯
_self.taskExeDialogVisible = true;

$.ajax({
	url : path + "/appOperator/appOperatorAction!deployTask.action",
	cache: false,
	type : 'post',
	data:{
		appTempId : _self.appTemplateId,
		detail:JSON.stringify(details)
	},
	success : function(data) {
		
	},
	error : function(err) {
	}
 });
 
_self.taskExeMessage = "";
message.removeListeners("OperationTask_" + _self.topicId);
message.addListener("OperationTask_" + _self.topicId, function(msg) {
	// 具體內容
	var newStr = '';
	var data = JSON.parse(msg);
	var type = data.type;
	var description = data.description;
	if(!isEmpty(type)){
		if(type == "file_begin"){
			newStr = '<font style="color:white">' + description + '</font><br/><br/>';
		}
	}
	_self.taskExeMessage += newStr;
	$("#message-log-modal-id pre")[0].scrollTop = $("#message-log-modal-id pre")[0].scrollHeight; 
});

html

<el-dialog id="message-log-modal-id" title="作業任務執行情況" :visible.sync="taskExeDialogVisible" 
			:show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" width="70%" top="5vh" style="overflow:auto;" >
	 <hr/>
	 <pre class="input-xlarge" style="height:450px;margin:0;padding:0;background-color:#333333" v-html="taskExeMessage"></pre>
	 <div style="text-align:center;margin-top:10px">
	    <button class="btn btn-self"  @click="onClose()">關閉</button>
	 </div>
</el-dialog>

java

String topicId = "OperationTask_"+topicId;
MessageUtil.publishDistributeBeginMessage(topicId,userName,null,startTime);

public static void publishDistributeBeginMessage(String topicId, String userName, String taskName, String startTime) {
	try {
		if(StringUtils.hasLength(topicId)) {
			JSONObject operationResult = new JSONObject();
			String result = "";
			if(StringUtils.isEmpty(taskName)){
				 result = "分發文件開始，開始時間：" + startTime + "，"  + "\n傳輸中，請稍候...";
			}else{
				 result = "分發文件開始，開始時間：" + startTime + "，任務名稱：" + taskName + "，" + "\n傳輸中，請稍候...";
			}
			JSONArray descArray = new JSONArray();
			descArray.add(result);
			operationResult.put("type", "file_begin");
			operationResult.put("description", descArray);
			publishMessage(topicId, userName, operationResult);
		}
	} catch(Throwable t) {
		log.error("", t);
	}
}