Core Code Analysis

Procedure

1. Import the security certificate provided by the system O&M administrator to the current browser.
2. Introduce the required JavaScript framework. In this example, jQuery needs to be introduced. The reference version is jQuery-v1.8.0, as shown in Figure 1.
   Figure 1 JavaScript framework reference example
   

3. Add the following code to the page to be referenced.

   If a cross-origin resource sharing (CORS) problem occurs during page integration, resolve the problem by referring to How Can I Resolve the Reported Cross-domain Error When the xmlHttpRequest Requests the URL of the CEC?

   	<script type="text/javascript">
    		// The current demo needs to introduce jQuery.
   		// Create the <script> tag and run the script.
   		var importScript = (function (oHead) {
   
   			function loadError(oError) {
   				throw new URIError("The script " + oError.target.src + " is not accessible.");
   			}
   
   			return function (sSrc, fOnload) {
   				var oScript = document.createElement("script");
   				oScript.type = "text\/javascript";
   				oScript.onerror = loadError;
   				if (fOnload) { oScript.onload = fOnload; }
   				oHead.appendChild(oScript);
   				oScript.innerHTML = sSrc;
   			}
   
   		})(document.head || document.getElementsByTagName("body")[0]);
   		
   		// Set request parameters. access_token indicates the authentication information, tenantSpaceId indicates the tenant space ID, and userAccount indicates the sign-in account. For details, see Table 1.
   		var param = {
   			"access_token": "xx",
   			"tenantSpaceId": "xxx",
   			"userAccount": "xxx"
   		}
   
   		// Define the $aicc_ContextPath variable. The variable name must be $aicc_ContextPath, and the value is https://IP address:Port number/service-cloud/ or https://Domain name/service-cloud/.
   		const $aicc_ContextPath = "https://10.10.10.10:8080/service-cloud/";
   		// Request the CEC and pass the data content (access_token, tenantSpaceId, and userAccount).
   		$.ajax({
   			type: "post",
   			data: JSON.stringify(param),
   			url: $aicc_ContextPath+"ccdesktop/pages/cc-bar/js/ccbarclient.js?t=" + Math.random(),
   			crossDomain: true,
   			xhrFields: {
   				withCredentials: true
   			},
   			error: function (XMLHttpRequest, textStatus, errorThrown) {
   
   			},
   			success: function (data) {
   				// After the request is successful, the JavaScript is executed. The CEC returns the JavaScript and dynamically generates a connection bar. The style and position of the connection bar cannot be modified.
   				importScript(data)
   				
   				// Transfer an event (agent status) using the postMessage.
   				var agentStatusParam = new Array;
   				agentStatusParam.push("AgentState_Busy");
   				agentStatusParam.push("AgentState_Work");
   				agentStatusParam.push("AgentState_Ready");
   		
   				agentStatusParam.push("AgentEvent_TransOutResult");
   				var json = { name: "eventpost", param: agentStatusParam }
   			    setTimeout(function(){ window.frames["ccbarclient"].postMessage(JSON.stringify(json), $aicc_ContextPath); }, 1000)
   		       // Check the latest agent status in the CEC every second.
                          // If the value of window.frames["ccbarclient"] is incorrect, set the check period to a larger value, for example, 2000 or 3000.
                         // frames: The value is ccbarclient, which is dynamically generated based on the data content returned by importScript.
   				window.listeners["eventpost"] = callback;
   		
   			}
   		});
   
   	</script>

   Table 1 Parameter description

   Parameter	Mandatory or Not	Description
   ip&port	Yes	Actual domain name. Replace https://10.10.10.1/ with the public network domain name of the AICC.
   access_token	Yes	Verification information generated by the enterprise. The value is the same as the token in Table 1.
   tenantSpaceId	Yes	Tenant space ID.
   userAccount	Yes	CEC sign-in account. The value comes from the accountCode parameter in Obtaining CEC Account Information.