Web Agent v.4.1.8

NetFUNNEL Agent is a dedicated client for communicating with the NetFUNNEL server. Users can implement various functions provided by the agent in the client application code they wish to apply, enabling the virtual waiting room.

Web Agent Flow Diagram

웹에이전트동작흐름도

The NetFUNNEL Agent operates as shown above.

Before Waiting

Before waiting, initialization of configuration information is performed. This process involves initializing the URLs for the NetFUNNEL server, the Setting file, and the SDK.
In the Agent → Web menu on the console page, insert the NetFUNNEL Tag code at the top of <head>.

During Waiting

This is the process of applying waiting to specific parts of the page (html) where you want to implement traffic waiting by exposing the virtual waiting room.
The virtual waiting room is exposed and periodically requests re-entry, updating the number of people waiting and the estimated time.
Use the Start Waiting function provided by the SDK to apply the virtual waiting room.
When a waiting response is received, a waiting room window is called, and when a blocking response is received, a blocking window is called.
When an entry permission response is received, the waiting ends and a callback function is called.

After Waiting

This is the process after waiting has ended, where the entry key is returned to the NetFUNNEL server to confirm the completion of entry.
Upon successful entry, use the Completion Function provided by the SDK to implement the logic after waiting has ended.
There are three reasons why waiting ends for the user: 1️⃣ Successful Entry: Received a successful entry response while periodically requesting re-entry. 2️⃣ Entry Request Failure: No response from the server during a re-entry request or a network error occurs. 3️⃣ Waiting Cancellation: Clicking the cancel waiting button.

How to Apply the Agent

Step 1. Insert NetFUNNEL Tag Code

In the Web tab of the Agent menu on the console page, enter the code below at the top of the <head> tag.

<script>
(function(w, d, s, uri, fn) {
    w[fn] = w[fn] || function() {
        var c = {};
        c.tenantApiUrl = arguments[0];
        c.tenantNFUrl = arguments[1];
        c.tenantLoaderPort = arguments[2];
        (w[fn].l = w[fn].l || []).push(c);
    };
    var o = d.createElement(s);
    var p = d.getElementsByTagName(s)[0];
    o.async = 1;
    o.charset = 'utf-8';
    o.src = uri; 
    p.parentNode.insertBefore(o, p);
})
(window, document, 'script', '{Agent Library Request Address}', 'nfTag');
nfTag('{NetFUNNEL Environment Info Request Address}', '{NetFUNNEL Server Request Address}', '443');
</script>

ℹ️

In Multi-Page Application (MPA) projects, the NetFUNNEL Tag code must be inserted in the <head> tag of each HTML page. For example, if there are pages like index.html, list.html, and detail.html, the NetFUNNEL Tag code must be inserted at the top of the <head> tag section for each page.

Avoid Duplicate Insertions: If there is a JavaScript file commonly referenced in all HTML files on the website, insert the Code Snippet only once in that common file to avoid duplicate tasks.

Step 2. Traffic Control through API Calls

You can enable the waiting room feature in the source code via API.

projectKey: The key of the project for which you want to control traffic. Can be copied from the sidebar of the console. segmentKey: The key of the segment for which you want to control traffic. Can be copied from the Basic Control/Section Control tab of the console.

1) Basic Control

Start Basic Control Function

Function Name: NFStart
Application Location: Apply at the code section where you enter the page.
Description: Applies traffic waiting to the page (html) where you want to expose the virtual waiting room.
Termination Point: The function ends when its callback function is called. At this point, when the target page loads, use the general waiting ending function NFStop to return the key.
Parameter: After creating a segment in the Basic Control tab of the console, enter the key in the API Parameter.

/*
* @param {object} projectKey, segmentKey
* @param {Function} success callback
*/
NFStart({
 projectKey: '{Project Key}',
 segmentKey: '{Segment Key}'
}, function(response){
 // TODO: Implement the logic for moving to the page after waiting.
 // Example: window.location.href = '{URL After Basic Waiting}';
});

Sample Code for Starting Basic Control
Below is an example code for applying general waiting on the login page to move to the main page.

▶️ AS-IS: Example code of the login page before applying NetFUNNEL.

<!DOCTYPE html>
<html>
 <head>
   <title>Login Page</title>
 </head>
 
 <body>
   <h1>Login</h1>
   <form id="loginForm">
     <label for="username">Username:</label>
     <input type="text" id="username" name="username" />
     <label for="password">Password:</label>
     <input type="password" id="password" name="password" />
     <button type="submit">Login</button>
   </form>
   <script>
     function loginAPI(id, pwd) {
       // Implement login API logic
       return true;
     }
 
     document.getElementById("loginForm").addEventListener("submit", function (event) {
       event.preventDefault();
       var username = document.getElementById("username").value;
       var password = document.getElementById("password").value;
 
       var result = loginAPI(username, password);
       if (result) {
         // If login is successful, move to the main page
         location.href = "/main";
       } else {
         alert("Login Failed");
       }
     });
   </script>
 </body>
</html>

▶️TO-BE: Example of the login page after applying NetFUNNEL.

  <!DOCTYPE html>
