j-queue-sdk-web - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

dist/j-queue-sdk-web.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("io")):"function"==typeof define&&define.amd?define(["io"],t):"object"==typeof exports?exports.ConnectionJQueueSdkWeb=t(require("io")):e.ConnectionJQueueSdkWeb=t(e.io)}(this,(e=>(()=>{"use strict";var t={613:(e,t)=>{var n;Object.defineProperty(t,"__esModule",{value:!0}),t.OnlineQueueStatus=void 0,function(e){e[e.WAITING=1]="WAITING",e[e.ACTIVE=2]="ACTIVE"}(n||(t.OnlineQueueStatus=n={}))},676:t=>{t.exports=e}},n={};function o(e){var i=n[e];if(void 0!==i)return i.exports;var s=n[e]={exports:{}};return t[e](s,s.exports,o),s.exports}var i={};return(()=>{var e=i;const t=o(676),n=o(613);class s{static injectStyles(e){if("undefined"==typeof document)return;if(document.querySelector("style[data-jqueue-styles]"))return;const t=document.createElement("style");t.dataset.jqueueStyles="",t.textContent=this.CONFIG.STYLES.LOADER(e),document.head.appendChild(t)}static createPopup(e,t){if("undefined"==typeof document)return;this.removePopup();const n=document.createElement("div");n.id="__jqueue_popup",n.style.cssText=null!=t?t:this.CONFIG.STYLES.POPUP,n.innerHTML=e,document.body.appendChild(n),this.state.popupEl=n}static removePopup(){var e;"undefined"!=typeof document&&(null===(e=this.state.popupEl)||void 0===e||e.remove(),this.state.popupEl=null)}static toggleNavigation(e){"undefined"!=typeof window&&this.state.isNavigating!==e&&(window.onbeforeunload=e?()=>"Navigation is currently blocked.":null,this.state.isNavigating=e)}static getDefaultPopupContent(e,t="ko",n){var o;const i=this.CONFIG.MESSAGES[t],s=null!==(o=null==n?void 0:n.textColor)&&void 0!==o?o:"#276bff";return`\n      <div style="display: flex; flex-direction: column; align-items: center; width: 100%;">\n        <div style="padding: 20px; text-align: center;">\n          <p style="font-size: 16px; line-height: 1.5; margin: 0 0 20px 0; color: ${s};">\n            ${i.MESS_1}<br>\n            ${i.MESS_2}\n          </p>\n          <div style="position: relative; width: 150px; height: 150px; margin: 20px auto;">\n            <span style="position: absolute; inset: 0;" class="loader-jqueue_popup"></span>\n            <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">\n              <div style="font-size: 14px; color: ${s};">${i.MESS_3}</div>\n              <div style="font-size: 36px; color: ${s}; font-weight: bold;">${e}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    `}static init({url:e,socketConfig:o={transports:["websocket"],reconnectionAttempts:3,reconnectionDelay:1e3},popupConfig:i={},customEvents:s={},pollInterval:r=this.CONFIG.STATUS_POLL_INTERVAL,option:a={}}){var u,l;if(!e)throw new Error("URL is required for initialization");if(void 0===t.io)throw new Error("Socket.IO client is not loaded. Please include socket.io-client before j-queue-sdk-web.");if(null===(u=this.state.socket)||void 0===u?void 0:u.connected)return console.warn("[J-Queue] Already initialized, skipping"),{disconnect:()=>this.disconnect()};this.state.storageKey=null!==(l=a.storageKey)&&void 0!==l?l:null,this.injectStyles(i);const d=(0,t.io)(e,o);return this.state.socket=d,d.on("connect",(()=>{this.statusInterval=setInterval((()=>{var e;d.emit("online-queue:status",null!==(e=null==o?void 0:o.query)&&void 0!==e?e:{})}),r)})),d.on("online-queue:status",(({data:e})=>{var t,o;if(!e)return void console.warn(`[J-Queue] Invalid status response received, uuid: ${e||"unknown"}`);const{status:s,position:r,uuid:a}=e;if(this.state.storageKey&&a&&"undefined"!=typeof sessionStorage&&sessionStorage.setItem(this.state.storageKey,a),s===n.OnlineQueueStatus.ACTIVE)this.removePopup(),this.toggleNavigation(!1),this.statusInterval&&(clearInterval(this.statusInterval),this.statusInterval=null);else{const e="function"==typeof i.content?i.content(r):null!==(t=i.content)&&void 0!==t?t:this.getDefaultPopupContent(r,null!==(o=i.language)&&void 0!==o?o:"ko",i);this.createPopup(e,i.style),this.toggleNavigation(!0)}})),d.on("connect_error",(e=>console.error("[J-Queue] Connection error:",e.message))),d.on("disconnect",(e=>{console.warn("[J-Queue] Disconnected from server:",e)})),Object.entries(s).forEach((([e,t])=>{d.on(e,(n=>{try{t(n,{createPopup:this.createPopup.bind(this),removePopup:this.removePopup.bind(this),preventNavigation:()=>this.toggleNavigation(!0),allowNavigation:()=>this.toggleNavigation(!1)})}catch(t){console.error(`[J-Queue] Error in custom event handler ${e}:`,t)}}))})),{disconnect:()=>this.disconnect()}}static cleanup(){"undefined"!=typeof sessionStorage&&this.state.storageKey&&(sessionStorage.removeItem(this.state.storageKey),this.state.storageKey=null),this.statusInterval&&(clearInterval(this.statusInterval),this.statusInterval=null),this.removePopup(),this.toggleNavigation(!1)}static disconnect(){var e;null===(e=this.state.socket)||void 0===e||e.disconnect(),this.state.socket=null,this.cleanup()}}s.CONFIG={STATUS_POLL_INTERVAL:2e3,MESSAGES:{en:{MESS_1:"Progressing sequentially based on access order.",MESS_2:"We are doing our best to proceed quickly.",MESS_3:"Queue Number"},ko:{MESS_1:"접속한 순서대로 순차적 진행 중입니다.",MESS_2:"빠른 서비스 진행을 위해 최선을 다하고 있습니다.",MESS_3:"대기순번"}},STYLES:{POPUP:"\n        position: fixed;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        background: #fff;\n        z-index: 10000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        font-size: 28px;\n      ",LOADER:e=>{var t,n;return`\n        .loader-jqueue_popup {\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          display: inline-block;\n          position: relative;\n          background: linear-gradient(0deg, ${null!==(t=null==e?void 0:e.loaderGradientEnd)&&void 0!==t?t:"rgba(39,107,255,0.05)"} 33%, ${null!==(n=null==e?void 0:e.loaderGradientStart)&&void 0!==n?n:"#276bff"} 100%);\n          box-sizing: border-box;\n          animation: rotation 1s linear infinite;\n        }\n        .loader-jqueue_popup::after {\n          content: '';\n          box-sizing: border-box;\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          transform: translate(-50%, -50%);\n          width: 96%;\n          height: 96%;\n          border-radius: 50%;\n          background: #fff;\n        }\n        @keyframes rotation {\n          0% { transform: rotate(0deg); }\n          100% { transform: rotate(360deg); }\n        }\n      `}}},s.state={socket:null,popupEl:null,isNavigating:!1,storageKey:null},s.statusInterval=null,"undefined"!=typeof window&&(window.ConnectionJQueueSdkWeb=s,console.log("[J-Queue] ConnectionJQueueSdkWeb initialized on window")),e.default=s})(),i.default})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("io")):"function"==typeof define&&define.amd?define(["io"],t):"object"==typeof exports?exports.ConnectionJQueueSdkWeb=t(require("io")):e.ConnectionJQueueSdkWeb=t(e.io)}(this,(e=>(()=>{"use strict";var t={613:(e,t)=>{var n;Object.defineProperty(t,"__esModule",{value:!0}),t.OnlineQueueStatus=void 0,function(e){e[e.WAITING=1]="WAITING",e[e.ACTIVE=2]="ACTIVE"}(n||(t.OnlineQueueStatus=n={}))},676:t=>{t.exports=e}},n={};function o(e){var i=n[e];if(void 0!==i)return i.exports;var s=n[e]={exports:{}};return t[e](s,s.exports,o),s.exports}var i={};return(()=>{var e=i;const t=o(676),n=o(613);class s{static injectStyles(e){if("undefined"==typeof document)return;if(document.querySelector("style[data-jqueue-styles]"))return;const t=document.createElement("style");t.dataset.jqueueStyles="",t.textContent=this.CONFIG.STYLES.LOADER(e),document.head.appendChild(t)}static createPopup(e,t){if("undefined"==typeof document)return;this.removePopup();const n=document.createElement("div");n.id="__jqueue_popup",n.style.cssText=null!=t?t:this.CONFIG.STYLES.POPUP,n.innerHTML=e,document.body.appendChild(n),this.state.popupEl=n}static removePopup(){var e;"undefined"!=typeof document&&(null===(e=this.state.popupEl)||void 0===e||e.remove(),this.state.popupEl=null)}static toggleNavigation(e){"undefined"!=typeof window&&this.state.isNavigating!==e&&(window.onbeforeunload=e?()=>"Navigation is currently blocked.":null,this.state.isNavigating=e)}static getDefaultPopupContent(e,t="ko",n){var o;const i=this.CONFIG.MESSAGES[t],s=null!==(o=null==n?void 0:n.textColor)&&void 0!==o?o:"#276bff";return`\n      <div style="display: flex; flex-direction: column; align-items: center; width: 100%;">\n        <div style="padding: 20px; text-align: center;">\n          <p style="font-size: 16px; line-height: 1.5; margin: 0 0 20px 0; color: ${s};">\n            ${i.MESS_1}<br>\n            ${i.MESS_2}\n          </p>\n          <div style="position: relative; width: 150px; height: 150px; margin: 20px auto;">\n            <span style="position: absolute; inset: 0;" class="loader-jqueue_popup"></span>\n            <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">\n              <div style="font-size: 14px; color: ${s};">${i.MESS_3}</div>\n              <div style="font-size: 36px; color: ${s}; font-weight: bold;">${e}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    `}static init({url:e,socketConfig:o={transports:["websocket"],reconnectionAttempts:3,reconnectionDelay:1e3},popupConfig:i={},customEvents:s={},pollInterval:r=this.CONFIG.STATUS_POLL_INTERVAL,option:a={storageKey:"queue_token"}}){var u,l;if(!e)throw new Error("URL is required for initialization");if(void 0===t.io)throw new Error("Socket.IO client is not loaded. Please include socket.io-client before j-queue-sdk-web.");if(null===(u=this.state.socket)||void 0===u?void 0:u.connected)return console.warn("[J-Queue] Already initialized, skipping"),{disconnect:()=>this.disconnect()};this.state.storageKey=null!==(l=a.storageKey)&&void 0!==l?l:null,this.injectStyles(i);const d=(0,t.io)(e,o);return this.state.socket=d,d.on("connect",(()=>{this.statusInterval=setInterval((()=>{var e;d.emit("online-queue:status",null!==(e=null==o?void 0:o.query)&&void 0!==e?e:{})}),r)})),d.on("online-queue:status",(({data:e})=>{var t,o;if(!e)return void console.warn(`[J-Queue] Invalid status response received, uuid: ${e||"unknown"}`);const{status:s,position:r,uuid:a}=e;if(this.state.storageKey&&a&&"undefined"!=typeof sessionStorage&&sessionStorage.setItem(this.state.storageKey,a),s===n.OnlineQueueStatus.ACTIVE)this.removePopup(),this.toggleNavigation(!1),this.statusInterval&&(clearInterval(this.statusInterval),this.statusInterval=null);else{const e="function"==typeof i.content?i.content(r):null!==(t=i.content)&&void 0!==t?t:this.getDefaultPopupContent(r,null!==(o=i.language)&&void 0!==o?o:"ko",i);this.createPopup(e,i.style),this.toggleNavigation(!0)}})),d.on("connect_error",(e=>console.error("[J-Queue] Connection error:",e.message))),d.on("disconnect",(e=>{console.warn("[J-Queue] Disconnected from server:",e)})),Object.entries(s).forEach((([e,t])=>{d.on(e,(n=>{try{t(n,{createPopup:this.createPopup.bind(this),removePopup:this.removePopup.bind(this),preventNavigation:()=>this.toggleNavigation(!0),allowNavigation:()=>this.toggleNavigation(!1)})}catch(t){console.error(`[J-Queue] Error in custom event handler ${e}:`,t)}}))})),{disconnect:()=>this.disconnect()}}static cleanup(){"undefined"!=typeof sessionStorage&&this.state.storageKey&&(sessionStorage.removeItem(this.state.storageKey),this.state.storageKey=null),this.statusInterval&&(clearInterval(this.statusInterval),this.statusInterval=null),this.removePopup(),this.toggleNavigation(!1)}static disconnect(){var e;null===(e=this.state.socket)||void 0===e||e.disconnect(),this.state.socket=null,this.cleanup()}}s.CONFIG={STATUS_POLL_INTERVAL:2e3,MESSAGES:{en:{MESS_1:"Progressing sequentially based on access order.",MESS_2:"We are doing our best to proceed quickly.",MESS_3:"Queue Number"},ko:{MESS_1:"접속한 순서대로 순차적 진행 중입니다.",MESS_2:"빠른 서비스 진행을 위해 최선을 다하고 있습니다.",MESS_3:"대기순번"}},STYLES:{POPUP:"\n        position: fixed;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        background: #fff;\n        z-index: 10000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        font-size: 28px;\n      ",LOADER:e=>{var t,n;return`\n        .loader-jqueue_popup {\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          display: inline-block;\n          position: relative;\n          background: linear-gradient(0deg, ${null!==(t=null==e?void 0:e.loaderGradientEnd)&&void 0!==t?t:"rgba(39,107,255,0.05)"} 33%, ${null!==(n=null==e?void 0:e.loaderGradientStart)&&void 0!==n?n:"#276bff"} 100%);\n          box-sizing: border-box;\n          animation: rotation 1s linear infinite;\n        }\n        .loader-jqueue_popup::after {\n          content: '';\n          box-sizing: border-box;\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          transform: translate(-50%, -50%);\n          width: 96%;\n          height: 96%;\n          border-radius: 50%;\n          background: #fff;\n        }\n        @keyframes rotation {\n          0% { transform: rotate(0deg); }\n          100% { transform: rotate(360deg); }\n        }\n      `}}},s.state={socket:null,popupEl:null,isNavigating:!1,storageKey:null},s.statusInterval=null,"undefined"!=typeof window&&(window.ConnectionJQueueSdkWeb=s,console.log("[J-Queue] ConnectionJQueueSdkWeb initialized on window")),e.default=s})(),i.default})()));
 //# sourceMappingURL=j-queue-sdk-web.js.map

