{"id":15297301,"url":"https://github.com/axway-streams/streamdataio-js-sdk","last_synced_at":"2025-04-13T23:16:08.486Z","repository":{"id":33538096,"uuid":"37184226","full_name":"axway-streams/streamdataio-js-sdk","owner":"axway-streams","description":"The Streamdata.io JavaScript SDK","archived":false,"fork":false,"pushed_at":"2023-01-03T19:22:10.000Z","size":3291,"stargazers_count":7,"open_issues_count":15,"forks_count":4,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-11T23:17:32.963Z","etag":null,"topics":["js","sdk","server-sent-events","sse","streamdataio","streaming-data"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/axway-streams.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-10T08:13:13.000Z","updated_at":"2020-11-30T10:28:11.000Z","dependencies_parsed_at":"2023-01-15T01:20:48.891Z","dependency_job_id":null,"html_url":"https://github.com/axway-streams/streamdataio-js-sdk","commit_stats":null,"previous_names":["streamdataio/streamdataio-js-sdk"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axway-streams%2Fstreamdataio-js-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axway-streams%2Fstreamdataio-js-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axway-streams%2Fstreamdataio-js-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axway-streams%2Fstreamdataio-js-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/axway-streams","download_url":"https://codeload.github.com/axway-streams/streamdataio-js-sdk/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248492885,"owners_count":21113163,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["js","sdk","server-sent-events","sse","streamdataio","streaming-data"],"created_at":"2024-09-30T19:16:32.387Z","updated_at":"2025-04-13T23:16:08.464Z","avatar_url":"https://github.com/axway-streams.png","language":"CSS","readme":"streamdata.io javascript sdk\n============================\n----------------------------\n\n\nIntroduction\n============\n\n**\u003ca href=\"http://streamdata.io\" target=\"_blank\"\u003estreamdata.io\u003c/a\u003e** is a real-time cache proxy allowing you to poll standard public REST APIs and push updates to clients.\nBut wait, there is more: streamdata.io keeps an history of modifications that occur on the data between two polling! This way, streamdata.io is able to give you the list of modifications which happened since last time you fetched the data.\n\nIn other words, streamdata.io is the perfect cache to dramatically reduce the bandwidth consumption to transfer data that change both rarely and frequently.\n\n## Features\n\n* Incremental data update: replacing polling by push is not enough to minimize data streams. That's why streamdata.io pushes only the part that has changed.\n* \u003ca href=\"http://www.w3.org/TR/eventsource/\" target=\"_blank\"\u003eServer-Sent-Events (SSE)\u003c/a\u003e: updates are pushed to the client using SSE protocol. By providing fallback mechanisms streamdata.io can also work with older browsers.\n* API Cache: to reduce server load and latency, streamdata.io has an integrated cache mechanism.\n\n\nThis Javascript SDK facilitates the usage of streamdata.io.\n\nFollow this quick start guide to easily integrate streamdata.io into your application.\n\nGetting Started\n===============\n\n## 1. Get the SDK\n\n### 1.1 Prerequisites\n\nHaving node.js and npm installed on your computer.\n\n### 1.2 Option 1 : Build SDK from source\n\nThen check out the project from git and simply run the following command lines to build the sdk file from source:\n\n```\nnpm install \n```\nThis will install npm components for the build.\n\n```\nnpm run build\n```\nThe result of this will be available in the dist/ folder :\n  * dist/bundles\n    * streamdataio.d.ts : typescript definition file\n    * streamdataio-web.js and streamdataio-web.min.js : js files for web framework (plain, jquery, angular, vuejs)\n    * streamdataio-node.js and streamdataio-node.min.js : js files for node.js \n  * dist/commonjs\n    * SDK compile for commonjs target\n  * dist/es6\n    * SDK compile for es6 target\n  * dist/src\n    * Source files of typescript definition\n  \n\n### 1.3 Option 2 : install the SDK from npm\n\nThe streamdataio-js-sdk is available through a npm package.\n\nYou can install it through the following command line :\n\n```\nnpm install streamdataio-js-sdk --save\n```\n\nDistribution files will be available in node_modules/streamdataio-js-sdk/dist/bundles folder. Use respectively streamdataio.min.js for Web environment or streamdataio-node.min.js for Node.Js environment\n\n### 1.4 Option 3 : via CDN\n\nstreamdataio JS SDK is available via CDN at the following link :\n\n```\nhttps://cdn.rawgit.com/streamdataio/streamdataio-js-sdk/master/dist/bundles/streamdataio.min.js\n```\n\nThis method must be used only for dev/testing purpose.\n\n## 2. Add SDK to your application\n\nAdd reference to the streamdataio.min.js file in your application code. Usually this is done by using a script html tag into your main page:\n\n```html\n\u003cscript src=\"streamdataio.min.js\"\u003e\u003c/script\u003e\n```\n\nBy doing this, you access in your JavaScript code to the ```streamdataio``` object which is the central point of all streamdata.io SDK API.\n\n\n## 3. Use streamdata.io to connect to your API\n\nCreate a ```StreamDataEventSource``` object into your JavaScript code.\n\n```javascript\n    var myEvent = streamdataio.createEventSource(\"http://mysite.com/myRestService\",\u003capp_token\u003e);\n```\n\nThe ```StreamDataEventSource``` is the entry point for establishing a data stream connection to the given URL.\n\nIt uses an application **token** to identify and authorize the stream connection to be established.\n\nTo get a valid **token**, please visit \u003ca href=\"http://streamdata.io\" target=\"_blank\"\u003estreamdata.io web site\u003c/a\u003e to register and create an application.\n\nIt uses standard HTTP Server-Sent Events to get the data you required through streamdata.io proxy.\n\nIf your API requires specific headers, simply pass them as an array on the event source creation, and streamdata.io will forward them to your Information System.\n\nAn optional ```headers``` parameter can be passed to the ```createEventSource``` method.\n\nIt must be an array with the following structure:\n```\n['header1: headervalue1', 'header2: headervalue2']\n```\n\nHere is an example to add a Basic authorization header to your target API call:\n\n```javascript\n\n    // Your api URL\n    var url = 'http://mysite.com/myJsonRestService';\n\n    // add whatever header required by your API\n    var headers = ['Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ=='];\n\n    var myEventSource = streamdataio.createEventSource(url,\u003capp_token\u003e, headers);\n```\n\n## 4. Handle data reception\n\nstreamdata.io SDK handles data from the targeted REST service as JSON objects.\n\nWhen the ```StreamDataEventSource``` object is opened, the initial set of data is returned as it would be with a standard call to the service URL. This data set is called the **snapshot**. The SDK returns it through the ```onData``` callback.\n\nThe updates of this initial set will come subsequently in the \u003ca href=\"http://jsonpatch.com/\" target=\"_blank\"\u003eJSON-Patch\u003c/a\u003e format through the ```onPatch``` callback. Such a data update is called a **patch**.\n\nYou can define your callback functions as follows:\n\n```javascript\n    myEventSource.onData(function(data){\n        // initialize your data with the initial snapshot\n    }).onPatch(function(patch){\n        // update the data with the provided patch\n    }).onError(function(error){\n        // do whatever you need in case of error\n    }).onOpen(function(){\n        // you can also add custom behavior when the stream is opened\n    });\n```\n\n## 5. Start receiving data\n\n```javascript\n    myEventSource.open();\n```\n\nExamples\n========\n\n## 1. Simple Javascript source code integration\n\nHere is a complete example of how to use the different callbacks of the streamdata.io SDK.\n\nYou can copy/paste this piece of code in a HTML page and test it.\n\nEach callback will be described in further details in the Public API JavaScript doc section.\n\n\n```javascript\n\u003c!-- include streamdataio library --\u003e\n\u003cscript src=\"streamdataio.min.js\" /\u003e\n\n\u003c!-- use json-patch-duplex library for applying patches --\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/fast-json-patch/0.5.1/json-patch-duplex.min.js\" /\u003e\n\n\u003cscript\u003e\n(function() {\n  var eventSource = null;\n  var stocks = [];\n\n  function connect() {\n    // REPLACE WITH YOUR OWN TOKEN HERE\n    var appToken = \"NmEtYTljN2UtYmM1MGZlMGRiNGFQzYS00MGRkLTkNTZlMDY1\";\n\n    // create the StreamdataEventSource Object\n    eventSource = streamdataio.createEventSource(\"http://myRestservice.com/stocks\", appToken);\n\n    eventSource\n     .onOpen(function() {\n       console.log(\"streamdata Event Source connected.\")\n     })\n     .onData(function(data) {\n       // json object stored locally.\n       stocks = data;\n     })\n     .onPatch(function(patch) {\n       // use json patch library to apply the patch (patch)\n       // to the original snapshot (stocks)\n       jsonpatch.apply(stocks, patch);\n     })\n     .onError(function(error) {\n       // displays the error message\n       console.log(error.getMessage());\n     });\n\n    // open the data stream to the REST service through streamdata.io proxy\n    eventSource.open();\n\n  };\n\n  function disconnect() {\n    if (eventSource) {\n      eventSource.close();\n      eventSource = null;\n    }\n  };\n\n  connect();\n})();\n\u003c/script\u003e\n\n```\n\n\n## 2. Example projects\n\nYou'll find on GitHub the following projects which integrates streamdata.io SDK within simple example applications.\n\n### 2.1 jQuery example\n\nA simple jQuery integration of market data with streamdata.io SDK.\n\n\u003ca href=\"https://github.com/streamdataio/streamdataio-js/tree/master/stockmarket-jquery\" target=\"_blank\"\u003eStock Market jQuery\u003c/a\u003e\n\n### 2.2 Angular.js example\n\nThe same market data example using Angular.js\n\n\u003ca href=\"https://github.com/streamdataio/streamdataio-js/tree/master/stockmarket-angular\" target=\"_blank\"\u003eStock Market AngularJS\u003c/a\u003e\n\n### 2.3 Angular example\n\nThe same market data example using Angular\n\n\u003ca href=\"https://github.com/streamdataio/streamdataio-js/tree/master/stockmarket-angular2\" target=\"_blank\"\u003eStock Market Angular\u003c/a\u003e\n\n### 2.4 VueJs example\n\nThe same market data example using VueJs\n\n\u003ca href=\"https://github.com/streamdataio/streamdataio-js/tree/master/stockmarket-vuejs\" target=\"_blank\"\u003eStock Market VueJs\u003c/a\u003e\n\n### 2.4 Node.js example\n\nThe same market data example using node.js\n\n\u003ca href=\"https://github.com/streamdataio/streamdataio-js/tree/master/stockmarket-nodejs\" target=\"_blank\"\u003eStock Market Node.js\u003c/a\u003e\n\n\nSecurity\n========\n\n## 1. TLS Encryption\nstreamdata.io proxy uses Transport Layer Security (TLS) as a default to encrypt messages while in transport across the Internet.\n\n**Recommendation**:\n\nEven if streamdata.io proxy can be used without TLS encryption, we strongly recommend to always use https (thus TLS) with applications using streamdata.io.\n\nUsing TLS ensures that client messages are protected when being sent to and from streamdata.io. This prevents intercepted messages from being viewed by unauthorized parties.\n\n## 2. Authentication with Token\n\nRunning an application in production through streamdata.io proxy requires an authentication mechanism.\n\nWhen registering on \u003ca href=\"http://streamdata.io\" target=\"_blank\"\u003estreamdata.io web site\u003c/a\u003e, you'll be provided with a unique **token** for your application and a **private key**.\n\nThis allows streamdata.io proxy to identify that a specific request comes from your application.\n\nThis **token** must be provided to the SDK in order to be able to use the streamdata.io proxy.\n\n```javascript\n    var appToken = \"NmEtYTljN2UtYmM1MGZlMGRiNGFQzYS00MGRkLTkNTZlMDY1\";\n    var myEventSource = streamdataio.createEventSource(\"http://mysite.com/myJsonRestService\", appToken);\n```\n\n## 3. Authentication with signature\n\nstreamdata.io SDK offers an optional Hash-based Message Authentication (HMAC) mechanism to enhance your requests security.\n\nIn order to use it, you'll first need to add streamdataio_auth javascript auth library to your project :\n\n\n```html\n\u003cscript src=\"/js/streamdataio-auth.min.js\"\u003e\u003c/script\u003e\n```\n\nThis auth javascript library is available :\n\n- in the github projet https://github.com/streamdataio/streamdataio-js\n\n- via npm through the following command line :\n```html\nnpm install streamdataio-js-sdk-auth\n```\n\nYou can then use a signatureStrategy object when creating your StreamDataEventSource as follow:\n\n\n```javascript\n    // setup headers\n    var headers = [];\n    // setup signatureStrategy\n    var signatureStrategy = AuthStrategy.newSignatureStrategy(\"NmEtYTljN2UtYmM1MGZlMGRiNGFQzYS00MGRkLTkNTZlMDY1\",\"NTEtMTQxNiWIzMDEC00OWNlLThmNGYtY2ExMDJxO00NzNhLTgtZWY0MjOTc2YmUxODFiZDU1NmU0ZDAtYWU5NjYxMGYzNDdi\");\n    // instantiate an eventSource\n    var eventSource = streamdataio.createEventSource(\"http://myRestservice.com/stocks\",\"NmEtYTljN2UtYmM1MGZlMGRiNGFQzYS00MGRkLTkNTZlMDY1\",headers,signatureStrategy);\n```\n\n\n**Important Note**:\n\nYour signatureStrategy is built using your **token** and **private key**.\n\nThe signatureStrategy will generate a signature specific to your data stream connection request.\n\nThis signature will be validated by streamdata.io proxy before authorizing your request to go through it.\n\n**Your private key must be kept secret**.\n\nCompression\n========\n\nServer-Sent event flow can be compressed on demand using **gzip** or **deflate** methods.\n\nTo do so, you can use the X-Sd-Compress header this way:\n\n```javascript\nX-Sd-Compress: true\n```\nIf this header is not provided, the default behavior is NOT to use compression.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxway-streams%2Fstreamdataio-js-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faxway-streams%2Fstreamdataio-js-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxway-streams%2Fstreamdataio-js-sdk/lists"}