<html>
 <head>
   <!-- Insert NetFUNNEL Tag Code -->
   <script>
     (function (w, d, s, uri, fn) {
       w[fn] =
         w[fn] ||
         function () {
           var c = {};
           c.tenantApiUrl = arguments[0];
           c.tenantNFUrl = arguments[1];
           c.tenantLoaderPort = arguments[2];
           (w[fn].l = w[fn].l || []).push(c);
         };
       var o = d.createElement(s);
       var p = d.getElementsByTagName(s)[0];
       o.async = 1;
       o.charset = "utf-8";
       o.src = uri;
       p.parentNode.insertBefore(o, p);
     })(window, document, "script", "{Agent Library Request Address}", "nfTag");
     nfTag("{NetFUNNEL Environment Info Request Address}", "{NetFUNNEL Server Request Address}", "443");
   </script>
   <title>Login Page</title>
 </head>
 <body>
   <h1>Login</h1>
   <form id="loginForm">
     <label for="username">Username:</label>
     <input type="text" id="username" name="username" />
     <label for="password">Password:</label>
     <input type="password" id="password" name="password" />
     <button type="submit">Login</button>
   </form>
   <script>
     function loginAPI(id, pwd) {
       // Implement login API logic
       return true;
     }
 
     document.getElementById("loginForm").addEventListener("submit", function (event) {
       event.preventDefault();
       var username = document.getElementById("username").value;
       var password = document.getElementById("password").value;
 
       var result = loginAPI(username, password);
       if (result == true) {
         // If login is successful, go through NetFUNNEL waiting and then move to the main page
         NFStart(
           {
             projectKey: "service_34",
             segmentKey: "segKey_2555",
           },
           function () {
             window.location.href = "/main";
           }
         );
       } else {
         alert("Login Failed");
       }
     });
   </script>
 </body>
</html>

2) Section Control

Start Section Control Function

Function Name: NFStartSection
Application Location: Start page of the section control
Description: Applies traffic waiting to the starting page (html) where you want to expose the virtual waiting room over the section (start page ~ end page).
Termination Point: The section waiting ends on the page where the NFStopSection key return function is used.
Parameter: After creating a segment in the Section Control tab of the console, enter the key in the API Parameter.

/* 
* @param {object} projectKey, segmentKey 
* @param {Function} success callback 
*/
NFStartSection({ 
  projectKey: '{Project Key}', 
  segmentKey: '{Segment Key}' 
  }, function(response){ 
      // TODO: Implement the logic for moving to the starting page after section waiting.
      // Example: window.location.href = '{URL After Section Waiting Start}';
  });

Appendix

1. Basic Control (General Waiting)

Controls the inflow of users to a single page, allowing you to control the entry rate per second for URLs registered in the general waiting segment.

Fixed Type: Regulates the entry allowance with a fixed number regardless of the processing time.
Dynamic Type: Sets minimum and maximum entry allowances separately, automatically adjusting the entry allowance based on the processing time during the reference interval.

2. Section Control (Interval Waiting)

Controls the inflow between specified pages, monitoring the number of users (entry volume) staying within the segment registered in the interval waiting segment by checking the start and end URLs.

3. EUM (End User Monitoring)

EUM data is collected for users entering through NetFUNNEL and can be monitored through the console.

4. Main Page Control

The best solution for the surge on the main page, which users first encounter, is to lighten the main page. By replacing the existing main page with a NetFUNNEL waiting page, you can control the entry volume to the main page itself. This can also be applied to the section waiting entry page in the same way.

Operation Flow: NetFUNNEL Waiting Page (index.html) → Existing Main Page (index_real.html)

💡 Method for Applying Main Page Control

Step 1

Change the original main page index.html to index_real.html and use an HTML file as the NetFUNNEL waiting page index.html.

Step 2

Insert the tag Code Snippet in index.html to install the Agent.

Step 3

Call the NFStart API in the callback function of the load event.

Step 4

callback(function) - mandatory Refer to the example below to write the code for moving to the original main page URL.

Step 5

Use localStorage, sessionStorage, or Cookie to prevent malicious direct access when the actual page's URL is exposed. Only allow access to the actual page index_real.html if it has been accessed through the waiting page index.html.

API Application Example in Source Code

Waiting Page

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>NetFUNNEL Waiting Page</title>
 <script>
     // NetFUNNEL script setup
     (function(w, d, s, uri, fn) {
         w[fn] = w[fn] || function() {
             var c = {};
             c.tenantApiUrl = arguments[0];
             c.tenantNFUrl = arguments[1];
             (w[fn].l = w[fn].l || []).push(c);
         };
         var o = d.createElement(s);
         var p = d.getElementsByTagName(s)[0];
         o.async = 1; o.charset = 'utf-8'; o.src = uri;
         p.parentNode.insertBefore(o, p);
     })(window, document, 'script', '{Agent Library Request Address}', 'nfTag');
     nfTag('{Tenant Info Request URL}', '{NetFUNNEL Server Request URL}');
 
     // Start waiting when the page loads
     window.addEventListener('load', function() {
         NFStart({
             projectKey: 'service_1',
             segmentKey: 'segKey_1'
         }, function(response) {
             localStorage.setItem('passedThroughWaiting', 'true'); // Mark as having passed through the waiting page
             location.href = 'index_real.html'; // Move to the actual main page
         });
     });
 </script>
</head>
<body>
 <h1>Waiting Page</h1>
 <!-- Content of the waiting page -->
</body>
</html>

NetFUNNEL Agent Android Agent v4.1.1