{"id":23176472,"url":"https://github.com/lajosbencz/vue-wamp","last_synced_at":"2025-06-25T09:06:38.099Z","repository":{"id":16946809,"uuid":"80907926","full_name":"lajosbencz/vue-wamp","owner":"lajosbencz","description":"AutobahnJS wrapper library fo Vue.js","archived":false,"fork":false,"pushed_at":"2023-01-05T06:33:15.000Z","size":1681,"stargazers_count":48,"open_issues_count":52,"forks_count":13,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-06-07T12:03:27.026Z","etag":null,"topics":["autobahn","vue","wamp","websocket"],"latest_commit_sha":null,"homepage":null,"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/lajosbencz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2017-02-04T09:08:43.000Z","updated_at":"2023-06-24T07:21:13.000Z","dependencies_parsed_at":"2023-01-13T19:05:37.781Z","dependency_job_id":null,"html_url":"https://github.com/lajosbencz/vue-wamp","commit_stats":null,"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"purl":"pkg:github/lajosbencz/vue-wamp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lajosbencz%2Fvue-wamp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lajosbencz%2Fvue-wamp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lajosbencz%2Fvue-wamp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lajosbencz%2Fvue-wamp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lajosbencz","download_url":"https://codeload.github.com/lajosbencz/vue-wamp/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lajosbencz%2Fvue-wamp/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261841955,"owners_count":23217913,"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":["autobahn","vue","wamp","websocket"],"created_at":"2024-12-18T06:16:52.268Z","updated_at":"2025-06-25T09:06:38.075Z","avatar_url":"https://github.com/lajosbencz.png","language":"JavaScript","funding_links":[],"categories":["Components \u0026 Libraries","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","积分","Integrations","Integrations [🔝](#readme)"],"sub_categories":["Integrations","Libraries \u0026 Plugins","付款","Miscellaneous","Payment","Web Sockets"],"readme":"# vue-wamp\n### Autobahn wrapper for Vue, served as a plugin \n\n* Calls to _subscribe, register, publish, call, unsubscribe, unregister_ are deferred, so that they are executed as soon as the Session object of Autobahn is available\n* [Plugin packaging](#configuration)\n* [Global, static methods](#static-methods)\n* [Vue mixin methods](#mixin-methods)\n* Automatic garbage collection for Registration and Subscription objects component-wise when used through option (acknowledge option is forced)\n\nSince v2.0.0:\n* Automatic re-subscribe/register if the connection was lost then re-established (only works with mixin methods and component config)\n* Reactive global state\n* Events\n\nSince v3.0.0:\n* ```wampIsOpen```, ```wampIsConnected``` and ```wampIsRetrying``` are only available on the ```$root``` component, to avoid data pollution. (Events are still emitted on all components)\n* Scrapped bundling, use your own toolchain to transpile to the desired compatibility level\n* Deprecated config options:\n  * ```onopen {function}```\n  * ```onclose {function}```\n  * ```debug {boolean}```\n* New config options:\n  * ```namespace {string}```: The namespace for the plugin, default: ```wamp```\n  * ```auto_reestablish {boolean}```: Automatically re-registers and re-subscribes after reconnection\n  * ```auto_close_timeout {number}```: Will close the WS connection after amount of idle milliseconds\n* Rudimentary TypeScript support \n\n## Installation\n\n```\nnpm install --save vue-wamp\n```\n\n## Configuration\n\n```js\n// entry.js\nimport VueWamp from 'vue-wamp'\n\nVue.use(VueWamp, {\n    url: 'ws://demo.crossbar.io/ws',\n    realm: 'realm1',\n\n    // change this in case of naming conflict\n    namespace: 'wamp',\n    // automatically re-registers and re-subscribes after reconnection (on by default)\n    auto_reestablish: true,\n    // automatically closes WS connection after amount of idle milliseconds (off by default)\n    auto_close_timeout: -1,\n});\n```\n\n## Global status\n\n```vue\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003cspan v-if=\"$root.wampIsOpen\"\u003eConnected\u003c/span\u003e\n        \u003cspan v-else-if=\"$root.wampIsRetrying\"\u003eRetrying...\u003c/span\u003e\n        \u003cspan v-else\u003eDisconnected\u003c/span\u003e    \n    \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Events\n\n```js\nexport default {\n  mounted() {\n    this.$on('$wamp.status', ({status, lastStatus, details}) =\u003e {});\n    this.$on('$wamp.opened', ({status, lastStatus, details}) =\u003e {});\n    this.$on('$wamp.closed', ({status, lastStatus, details}) =\u003e {});\n    this.$on('$wamp.retrying', ({status, lastStatus, details}) =\u003e {});\n    this.$on('$wamp.reconnected', ({status, lastStatus, details}) =\u003e {});\n  },\n}\n```\n\n## Usage\n\n```vue\n// component.vue\n\u003ctemplate\u003e\n    \u003cdiv\u003e\u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n    data() {\n        return {\n            someValue: 'foobar'\n        };\n    },\n    watch: {\n        someValue(val, old) {\n            this.$wamp.publish('some-topic', [], {val, old});\n        }\n    },\n    wamp: {\n        subscribe: {\n            'some-topic'(args, kwArgs, details) {\n                this.someValue = kwArgs.val;\n            },\n            'another-topic': {\n                acknowledge: true,\n                handler(args, kwArgs, details) {\n                    // do stuff\n                }\n            }\n        },\n        register: {\n            'some-rpc'(args, kwArgs, details) {\n                return args[0] + ' I am useful!';\n            },\n            'another-rpc': {\n                invoke: 'random',\n                handler(args, kwArgs, details) {\n                    // more stuff\n                }\n            }\n        }\n    }\n}\n\u003c/script\u003e\n```\n\n## Static methods\n\n```Vue.$wamp.subscribe```, ```Vue.$wamp.publish```, ```Vue.$wamp.register```, ```Vue.$wamp.call```, ```Vue.$wamp.unsubscribe```, ```Vue.$wamp.unregister```\n\n```js\n// main.js\nVue.$wamp.subscribe('some-topic', function(args, kwArgs, details) {\n        // context is empty\n        console.log(this); // = null\n    }, {\n    acknowledge: true // option needed for promise\n}).then(function(s) {\n    console.log('AutobahnJS Subscription object: ', s); \n});\n```\n\n## Mixin methods\n\n```this.$wamp.subscribe```, ```this.$wamp.publish```, ```this.$wamp.register```, ```this.$wamp.call```, ```this.$wamp.unsubscribe```, ```this.$wamp.unregister```\n\n```js\nexport default {\n    data() {\n      return {\n        foo: 'bar',\n      };\n    },\n    mounted() {\n        this.$wamp.subscribe('some-topic', function(args, kwArgs, details) {\n            // component context is available\n            return this.foo;\n        }, {\n            acknowledge: true // option needed for promise, automatically added\n        }).then(function(s) {\n            console.log('AutobahnJS Subscription object: ', s); \n        });\n    }\n}\n```\n\n## Todo\n * Example\n * Tests\n * Vuex integration\n * Re-authentication\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flajosbencz%2Fvue-wamp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flajosbencz%2Fvue-wamp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flajosbencz%2Fvue-wamp/lists"}