Прокси-клиент JavaScript — это крошечный клиент Unleash, написанный на JavaScript без каких-либо внешних зависимостей (кроме API браузера). Этот клиент сохраняет переключатели, относящиеся к текущему пользователю, в localStorage
и синхронизируется с Unleash (интерфейсным API Unleash или прокси-сервером Unleash) в фоновом режиме. Поскольку переключатели хранятся в браузере пользователя, клиент может использовать их для начальной загрузки при следующем посещении пользователем той же веб-страницы.
Этот клиент ожидает, fetch
будет доступна. Если вам нужна поддержка старых браузеров, вам, вероятно, следует использовать полифил fetch.
Этот пакет не привязан ни к какому фреймворку, но может использоваться вместе с большинством популярных фреймворков, примеры:
npm install unleash - proxy - client
СОВЕТ : Будучи клиентским SDK, этот SDK требует подключения либо к прокси-серверу Unleash, либо к интерфейсному API Unleash. Дополнительную информацию см. в разделе «Параметры подключения».
Настройте клиент в соответствии с вашими потребностями. В следующем примере представлены только обязательные параметры. Полный список см. в разделе о доступных опциях.
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 к интерфейсному API вашего экземпляра Unleash, используйте URL-адрес внешнего API вашего экземпляра Unleash ( <unleash-url>/api/frontend
) в качестве параметра url
. В качестве параметра clientKey
используйте токен FRONTEND
сгенерированный из вашего экземпляра Unleash. Необходимые шаги см. в руководстве по созданию токенов API .
Чтобы подключить этот SDK к прокси-серверу Unleash, используйте URL-адрес прокси-сервера и ключ прокси-клиента. Раздел конфигурации документации Unleash Proxy содержит дополнительную информацию о том, как настроить клиентские ключи для вашего прокси.
Вам следует дождаться событий 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 используется для оценки функций по атрибутам текущего пользователя. Чтобы обновить и настроить контекст Unleash в этом SDK, используйте методы 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 | да | н/д | URL-адрес Unleash Proxy для подключения. Например: https://examples.com/proxy |
клиентКей | да | н/д | Секрет раскрытия прокси-сервера, который будет использоваться |
имя приложения | да | н/д | Имя приложения, использующего этот SDK. Будет использоваться как часть показателей, отправляемых в Unleash Proxy. Также будет частью Unleash Context. |
контекст | нет | {} | Начальный контекст Unleash. Это будет использоваться в качестве исходного контекста для всех оценок переключения функций. Параметры appName и environment будут автоматически заполнены значениями, которые вы передаете для этих параметров. |
обновитьИнтервал | нет | 30 | Как часто (в секундах) SDK должен проверять наличие обновленной конфигурации переключателя. Если установлено значение 0, проверка обновлений будет отключена. |
отключитьОбновить | нет | false | Если установлено значение true, клиент не будет проверять наличие обновленной конфигурации переключателя. |
метрикиИнтервал | нет | 60 | Как часто (в секундах) SDK должен отправлять показатели использования обратно в Unleash Proxy. Он будет запущен после первоначального отчета по метрикам, который отправляется после настроенного metricsIntervalInitial |
метрикиИнтервалинитиал | нет | 2 | Как долго SDK должен ждать первого отчета о метриках обратно в Unleash API. Если вы хотите отключить первоначальный вызов метрик, вы можете установить для него значение 0. |
отключить метрику | нет | false | Установите для этого параметра значение true если вы хотите отключить показатели использования. |
StorageProvider | нет | LocalStorageProvider в браузере, InMemoryStorageProvider в противном случае. | Позволяет вам внедрить собственный storeProvider. |
принести | нет | window.fetch или глобальная fetch | Позволяет переопределить используемую реализацию выборки. Полезно в средах Node.js, где вы можете внедрить node-fetch |
создатьAbortController | нет | () => new AbortController() | Позволяет переопределить создание AbortController по умолчанию. Используется для отмены запросов с устаревшим контекстом. Установите для него значение () => null если вы не хотите его обрабатывать. |
самозагрузка | нет | [] | Позволяет вам загрузить конфигурацию переключения кэшированных функций. |
начальная загрузкаOverride | нет | true | Если загрузочный файл автоматически переопределяет кэшированные данные в локальном хранилище. Будет использоваться только в том случае, если начальная загрузка не является пустым массивом. |
имя заголовка | нет | Authorization | Какой заголовок SDK должен использовать для авторизации с помощью Unleash/Unleash Proxy. Заголовку будет присвоено значение clientKey . |
пользовательские заголовки | нет | {} | Дополнительные заголовки, используемые при отправке HTTP-запросов к прокси-серверу Unleash. В случае конфликта имен с заголовками по умолчанию будет использоваться значение customHeaders , если оно не равно null или undefined . Значения customHeaders , имеющие значение null или undefined будут игнорироваться. |
ВпечатленияДанныеВсе | нет | false | Позволяет запускать события «показов» для всех вызовов getToggle и getVariant . Это особенно полезно для «отключенных» переключателей функций, которые не видны интерфейсным SDK. |
среда | нет | default | Устанавливает параметр environment контекста Unleash. Это не влияет на среду Unleash SDK. |
использоватьPOSTrequests | нет | false | Настраивает клиент на использование запросов POST вместо GET при запросе включенных функций. Это полезно, когда конфиденциальная информация (например, адрес электронной почты пользователя, если он используется в качестве идентификатора пользователя) передается в контексте, чтобы избежать ее утечки в URL-адресе. ПРИМЕЧАНИЕ. Запросы на публикацию не поддерживаются интерфейсным API, встроенным в Unleash. |
экспериментальный | нет | {} | Включение дополнительных экспериментов. togglesStorageTTL : как долго (время жизни) в секундах переключатели в хранилище считаются действительными и не должны выбираться при запуске. Если установлено значение 0, проверка срока действия будет отключена, и срок действия будет считаться всегда истекшим. |
Клиент также является источником событий. Это означает, что ваш код может подписаться на обновления от клиента. Это удобный способ обновить одностраничное приложение при переключении обновлений состояния.
unleash . on ( 'update' , ( ) => {
const myToggle = unleash . isEnabled ( 'proxy.demo' ) ;
//do something useful
} ) ;
ПС! Помните, что вам всегда следует регистрировать прослушиватели событий перед вызовом
unleash.start()
. Если вы зарегистрируете их после запуска SDK, вы рискуете потерять важные события.
Вы можете указать собственный идентификатор сеанса через «контекст». Если вы не укажете идентификатор сеанса, этот SDK создаст случайный идентификатор сеанса, который также будет сохранен в предоставленном хранилище (локальном хранилище). Постоянное наличие согласованного идентификатора сеанса гарантирует, что даже «анонимные» пользователи будут получать единообразную работу при оценке переключения функций в сочетании с постепенным (в процентах) развертыванием.
Вы можете остановить клиент Unleash, вызвав метод stop
. После остановки клиента он больше не будет проверять наличие обновлений или отправлять метрики на сервер.
Остановленный клиент можно перезапустить.
unleash . stop ( )
Этот SDK может работать с хранилищем React Native @react-native-async-storage/async-storage или response-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 (начиная с версии 1.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 >
Теперь можно загрузить SDK с собственной конфигурацией переключения функций, если вы не хотите выполнять вызов API.
Это также полезно, если вам необходимо, чтобы переключатели находились в определенном состоянии сразу после инициализации SDK.
Добавьте атрибут bootstrap
при создании нового UnleashClient
.
Также имеется атрибут bootstrapOverride
, который по умолчанию имеет значение true
.
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
любые локальные кешированные данные не будут переопределены, если локальный кеш не пуст.
Вы можете отказаться от механизма автоматического обновления флага функции Unleash и обновления метрик, установив для refreshInterval
и/или metricsInterval
значение 0
. В этом случае вы несете ответственность за вызов методов updateToggles
и/или sendMetrics
. Этот подход полезен в средах, которые не поддерживают API setInterval
, например, в сервисных работниках.