unleash proxy client js
v3.6.1
JavaScript 프록시 클라이언트는 외부 종속성(브라우저 API 제외) 없이 JavaScript로 작성된 작은 Unleash 클라이언트입니다. 이 클라이언트는 현재 사용자와 관련된 토글을 localStorage 에 저장하고 백그라운드에서 Unleash(Unleash 프런트 엔드 API 또는 Unleash 프록시)와 동기화합니다. 토글은 사용자의 브라우저에 저장되므로 클라이언트는 다음에 사용자가 동일한 웹 페이지를 방문할 때 토글을 사용하여 스스로 부트스트랩할 수 있습니다.
이 클라이언트는 fetch 가능할 것으로 예상합니다. 이전 브라우저를 지원해야 한다면 아마도 fetch 폴리필을 사용해야 할 것입니다.
이 패키지는 어떤 프레임워크에도 연결되어 있지 않지만 가장 널리 사용되는 프레임워크와 함께 사용할 수 있습니다. 예:
npm install unleash - proxy - client팁 : 클라이언트측 SDK인 이 SDK를 사용하려면 Unleash 프록시 또는 Unleash 프런트엔드 API에 연결해야 합니다. 자세한 내용은 연결 옵션 섹션을 참조하세요.
필요에 따라 클라이언트를 구성하십시오. 다음 예에서는 필수 옵션만 제공합니다. 전체 목록은 사용 가능한 옵션 섹션을 참조하세요.
import { UnleashClient } from 'unleash-proxy-client' ;
const unleash = new UnleashClient ( {
url : 'https://<your-unleash-instance>/api/frontend' ,
clientKey : '<your-client-side-token>' ,
appName : 'my-webapp' ,
} ) ;
// Start the background polling
unleash . start ( ) ; 이 SDK를 Unleash 인스턴스의 프런트엔드 API에 연결하려면 Unleash 인스턴스의 프런트엔드 API에 대한 URL( <unleash-url>/api/frontend )을 url 매개변수로 사용하세요. clientKey 매개변수의 경우 Unleash 인스턴스에서 생성된 FRONTEND 토큰을 사용합니다. 필요한 단계는 API 토큰 생성 방법 가이드를 참조하세요.
이 SDK를 Unleash 프록시에 연결하려면 프록시의 URL과 프록시 클라이언트 키를 사용하세요. Unleash 프록시 문서의 구성 섹션에는 프록시에 대한 클라이언트 키를 구성하는 방법에 대한 자세한 정보가 포함되어 있습니다.
작업을 시작하기 전에 클라이언트의 ready 또는 initialized 이벤트를 기다려야 합니다. 준비되기 전에 클라이언트는 기능의 올바른 상태를 보고하지 않을 수 있습니다.
unleash . on ( 'ready' , ( ) => {
if ( unleash . isEnabled ( 'proxy.demo' ) ) {
console . log ( 'proxy.demo is enabled' ) ;
} else {
console . log ( 'proxy.demo is disabled' ) ;
}
} ) ;이벤트 간의 차이점은 사용 가능한 이벤트 섹션에 설명되어 있습니다.
클라이언트가 준비되면 애플리케이션에서 기능 확인을 시작할 수 있습니다. 원하는 기능의 상태를 확인하려면 isEnabled 메소드를 사용하세요.
unleash . isEnabled ( 'proxy.demo' ) ; getVariant 메소드를 사용하여 변형이 있는 활성화된 기능 의 변형을 가져올 수 있습니다. 기능이 비활성화되었거나 변형이 없는 경우 비활성화된 변형을 다시 받게 됩니다.
const variant = unleash . getVariant ( 'proxy.demo' ) ;
if ( variant . name === 'blue' ) {
// something with variant blue...
} Unleash 컨텍스트는 현재 사용자의 속성에 대해 기능을 평가하는 데 사용됩니다. 이 SDK에서 Unleash 컨텍스트를 업데이트하고 구성하려면 updateContext , setContextField 및 removeContextField 메서드를 사용하세요.
앱에서 설정한 컨텍스트는 기능 평가를 위한 쿼리 매개변수로 Unleash 프록시 또는 프런트엔드 API에 전달됩니다.
updateContext 메소드는 Unleash 컨텍스트의 전체(변경 가능한 부분)를 사용자가 전달한 데이터로 대체합니다.
setContextField 메소드는 선택한 속성에만 작동합니다. Unleash 컨텍스트의 다른 속성에는 영향을 주지 않습니다.
unleash . updateContext ( { userId : '1233' } ) ;
unleash . setContextField ( 'userId' , '4141' ) ; removeContextField 메소드는 선택한 속성에만 작동합니다. Unleash 컨텍스트의 다른 속성에는 영향을 주지 않습니다.
unleash . updateContext ( { userId : '1233' , sessionId : 'sessionNotAffected' } ) ;
unleash . removeContextField ( 'userId' ) ;Unleash SDK는 다음 옵션을 사용합니다.
| 옵션 | 필수의 | 기본 | 설명 |
|---|---|---|---|
| URL | 예 | 해당사항 없음 | 연결할 Unleash 프록시 URL입니다. 예: https://examples.com/proxy |
| 클라이언트 키 | 예 | 해당사항 없음 | 사용할 Unleash Proxy Secret |
| 앱 이름 | 예 | 해당사항 없음 | 이 SDK를 사용하는 애플리케이션의 이름입니다. Unleash Proxy로 전송되는 측정항목의 일부로 사용됩니다. 또한 Unleash Context의 일부가 될 것입니다. |
| 문맥 | 아니요 | {} | 초기 Unleash 컨텍스트입니다. 이는 모든 기능 토글 평가의 초기 컨텍스트로 사용됩니다. appName 및 environment 옵션은 해당 옵션에 전달한 값으로 자동으로 채워집니다. |
| 새로 고침 간격 | 아니요 | 30 | SDK가 업데이트된 토글 구성을 확인해야 하는 빈도(초)입니다. 0으로 설정하면 업데이트 확인이 비활성화됩니다. |
| 새로고침 비활성화 | 아니요 | false | true로 설정하면 클라이언트는 업데이트된 토글 구성을 확인하지 않습니다. |
| 측정항목 간격 | 아니요 | 60 | SDK가 사용 측정항목을 Unleash Proxy로 다시 보내야 하는 빈도(초)입니다. 구성된 metricsIntervalInitial 이후에 전송되는 초기 메트릭 보고서 이후에 시작됩니다. |
| 측정항목 간격초기 | 아니요 | 2 | Unleash API에 대한 첫 번째 측정항목 보고서가 다시 나올 때까지 SDK가 기다려야 하는 시간입니다. 초기 측정항목 호출을 비활성화하려면 이를 0으로 설정하면 됩니다. |
| 비활성화메트릭스 | 아니요 | false | 사용량 측정항목을 비활성화하려면 이 옵션을 true 로 설정하세요. |
| 스토리지 제공자 | 아니요 | 브라우저의 LocalStorageProvider , 그렇지 않은 경우 InMemoryStorageProvider | 사용자 정의 storeProvider를 삽입할 수 있습니다. |
| 술책 | 아니요 | window.fetch 또는 전역 fetch | 사용할 가져오기 구현을 재정의할 수 있습니다. node-fetch 삽입할 수 있는 Node.js 환경에 유용합니다. |
| createAbortController | 아니요 | () => new AbortController() | 기본 AbortController 생성을 재정의할 수 있습니다. 오래된 컨텍스트로 요청을 취소하는 데 사용됩니다. 처리하지 않으려면 () => null 로 설정하세요. |
| 부트스트랩 | 아니요 | [] | 캐시된 기능 토글 구성을 부트스트랩할 수 있습니다. |
| 부트스트랩오버라이드 | 아니요 | true | 부트스트랩이 로컬 저장소의 캐시된 데이터를 자동으로 재정의해야 합니다. bootstrap이 빈 배열이 아닌 경우에만 사용됩니다. |
| 헤더 이름 | 아니요 | Authorization | Unleash/Unleash Proxy를 승인하기 위해 SDK가 사용해야 하는 헤더는 무엇입니까? 헤더에는 clientKey 해당 값으로 제공됩니다. |
| 맞춤헤더 | 아니요 | {} | Unleash 프록시에 HTTP 요청을 할 때 사용할 추가 헤더입니다. 기본 헤더와 이름이 충돌하는 경우 customHeaders 값이 null 또는 undefined 아닌 경우 사용됩니다. null 이거나 undefined customHeaders 값은 무시됩니다. |
| 노출 데이터전체 | 아니요 | false | 모든 getToggle 및 getVariant 호출에 대해 "노출" 이벤트를 트리거할 수 있습니다. 이는 프런트엔드 SDK에 표시되지 않는 "비활성화된" 기능 토글에 특히 유용합니다. |
| 환경 | 아니요 | default | Unleash 컨텍스트의 environment 옵션을 설정합니다. 이는 SDK의 Unleash 환경에 영향을 미치지 않습니다 . |
| 사용POST요청 | 아니요 | false | 활성화된 기능을 요청할 때 GET 대신 POST 요청을 사용하도록 클라이언트를 구성합니다. 이는 민감한 정보(예: 사용자 ID로 사용되는 사용자 이메일)가 URL에서 유출되는 것을 방지하기 위해 컨텍스트에서 전달될 때 유용합니다. 참고: 게시 요청은 Unleash에 내장된 프런트엔드 API에서 지원되지 않습니다. |
| 실험적인 | 아니요 | {} | 선택적 실험을 활성화합니다. togglesStorageTTL : 스토리지의 토글이 유효한 것으로 간주되며 시작 시 가져오면 안 되는 기간(Time To Live)(초)입니다. 0으로 설정하면 만료 확인이 비활성화되고 항상 만료된 것으로 간주됩니다. |
클라이언트는 이벤트 방출자이기도 합니다. 이는 코드가 클라이언트의 업데이트를 구독할 수 있음을 의미합니다. 이는 토글 상태 업데이트 시 단일 페이지 앱을 업데이트하는 깔끔한 방법입니다.
unleash . on ( 'update' , ( ) => {
const myToggle = unleash . isEnabled ( 'proxy.demo' ) ;
//do something useful
} ) ; 추신!
unleash.start()호출하기 전에 항상 이벤트 리스너를 등록해야 한다는 점을 기억하세요. SDK를 시작한 후에 등록하면 중요한 이벤트가 손실될 위험이 있습니다.
"컨텍스트"를 통해 사용자 정의 세션 ID를 제공할 수 있습니다. sessionId를 제공하지 않으면 이 SDK는 제공된 저장소(로컬 저장소)에도 저장되는 임의의 세션 ID를 생성합니다. 항상 일관된 sessionId를 사용하면 점진적인(백분율 기반) 출시와 함께 기능 토글을 평가할 때 "익명" 사용자라도 일관된 경험을 얻을 수 있습니다.
stop 메소드를 호출하여 Unleash 클라이언트를 중지할 수 있습니다. 클라이언트가 중지되면 더 이상 업데이트를 확인하거나 메트릭을 서버로 보내지 않습니다.
중지된 클라이언트를 다시 시작할 수 있습니다 .
unleash . stop ( )이 SDK는 React Native Storage @react-native-async-storage/async-storage 또는 React-native-shared-preferences 등과 함께 작동하여 로컬로 백업 기능 토글을 수행할 수 있습니다. 이는 사용자가 다음에 애플리케이션으로 돌아올 때 SDK를 부트스트랩하는 데 유용합니다.
자신만의 스토리지 구현을 제공할 수 있습니다.
예:
import SharedPreferences from 'react-native-shared-preferences' ;
import { UnleashClient } from 'unleash-proxy-client' ;
const unleash = new UnleashClient ( {
url : 'https://eu.unleash-hosted.com/hosted/proxy' ,
clientKey : 'your-proxy-key' ,
appName : 'my-webapp' ,
storageProvider : {
save : ( name : string , data : any ) => SharedPreferences . setItem ( name , data ) ,
get : ( name : string ) => SharedPreferences . getItem ( name , ( val ) => val )
} ,
} ) ; import AsyncStorage from '@react-native-async-storage/async-storage' ;
import { UnleashClient } from 'unleash-proxy-client' ;
const PREFIX = 'unleash:repository' ;
const unleash = new UnleashClient ( {
url : 'https://eu.unleash-hosted.com/hosted/proxy' ,
clientKey : 'your-proxy-key' ,
appName : 'my-webapp' ,
storageProvider : {
save : ( name : string , data : any ) => {
const repo = JSON . stringify ( data ) ;
const key = ` ${ PREFIX } : ${ name } ` ;
return AsyncStorage . setItem ( key , repo ) ;
} ,
get : ( name : string ) => {
const key = ` ${ PREFIX } : ${ name } ` ;
const data = await AsyncStorage . getItem ( key ) ;
return data ? JSON . parse ( data ) : undefined ;
}
} ,
} ) ; 이 SDK는 node.js 애플리케이션(v1.4.0부터)에서도 사용할 수 있습니다. 유효한 "가져오기" 구현을 제공해야 합니다. 이 패키지에서는 ECMAScript 모듈만 내보냅니다.
import fetch from 'node-fetch' ;
import { UnleashClient , InMemoryStorageProvider } from 'unleash-proxy-client' ;
const unleash = new UnleashClient ( {
url : 'https://app.unleash-hosted.com/demo/proxy' ,
clientKey : 'proxy-123' ,
appName : 'nodejs-proxy' ,
storageProvider : new InMemoryStorageProvider ( ) ,
fetch ,
} ) ;
await unleash . start ( ) ;
const isEnabled = unleash . isEnabled ( 'proxy.demo' ) ;
console . log ( isEnabled ) ;index.mjs
< html >
< head >
< script src =" https://unpkg.com/unleash-proxy-client@latest/build/main.min.js " type =" text/javascript " > </ script >
< script type =" text/javascript " >
var config = { url : 'https://app.unleash-hosted.com/demo/proxy' , clientKey : 'proxy-123' , appName : 'web' } ;
var client = new unleash . UnleashClient ( config ) ;
client . updateContext ( { userId : '1233' } )
client . on ( 'update' , ( ) => {
console . log ( client . isEnabled ( 'proxy.demo' ) ) ;
} ) ;
client . start ( ) ;
</ script >
</ head >
</ html > 이제 API 호출을 원하지 않을 때 자체 기능 토글 구성으로 SDK를 부트스트랩할 수 있습니다.
이는 SDK를 초기화한 직후 토글이 특정 상태에 있어야 하는 경우에도 유용합니다.
새로운 UnleashClient 생성할 때 bootstrap 속성을 추가하세요.
기본적으로 true 인 bootstrapOverride 속성도 있습니다.
import { UnleashClient } from 'unleash-proxy-client' ;
const unleash = new UnleashClient ( {
url : 'https://app.unleash-hosted.com/demo/proxy' ,
clientKey : 'proxy-123' ,
appName : 'nodejs-proxy' ,
bootstrap : [ {
"enabled" : true ,
"name" : "demoApp.step4" ,
"variant" : {
"enabled" : true ,
"name" : "blue" ,
"feature_enabled" : true ,
}
} ] ,
bootstrapOverride : false
} ) ; 참고:bootstrapOverride 가 true (기본값)이면 로컬에 캐시된 데이터가 지정된 부트스트랩으로 재정의됩니다.
bootstrapOverride 가 false 인 경우 로컬 캐시가 비어 있지 않으면 로컬 캐시 데이터가 재정의되지 않습니다.
refreshInterval 및/또는 metricsInterval 옵션을 0 으로 설정하여 Unleash 기능 플래그 자동 새로 고침 메커니즘 및 메트릭 업데이트를 선택 해제할 수 있습니다. 이 경우 updateToggles 및/또는 sendMetrics 메소드를 호출하는 것은 귀하의 책임입니다. 이 접근 방식은 서비스 워커와 같이 setInterval API를 지원하지 않는 환경에서 유용합니다.