dist/src/index.js

@@ -64,3 +64,3 @@ "use strict";
     }
-    static init({ url, socketConfig = { transports: ['websocket'], reconnectionAttempts: 3, reconnectionDelay: 1000 }, popupConfig = {}, customEvents = {}, pollInterval = this.CONFIG.STATUS_POLL_INTERVAL, option = {}, }) {
+    static init({ url, socketConfig = { transports: ['websocket'], reconnectionAttempts: 3, reconnectionDelay: 1000 }, popupConfig = {}, customEvents = {}, pollInterval = this.CONFIG.STATUS_POLL_INTERVAL, option = { storageKey: 'queue_token' }, }) {
         var _a, _b;
@@ -67,0 +67,0 @@ if (!url)

package.json

 {
   "name": "j-queue-sdk-web",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "A TypeScript package to check WebSocket connection status and control web access with a popup",
@@ -5,0 +5,0 @@ "main": "dist/j-queue-sdk-web.js",

README.md

@@ -64,18 +64,61 @@ # j-queue-sdk-web
 <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
-<script src="node_modules/j-queue-sdk-web/dist/j-queue-sdk-web.js"></script>
+<script src="https://unpkg.com/j-queue-sdk-web@<version>/dist/j-queue-sdk-web.js"></script>
 <script>
-  ConnectionJQueueSdkWeb.init({
-    url: 'wss://queue-server.example.com',
-    option: { storageKey: 'jqueue_uuid' }, // UUID will be stored with this key
-    popupConfig: {
-      language: 'en',
-      textColor: '#276bff', // Text color for the popup
-      loaderGradientStart: '#276bff', // Starting color of the loader gradient
-      loaderGradientEnd: 'rgba(39,107,255,0.05)', // Ending color of the loader gradient
-      content: (position) => `<div>Queue Position: ${position}</div>`,
-    },
-  });
+  try {
+    // Handle default export
+    const JQueueSdk = window.ConnectionJQueueSdkWeb.default || window.ConnectionJQueueSdkWeb;
+    const connection = JQueueSdk.init({
+      url: 'wss://queue-server.example.com', // Use wss:// for WebSocket
+      option: { storageKey: 'queue_token' },
+      popupConfig: {
+        language: 'en', // 'en' or 'ko'
+        textColor: '#276bff',
+        loaderGradientStart: '#276bff',
+        loaderGradientEnd: 'rgba(39,107,255,0.05)',
+      },
+      socketConfig: {
+        transports: ['websocket'],
+        reconnectionAttempts: 3,
+        reconnectionDelay: 1000,
+        query: {
+          app_id: 'XXXXX',
+          service_name: 'NEWS',
+          ip_address: 'IP_ADDRESS_CLIENT', // Replace with actual IP
+        },
+      },
+      customEvents: {
+        disconnect: (data, utils) => {
+          const queue_token = sessionStorage.getItem('queue_token') || '';
+          if (queue_token) {
+            const beaconData = JSON.stringify({
+              uuid: queue_token,
+              app_id: 'XXXXX',
+              service_name: 'NEWS',
+            });
+            const blob = new Blob([beaconData], { type: 'application/json' });
+            navigator.sendBeacon('https://example.com/log-disconnect', blob);
+          }
+        },
+        'online-queue:status': (data, utils) => {
+          console.log('Queue status:', data);
+        },
+      },
+    });
+
+    // Clean up on page unload
+    window.addEventListener('beforeunload', () => {
+      connection.disconnect();
+    });
+  } catch (error) {
+    console.error('Error initializing j-queue-sdk-web:', error);
+  }
 </script>
 ```
 
+## Notes
+- **Socket.IO Client**: Load `socket.io-client@4.7.5` before `j-queue-sdk-web`.
+- **Default Export**: The script exports `ConnectionJQueueSdkWeb` as `ConnectionJQueueSdkWeb.default`. The code handles both cases.
+- **Error Handling**: Use `onerror` on the script tag and try-catch to handle errors.
+- **Beacon**: Update the `navigator.sendBeacon` URL (`https://example.com/log-disconnect`) to your actual endpoint.
+
 ### Usage in React
@@ -82,0 +125,0 @@

src/index.ts

@@ -149,3 +149,3 @@ import { io, Socket } from 'socket.io-client';
     pollInterval = this.CONFIG.STATUS_POLL_INTERVAL,
-    option = {},
+    option = { storageKey: 'queue_token' },
   }: InitConfig) {
@@ -152,0 +152,0 @@ if (!url) throw new Error('URL is required for initialization');

No alert changes

Improved metrics

Total package byte prevSize

64680

2.64%

Number of lines in readme file

259

19.91%

No dependency changes