j-queue-sdk-web
Advanced tools
Comparing version
@@ -99,2 +99,5 @@ "use strict"; | ||
<div style="padding: 20px; text-align: center;"> | ||
<p style="font-size: 16px; line-height: 1.5; margin: 0 0 20px 0; color: transparent;"> | ||
${messages.MESS_1}<br>${messages.MESS_2} | ||
</p> | ||
<div style="position: relative; width: 150px; height: 150px; margin: 20px auto;"> | ||
@@ -111,3 +114,4 @@ <span style="position: absolute; inset: 0;" class="loader-jqueue_popup"></span> | ||
static getAdjustedPollInterval(position) { | ||
return position >= 100 ? this.CONFIG.TTL_INTERVAL + (position / 100) * 1000 : this.CONFIG.TTL_INTERVAL; | ||
const pollTime = (position >= 100) ? this.CONFIG.TTL_INTERVAL + (position / 100) * 1000 : this.CONFIG.TTL_INTERVAL; | ||
return (pollTime > this.CONFIG.MAX_TTL_INTERVAL ? this.CONFIG.MAX_TTL_INTERVAL : pollTime); | ||
} | ||
@@ -289,2 +293,3 @@ static clearInterval() { | ||
TTL_INTERVAL: 2000, | ||
MAX_TTL_INTERVAL: 60000, | ||
CHECK_DISCONNECTED_INTERVAL: 30000, | ||
@@ -291,0 +296,0 @@ STORAGE_TOKEN_KEY: 'queue_token', |
{ | ||
"name": "j-queue-sdk-web", | ||
"version": "1.2.0", | ||
"version": "1.2.1", | ||
"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", |
@@ -7,12 +7,11 @@ # j-queue-sdk-web | ||
Install the package and `socket.io-client` via npm: | ||
Install the package via npm: | ||
```bash | ||
npm install j-queue-sdk-web socket.io-client | ||
npm install j-queue-sdk-web | ||
``` | ||
For browser usage, include the Socket.IO client and the `j-queue-sdk-web` scripts: | ||
For browser usage, include the `j-queue-sdk-web` script, which bundles the required Socket.IO client: | ||
```html | ||
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script> | ||
<script src="https://unpkg.com/j-queue-sdk-web@latest/dist/j-queue-sdk-web.js"></script> | ||
@@ -25,6 +24,5 @@ ``` | ||
Initialize the SDK after including the scripts: | ||
Initialize the SDK after including the script: | ||
```html | ||
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script> | ||
<script src="https://unpkg.com/j-queue-sdk-web@latest/dist/j-queue-sdk-web.js"></script> | ||
@@ -87,8 +85,8 @@ <script> | ||
- `storageConnectKey` (string): Key used to store the `connect_key` from `socketConfig.query` in `sessionStorage` (default: `'connect_key'`). | ||
- `socketConfig` (object, optional): Socket.IO configuration options. | ||
- `query` (object): Additional query parameters sent to the Socket.IO server (e.g., `{ connect_key: 'CONNECT_KEY' }`). | ||
- `socketConfig` (object, optional): | ||
- `query` (object): Additional query parameters sent to the Socket.IO server (e.g., `{ app_id: 'XXXXX', service_name: 'NEWS', connect_key: 'CONNECT_KEY' }`). | ||
- `transports` (string[]): Transport methods (e.g., `['websocket']`). Defaults to `['websocket']`. | ||
- `reconnectionAttempts` (number): Number of reconnection attempts (default: `3`). | ||
- `reconnectionDelay` (number): Delay between reconnection attempts in milliseconds (default: `1000`). | ||
- `popupConfig` (object, optional): Configuration for the popup display. | ||
- `popupConfig` (object, optional): | ||
- `language` ('en' | 'ko'): Language for default popup content (default: `'ko'`). | ||
@@ -98,5 +96,5 @@ - `style` (string): Custom CSS for the popup. | ||
- `textColor` (string): Color for the popup text (default: `'#276bff'`). | ||
- `loaderGradientStart` (string): Starting color of the loader gradient (default: `'#276bff'`). | ||
- `loaderGradientStart` (string): Starting color of the loader (default: `'#276bff'`). | ||
- `loaderGradientEnd` (string): Ending color of the loader gradient (default: `'rgba(39,107,255,0.05)'`). | ||
- `isShowLoadingOnConnect` (boolean): If `true`, displays a loading popup before establishing the socket connection. Defaults to `false`. | ||
- `isShowLoadingOnConnect` (boolean): If `true`, displays a loading popup before establishing the socket connection (default: `false`). | ||
- `customEvents` (object, optional): Key-value pairs where the key is the event name and the value is a handler function. The handler receives event `data` and utilities `{ createPopup, removePopup, preventNavigation, allowNavigation }`. | ||
@@ -110,3 +108,3 @@ | ||
- `ACTIVE`: Removes the popup, allows navigation, and emits `online-queue:check-disconnected` every 30 seconds to maintain connection status. | ||
- `WAITING`: Displays a customizable full-screen popup with the queue `position`, prevents navigation, and emits `online-queue:status` at an interval of 2000ms (adjusted by `(position / 100) * 1000`ms for positions >= 100). | ||
- `WAITING`: Displays a customizable full-screen popup with the queue `position`, prevents navigation, and emits `online-queue:status` at an interval of 2000ms (adjusted by `(position / 100) * 1000ms` for positions >= 100). | ||
- `EMPTY`: Displays an alert (`'[J Queue] - Connect key does not exist!'`) and clears any active intervals, taking no further UI or navigation actions. | ||
@@ -132,3 +130,3 @@ - Supports pre-connection loading popup if `popupConfig.isShowLoadingOnConnect` is `true`, shown before the socket connects and removed on connection success or failure. | ||
This generates `dist/j-queue-sdk-web.js`. | ||
This generates `dist/j-queue-sdk-web.js`, which includes the Socket.IO client. | ||
@@ -145,3 +143,3 @@ ### Test | ||
## Security Note | ||
## Security | ||
@@ -157,2 +155,4 @@ The default popup content uses direct HTML injection (`innerHTML`). For production use, consider integrating a library like `DOMPurify` to sanitize HTML and prevent XSS attacks. | ||
- **GitHub**: [https://github.com/joinguyen/j-queue-sdk-web](https://github.com/joinguyen/j-queue-sdk-web) | ||
- **Issues**: [https://github.com/joinguyen/j-queue-sdk-web/issues](https://github.com/joinguyen/j-queue-sdk-web/issues) | ||
- **Issues**: [https://github.com/joing-sdk-web/j-queue-sdk-web/issues](https://github.com/joing-sdk/j-queue-sdk-web/issues) | ||
</xaiSchema> | ||
@@ -27,2 +27,3 @@ import { io, Socket } from 'socket.io-client'; | ||
TTL_INTERVAL: 2000, | ||
MAX_TTL_INTERVAL: 60000, | ||
CHECK_DISCONNECTED_INTERVAL: 30000, | ||
@@ -185,2 +186,5 @@ STORAGE_TOKEN_KEY: 'queue_token', | ||
<div style="padding: 20px; text-align: center;"> | ||
<p style="font-size: 16px; line-height: 1.5; margin: 0 0 20px 0; color: transparent;"> | ||
${messages.MESS_1}<br>${messages.MESS_2} | ||
</p> | ||
<div style="position: relative; width: 150px; height: 150px; margin: 20px auto;"> | ||
@@ -198,3 +202,4 @@ <span style="position: absolute; inset: 0;" class="loader-jqueue_popup"></span> | ||
private static getAdjustedPollInterval(position: number): number { | ||
return position >= 100 ? this.CONFIG.TTL_INTERVAL + (position / 100) * 1000 : this.CONFIG.TTL_INTERVAL; | ||
const pollTime = (position >= 100) ? this.CONFIG.TTL_INTERVAL + (position / 100) * 1000 : this.CONFIG.TTL_INTERVAL; | ||
return (pollTime > this.CONFIG.MAX_TTL_INTERVAL ? this.CONFIG.MAX_TTL_INTERVAL : pollTime); | ||
} | ||
@@ -201,0 +206,0 @@ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
463342
0.25%1443
0.77%151
0.67%