### Initializing Vue 3 Application with Vuex, Quasar, and Vue Router Source: https://github.com/vitalets/tinkoff-invest-api/blob/main/investAPI-main/src/docs/ws/ws-instruments/index.html This JavaScript code initializes a Vue 3 application, setting up a Vuex store for state management and integrating the Quasar UI framework with its Dialog and Notify plugins. It also prepares for Vue Router integration, creating the main application instance and mounting it to the DOM. ```JavaScript import { createApp } from 'vue' import { createStore } from 'vuex' import { WSockView, WStore } from './instruments.js' import { useQuasar, Quasar, Dialog, Notify } from 'Quasar' import { createRouter, createWebHashHistory } from 'vue-router' const store = createStore(WStore); const app = createApp(WSockView) app.use(store) app.use(Quasar, { plugins: { Dialog, Notify } }) app.mount('#root') ``` -------------------------------- ### Configuring Web Module Import Map Source: https://github.com/vitalets/tinkoff-invest-api/blob/main/investAPI-main/src/docs/ws/ws-instruments/index.html This snippet defines an import map, a mechanism for controlling the behavior of JavaScript module imports in web browsers. It maps module specifiers to their corresponding URLs, allowing for consistent and versioned module loading without relying on full URLs in every import statement. ```JavaScript { "imports": { "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js", "vuex": "https://unpkg.com/vuex@4.1.0/dist/vuex.esm-browser.js", "vue-router": "https://unpkg.com/vue-router@4.0.15/dist/vue-router.esm-browser.js", "vue-json-viewer": "https://unpkg.com/vue-json-viewer@3.0.4/vue-json-viewer.js", "Quasar": "https://unpkg.com/quasar@2.11.5/dist/quasar.esm.prod.js", "@vue/devtools-api": "https://unpkg.com/@vue/devtools-api@6.4.5/lib/esm/index.js", "axios": "https://unpkg.com/axios@1.4.0/dist/esm/axios.min.js", "ramda": "https://unpkg.com/ramda@0.29.0/dist/ramda.js" } } ``` -------------------------------- ### Receiving Trades Stream Response (Deprecated) - Tinkoff Invest API - JSON Source: https://github.com/vitalets/tinkoff-invest-api/blob/main/investAPI-main/src/docs/ws/index.html This JSON snippet provides an example response from the deprecated Trades Stream, detailing trade information for a specific order. It includes the orderId, createdAt timestamp, direction, figi, and a list of individual trades with their respective prices and quantities. This stream is superseded by the Order State Stream. ```JSON { "orderTrades": { "orderId": "36042910361", "createdAt": "2023-05-16T13:27:14.682140664Z", "direction": "ORDER_DIRECTION_SELL", "figi": "BBG00RPRPX12", "trades": [ { "dateTime": "2023-05-16T13:27:13.423246Z", "price": { "units": "1", "nano": 235000000 }, "quantity": "1", "tradeId": "7653265991" } ], "accountId": "*accountId", "instrumentUid": "ade12bc5-07d9-44fe-b27a-1543e05bacfd" } } ``` -------------------------------- ### Vue.js Application Initialization and Mounting Source: https://github.com/vitalets/tinkoff-invest-api/blob/main/investAPI-main/src/docs/ws/websock/index.html Initializes the Vue Router with a hash history and the defined routes. It then creates a Vuex store, registers a global navigation guard to commit route metadata to the store, and finally creates and mounts the main Vue application instance, integrating the store, router, and Quasar plugins. ```JavaScript const router = createRouter({ history: createWebHashHistory(), routes, }) const store = createStore(WStore); router.beforeEach((to, from, next) => { store.commit('onRouteChange', to.meta) next(); }) const app = createApp(WSockView) app.use(store) app.use(Quasar, { plugins: { Dialog, Notify } }) app.use(router) app.mount('#root') ``` -------------------------------- ### Initializing Swagger UI for OpenAPI Specification - JavaScript Source: https://github.com/vitalets/tinkoff-invest-api/blob/main/investAPI-main/src/docs/swagger-ui/index.html This JavaScript snippet initializes the Swagger UI bundle when the window loads. It configures Swagger UI to load the OpenAPI specification from './openapi.yaml', target the '#swagger-ui' DOM element, enable deep linking, and use the default API presets. ```JavaScript window.onload = function () { window.ui = SwaggerUIBundle({ url: './openapi.yaml', dom_id: '#swagger-ui', deepLinking: true, presets: [SwaggerUIBundle.presets.apis] }); }; ``` -------------------------------- ### Basic Page Styling with CSS Source: https://github.com/vitalets/tinkoff-invest-api/blob/main/investAPI-main/src/docs/swagger-ui/index.html This CSS snippet defines global box-sizing rules for all elements and sets the body's margin and background color. It ensures a consistent box model and a clean, light background for the page. ```CSS html { box-sizing: border-box; overflow: -moz-scrollbars-vertical; overflow-y: scroll; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; background: #fafafa; } ``` -------------------------------- ### Capturing Response Metadata in Java Source: https://github.com/vitalets/tinkoff-invest-api/blob/main/investAPI-main/src/docs/faq_java.md This Java snippet shows how to use MetadataUtils.newCaptureMetadataInterceptor to capture response headers and trailers from a gRPC call. The captured metadata, including tracking IDs and error descriptions, becomes available in the headersCapture variable after the method execution. ```Java var headersCapture = new AtomicReference(); var trailersCapture = new AtomicReference(); instruments.withInterceptors(MetadataUtils.newCaptureMetadataInterceptor(headersCapture, trailersCapture)).getInstrumentBy(...); ``` -------------------------------- ### Import Map Configuration for Vue.js Application Source: https://github.com/vitalets/tinkoff-invest-api/blob/main/investAPI-main/src/docs/ws/websock/index.html Defines an import map for the application, mapping module specifiers to their corresponding URLs, primarily for Vue.js, Vuex, Vue Router, Quasar, and other related libraries. This allows for direct browser imports without a build step. ```JSON { "imports": { "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js", "vuex": "https://unpkg.com/vuex@4.1.0/dist/vuex.esm-browser.js", "vue-router": "https://unpkg.com/vue-router@4.0.15/dist/vue-router.esm-browser.js", "vue-json-viewer": "https://unpkg.com/vue-json-viewer@3.0.4/vue-json-viewer.js", "Quasar": "https://unpkg.com/quasar@2.11.5/dist/quasar.esm.prod.js", "@vue/devtools-api": "https://unpkg.com/@vue/devtools-api@6.4.5/lib/esm/index.js" } } ``` -------------------------------- ### Implementing an Authentication Interceptor in Java Source: https://github.com/vitalets/tinkoff-invest-api/blob/main/investAPI-main/src/docs/faq_java.md This Java class demonstrates how to create a gRPC ClientInterceptor to add an Authorization header with a Bearer token to outgoing requests. It's crucial for authenticating API calls by injecting the token into the request metadata before the call is sent to the server. ```Java public class AuthInterceptor implements ClientInterceptor { private static final String AUTH_HEADER_NAME = "Authorization"; private static final Metadata.Key AUTH_HEADER = Metadata.Key.of(AUTH_HEADER_NAME, Metadata.ASCII_STRING_MARSHALLER); private final String authHeaderValue; public AuthInterceptor(String token) { this.authHeaderValue = "Bearer " + token; } @Override public ClientCall interceptCall(MethodDescriptor methodDescriptor, CallOptions callOptions, Channel channel) { var call = channel.newCall(methodDescriptor, callOptions); return new ForwardingClientCall.SimpleForwardingClientCall<>(call) { @Override public void start(Listener responseListener, Metadata headers) { headers.put(AUTH_HEADER, authHeaderValue); super.start(responseListener, headers); } }; } } ``` -------------------------------- ### Receiving Order State Stream Response - Tinkoff Invest API - JSON Source: https://github.com/vitalets/tinkoff-invest-api/blob/main/investAPI-main/src/docs/ws/index.html This JSON snippet illustrates a sample response from the Order State Stream, providing detailed information about an order's current status. It includes fields such as orderId, executionReportStatus, ticker, direction, and financial details like initialOrderPrice and executedOrderPrice, along with a list of associated trades. ```JSON { "orderState": { "orderId": "49478317886", "orderRequestId": "ec5e2892-58ca-4851-bc47-c2acf1368fde", "clientCode": "770083706834", "createdAt": "2024-07-15T07:07:17.321267Z", "executionReportStatus": "EXECUTION_REPORT_STATUS_NEW", "ticker": "POLY", "classCode": "TQBR", "lotSize": 1, "direction": "ORDER_DIRECTION_BUY", "timeInForce": "TIME_IN_FORCE_DAY", "orderType": "ORDER_TYPE_LIMIT", "accountId": "123456789", "initialOrderPrice": { "currency": "RUB", "units": "195", "nano": 200000000 }, "orderPrice": { "currency": "RUB", "units": "195", "nano": 200000000 }, "amount": { "currency": "RUB", "units": "195", "nano": 200000000 }, "executedOrderPrice": { "currency": "RUB", "units": "195", "nano": 200000000 }, "currency": "123456789", "lotsRequested": "1", "lotsExecuted": "1", "lotsLeft": "0", "lotsCancelled": "0", "marker": "MARKER_UNKNOWN", "trades": [ { "dateTime": "2024-07-15T07:07:17.321267Z", "price": { "units": "195", "nano": 200000000 }, "quantity": "1", "tradeId": "7653265991" } ], "exchange": "MOEX", "instrumentUid": "127361c2-32ec-448c-b3ec-602166f537ea" } } ``` -------------------------------- ### Vue.js Application Imports and API Stream Routes Source: https://github.com/vitalets/tinkoff-invest-api/blob/main/investAPI-main/src/docs/ws/websock/index.html Imports necessary modules for a Vue.js application, including core Vue, Vuex, Vue Router, Quasar components, and local views/stores. It then defines an array of routes for the Vue Router, mapping different Tinkoff Invest API streaming service endpoints to the WSockView component, each with specific request payloads for subscription. ```JavaScript import { createApp } from 'vue' import { createStore } from 'vuex' import WSockView from './wsockview.js' import WStore from './store.js' import { useQuasar, Quasar, Dialog, Notify } from 'Quasar' import { createRouter, createWebHashHistory } from 'vue-router' const routes = [ { path: '/', component: WSockView, alias:'/tinkoff.public.invest.api.contract.v1.MarketDataStreamService/MarketDataStream', meta: { methodName: '/tinkoff.public.invest.api.contract.v1.MarketDataStreamService/MarketDataStream', request: { json: JSON.stringify({ "subscribeCandlesRequest": { "subscriptionAction": "SUBSCRIPTION_ACTION_SUBSCRIBE", "instruments": [ { "figi": "BBG001J4BCN4", "interval": "SUBSCRIPTION_INTERVAL_ONE_MINUTE" }, { "figi": "BBG0013HG026", "interval": "SUBSCRIPTION_INTERVAL_ONE_MINUTE" }, { "figi": "BBG004730RP0", "interval": "SUBSCRIPTION_INTERVAL_ONE_MINUTE", "instrumentId": "c7c26356-7352-4c37-8316-b1d93b18e16e" } ], "waitingClose": false } }, null, 2) } } }, { path: '/tinkoff.public.invest.api.contract.v1.OperationsStreamService/PortfolioStream', component: WSockView, meta: { methodName: '/tinkoff.public.invest.api.contract.v1.OperationsStreamService/PortfolioStream', request: { json: JSON.stringify({ "accounts": [ "Paste account id here" ] }, null, 2) } } }, { path: '/tinkoff.public.invest.api.contract.v1.OperationsStreamService/PositionsStream', component: WSockView, meta: { methodName: '/tinkoff.public.invest.api.contract.v1.OperationsStreamService/PositionsStream', request: { json: JSON.stringify({ "accounts": [ "Paste account id here" ] }, null, 2) } } }, { path: '/tinkoff.public.invest.api.contract.v1.OrdersStreamService/TradesStream', component: WSockView, meta: { methodName: '/tinkoff.public.invest.api.contract.v1.OrdersStreamService/TradesStream', request: { json: JSON.stringify({ "accounts": [ "Paste account id here" ] }, null, 2) } } }, { path: '/tinkoff.public.invest.api.contract.v1.OrdersStreamService/OrderStateStream', component: WSockView, meta: { methodName: '/tinkoff.public.invest.api.contract.v1.OrdersStreamService/OrderStateStream', request: { json: JSON.stringify({ "accounts": [ "Paste account id here" ] }, null, 2) } } } ] ``` -------------------------------- ### Requesting Order State Stream - Tinkoff Invest API - JSON Source: https://github.com/vitalets/tinkoff-invest-api/blob/main/investAPI-main/src/docs/ws/index.html This JSON snippet demonstrates the structure for requesting an order state stream from the Tinkoff Invest API. It requires an array of account IDs for which order updates are desired. The *accountId placeholder should be replaced with a valid account identifier. ```JSON { "accounts": [ "*accountId" ] } ``` -------------------------------- ### Requesting Trades Stream (Deprecated) - Tinkoff Invest API - JSON Source: https://github.com/vitalets/tinkoff-invest-api/blob/main/investAPI-main/src/docs/ws/index.html This JSON snippet shows the request format for the deprecated Trades Stream. Similar to the Order State Stream, it requires an array of account IDs. Users are advised to use the Order State Stream for better performance and more comprehensive data. ```JSON { "accounts": [ "*accountId" ] } ``` -------------------------------- ### Handling OAuth2 Redirect in Swagger UI (JavaScript) Source: https://github.com/vitalets/tinkoff-invest-api/blob/main/investAPI-main/src/docs/swagger-ui/oauth2-redirect.html This JavaScript function processes the OAuth2 redirect response from an authorization server for Swagger UI. It parses the URL's hash or search parameters to extract authorization codes or tokens, validates the 'state' parameter for security, and then updates the `swaggerUIRedirectOauth2` object with the received credentials or reports errors. It supports 'accessCode' and 'authorizationCode' flows and closes the window upon completion. ```JavaScript 'use strict'; function run () { var oauth2 = window.opener.swaggerUIRedirectOauth2; var sentState = oauth2.state; var redirectUrl = oauth2.redirectUrl; var isValid, qp, arr; if (/code|token|error/.test(window.location.hash)) { qp = window.location.hash.substring(1).replace('?', '&'); } else { qp = location.search.substring(1); } arr = qp.split("&"); arr.forEach(function (v,i,_arr) { _arr[i] = '"' + v.replace('=', '":"') + '"';}); qp = qp ? JSON.parse('{' + arr.join() + '}', function (key, value) { return key === "" ? value : decodeURIComponent(value); } ) : {}; isValid = qp.state === sentState; if (( oauth2.auth.schema.get("flow") === "accessCode" || oauth2.auth.schema.get("flow") === "authorizationCode" || oauth2.auth.schema.get("flow") === "authorization_code" ) && !oauth2.auth.code) { if (!isValid) { oauth2.errCb({ authId: oauth2.auth.name, source: "auth", level: "warning", message: "Authorization may be unsafe, passed state was changed in server. The passed state wasn't returned from auth server." }); } if (qp.code) { delete oauth2.state; oauth2.auth.code = qp.code; oauth2.callback({auth: oauth2.auth, redirectUrl: redirectUrl}); } else { let oauthErrorMsg; if (qp.error) { oauthErrorMsg = "["+qp.error+"]: " + (qp.error_description ? qp.error_description+ ". " : "no accessCode received from the server. ") + (qp.error_uri ? "More info: "+qp.error_uri : ""); } oauth2.errCb({ authId: oauth2.auth.name, source: "auth", level: "error", message: oauthErrorMsg || "[Authorization failed]: no accessCode received from the server." }); } } else { oauth2.callback({auth: oauth2.auth, token: qp, isValid: isValid, redirectUrl: redirectUrl}); } window.close(); } if (document.readyState !== 'loading') { run(); } else { document.addEventListener('DOMContentLoaded', function () { run(); }); } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.