{"id":15141949,"url":"https://github.com/yoonit-labs/nativescript-yoonit-websocket","last_synced_at":"2026-03-11T09:32:52.428Z","repository":{"id":42701763,"uuid":"302155325","full_name":"Yoonit-Labs/nativescript-yoonit-websocket","owner":"Yoonit-Labs","description":"Build modern apps using NativeScript and WebSocket in Android and iOS","archived":false,"fork":false,"pushed_at":"2023-01-14T01:03:50.000Z","size":2716,"stargazers_count":62,"open_issues_count":8,"forks_count":2,"subscribers_count":6,"default_branch":"development","last_synced_at":"2024-10-09T22:40:29.699Z","etag":null,"topics":["android","hacktoberfest","ios","messaging","nativescript","vuejs-plugin","websocket"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Yoonit-Labs.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":"2020-10-07T20:42:10.000Z","updated_at":"2024-06-10T12:31:08.000Z","dependencies_parsed_at":"2023-02-09T18:31:43.262Z","dependency_job_id":null,"html_url":"https://github.com/Yoonit-Labs/nativescript-yoonit-websocket","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yoonit-Labs%2Fnativescript-yoonit-websocket","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yoonit-Labs%2Fnativescript-yoonit-websocket/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yoonit-Labs%2Fnativescript-yoonit-websocket/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yoonit-Labs%2Fnativescript-yoonit-websocket/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Yoonit-Labs","download_url":"https://codeload.github.com/Yoonit-Labs/nativescript-yoonit-websocket/tar.gz/refs/heads/development","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219867955,"owners_count":16555810,"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":["android","hacktoberfest","ios","messaging","nativescript","vuejs-plugin","websocket"],"created_at":"2024-09-26T09:20:57.793Z","updated_at":"2025-10-23T19:30:59.716Z","avatar_url":"https://github.com/Yoonit-Labs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eNativeScript Yoonit Camera\u003c/h1\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n\t\u003cimg src=\"https://img.shields.io/badge/NativeScript-7-lightgrey.svg?style=for-the-badge\u0026logo=nativescript\"/\u003e\r\n\t\u003cimg src=\"https://img.shields.io/npm/v/@yoonit/nativescript-websocket?color=lightgrey\u0026style=for-the-badge\u0026logo=npm\"/\u003e\r\n\t\u003cimg src=\"https://img.shields.io/npm/dm/@yoonit/nativescript-websocket?color=lightgrey\u0026logo=npm\u0026style=for-the-badge\"/\u003e\r\n\t\u003cimg src=\"https://img.shields.io/badge/Android-YES-lightgrey.svg?style=for-the-badge\u0026logo=android\"/\u003e\r\n\t\u003cimg src=\"https://img.shields.io/badge/iOS-YES-lightgrey.svg?style=for-the-badge\u0026logo=apple\"/\u003e\r\n\t\u003cimg src=\"https://img.shields.io/npm/l/@yoonit/nativescript-camera?color=lightgrey\u0026style=for-the-badge\"/\u003e\r\n\u003c/p\u003e\r\n\u003cp align=\"center\"\u003eBuild modern apps using NativeScript and WebSocket in Android and iOS\r\n\u003c/p\u003e\r\n\r\n- Stable Websocket connection\r\n- Modern JS Code (ESNext)\r\n- Works in emulator and real devices\r\n- Timeout configuration\r\n- Automatic reconnection\r\n- Proxy options\r\n- Custom headers\r\n- VueJS Plugin\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n\t\u003ch3\u003eSponsors\u003c/h3\u003e\r\n\t\u003ctable\u003e\r\n\t\t\u003ctbody\u003e\r\n\t\t\t\u003ctr\u003e\r\n\t\t\t\t\u003ctd\u003e\r\n\t\t\t\t\t\u003cb\u003ePlatinum\u003c/b\u003e\r\n\t\t\t\t\u003c/td\u003e\r\n\t\t\t\u003c/tr\u003e\r\n\t\t\t\u003ctr\u003e\r\n\t\t\t\t\u003ctd align=\"center\" valign=\"middle\"\u003e\r\n\t\t\t\t\t\u003ca href=\"https://cyberlabs.ai\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Yoonit-Labs/nativescript-yoonit-websocket/development/sponsor_cyberlabs.png\" width=\"300\" /\u003e\u003c/a\u003e\r\n\t\t\t\t\u003c/td\u003e\r\n\t\t\t\u003c/tr\u003e\r\n\t\t\u003c/tbody\u003e\r\n\t\u003c/table\u003e\r\n\t\u003ch5\u003e\u003ca href=\"mailto:about@yoonit.dev\"\u003eBecome a sponsor!\u003c/a\u003e\u003c/h5\u003e\r\n\u003c/div\u003e\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm i -s @yoonit/nativescript-websocket\r\n```\r\n\r\n## Usage\r\n\r\nAll the functionalities that the `@yoonit/nativescript-websocket` provides is accessed through the `YoonitWebSocket` object. Below we have the basic usage code, for more details, your can see the [**Methods**](#methods) or the [**Demo Vue**](https://github.com/Yoonit-Labs/nativescript-yoonit-websocket/tree/development/demo-vue).\r\n\r\n\r\n#### VueJS Plugin\r\n`main.js`\r\n```javascript\r\nimport Vue from 'nativescript-vue'\r\nimport YoonitWebSocket from '@yoonit/nativescript-websocket/vue'\r\n\r\nVue.use(\r\n  YoonitWebSocket,\r\n  'wss://echo.websocket.org/',\r\n  {\r\n    protocol: '',\r\n    timeout: 1000,\r\n    headers: [],\r\n    reconnect: true,\r\n    delay: 1000,\r\n    debug: false,\r\n    proxy: {\r\n      address: '',\r\n      port: ''\r\n    }\r\n  }\r\n)\r\n```\r\n\r\nAfter that, you can access the socket object in your entire project using `this.$yoo.socket`\r\n\r\n#### Angular, React, Svelte or any other framework\r\nCurrently we can't offer any other integration with other frameworks that works on top of NativeScript beyond VueJS, you are totaly open to create and send to us a PR. But, this is a pure NativeScript plugin, if you know how to manipulate your preferred platform you will be capable to include it in your project.\r\n\r\n#### Vue Component\r\n**Declaring events using an Yoonit-Style**\r\n\r\n`App.vue`\r\n```vue\r\n\u003ctemplate\u003e\r\n  \u003cPage @loaded=\"doLoaded\"\u003e\u003c/Page\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript\u003e\r\nexport default {\r\n  data: () =\u003e ({\r\n    interval: null\r\n  }),\r\n  methods: {\r\n    doLoaded () {\r\n      // start the connection\r\n      this.$yoo.socket.open()\r\n    },\r\n    doPing () {\r\n      this.interval = setInterval(() =\u003e {\r\n        if (!this.$yoo.socket.getStatus()) {\r\n          return console.log('[YooSocket] Socket closed')\r\n        }\r\n\r\n        console.log(\"[YooSocket] Sending 'echo' message!\")\r\n\r\n        // add your message/file to queue and call 'send' method\r\n        return this.$yoo.socket.push('echo')\r\n      }, 2000)\r\n    }\r\n  },\r\n  yoo: {\r\n    socket: {\r\n      events: {\r\n        open ($socket) {\r\n          console.log(\"[YooSocket] Hey! I'm connected!\")\r\n\r\n          clearInterval(this.interval)\r\n          return this.doPing()\r\n        },\r\n        message ($socket, message) {\r\n          if (!message) {\r\n            console.log(\"[YooSocket] Message is empty\")\r\n          }\r\n\r\n          console.log(`[YooSocket] Received Message: '${message}'!`)\r\n        },\r\n        close () {\r\n          console.log(\"[YooSocket] Socket was closed\")\r\n        },\r\n        error () {\r\n          console.log(\"[YooSocket] Socket had an error\")\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\u003c/script\u003e\r\n```\r\n\r\n**Or declaring events using your own already created methods**\r\n\r\n`App.vue`\r\n```vue\r\n\u003ctemplate\u003e\r\n  \u003cPage @loaded=\"doLoaded\"\u003e\u003c/Page\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript\u003e\r\nexport default {\r\n  data: () =\u003e ({\r\n    interval: null\r\n  }),\r\n  methods: {\r\n    doLoaded () {\r\n      // start the connection\r\n      this.$yoo.socket.open()\r\n\r\n      // declare all callback events\r\n      this.$yoo.socket.events({\r\n        open: this.doSocketOpen,\r\n        message: this.doReceivedMessage,\r\n        close: this.doSocketClose,\r\n        error: this.doSocketError\r\n      })\r\n    },\r\n\r\n    doPing () {\r\n      this.interval = setInterval(() =\u003e {\r\n        if (!this.$yoo.socket.getStatus()) {\r\n          return console.log('[YooSocket] Socket closed')\r\n        }\r\n\r\n        console.log(\"[YooSocket] Sending 'echo' message!\")\r\n\r\n        // add your message/file to queue and call 'send' method\r\n        return this.$yoo.socket.push('echo')\r\n      }, 2000)\r\n    },\r\n\r\n    doSocketOpen ($socket) {\r\n      console.log(\"[YooSocket] Hey! I'm connected!\")\r\n\r\n      clearInterval(this.interval)\r\n\r\n      // onOpen event calls your function\r\n      return this.doPing()\r\n    },\r\n\r\n    doSocketClose () {\r\n      // onClose event\r\n      return console.log('[YooSocket] Socket was closed')\r\n    },\r\n\r\n    doSocketError () {\r\n      // onError event\r\n      return console.log('[YooSocket] Socket had an error')\r\n    },\r\n\r\n    doReceivedMessage ($socket, message) {\r\n      // onMessage event\r\n      return console.log(`[YooSocket] Received Message: '${message}'!`)\r\n    },\r\n  }\r\n}\r\n\u003c/script\u003e\r\n```\r\n\r\n\r\n## API\r\n\r\n#### Methods   \r\n| Function | Parameters | Valid values | Return Type | Description |\r\n|-|-|-|-|-|  \r\n| **`openAsync`** | timeout | any positive number, default 1000 (ms) | void | Wait `timeout` to start the connection\r\n| **`open`** | - | - | void | Start immediately the connection\r\n| **`on`** | event, callback | string, function | void | Include an event, every that your server sent an event of this type, your callback will be invoked\r\n| **`off`** | event, callback | string, function | void | Exclude an event\r\n| **`events`** | callbacks | object with functions ```{ open: [], close: [], message: [], error: [], fragment: [], handshake: [] }``` | void | You can use an `Array` of callbacks in each event. Use this to add a batch of events at once\r\n| **`getStatus`** | - | - | boolean | You can use this method to check the connection status\r\n| **`push`** | content | string/blob | void | Send files or strings to server. You can use this method to make uploads for example\r\n| **`destroy`** | - | - | void | Destroy server connection\r\n| **`close`** | code, message | number, string | void | Close server connection programmatically offering an reason\r\n| **`queueLength`** | - | - | number | Get the total pending items to be sent\r\n| **`isOpen`** | - | - | boolean | Get connection status\r\n| **`isClosed`** | - | - | boolean | Get connection status\r\n| **`isClosing`** | - | - | boolean | Get connection status\r\n| **`isConnecting`** | - | - | boolean | Get connection status\r\n\r\n#### Properties   \r\n| Property | Return Type |\r\n|-|-|\r\n| **`protocol`** | string\r\n| **`timeout`** | number\r\n| **`headers`** | array\r\n| **`reconnect`** | boolean\r\n| **`delay`** | number\r\n| **`debug`** | boolean\r\n| **`proxy`** | object\r\n| **`callbacks`** | object\r\n| **`url`** | string\r\n| **`opened`** | boolean\r\n\r\n\r\n## To contribute and make it better\r\n\r\nClone the repo, change what you want and send PR.\r\nFor commit messages we use \u003ca href=\"https://www.conventionalcommits.org/\"\u003eConventional Commits\u003c/a\u003e.\r\n\r\nContributions are always welcome!\r\n\r\n\u003ca href=\"https://github.com/Yoonit-Labs/nativescript-yoonit-websocket/graphs/contributors\"\u003e\r\n  \u003cimg src=\"https://contrib.rocks/image?repo=Yoonit-Labs/nativescript-yoonit-websocket\" /\u003e\r\n\u003c/a\u003e\r\n  \r\n---  \r\n\r\nCode with ❤ by the [**Yoonit**](https://yoonit.dev/) Team\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoonit-labs%2Fnativescript-yoonit-websocket","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyoonit-labs%2Fnativescript-yoonit-websocket","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoonit-labs%2Fnativescript-yoonit-websocket/lists"}