{"id":19844341,"url":"https://github.com/joe-re/vuex-socketio-plugin","last_synced_at":"2025-05-01T20:32:21.837Z","repository":{"id":65480734,"uuid":"116554897","full_name":"joe-re/vuex-socketio-plugin","owner":"joe-re","description":"Vuex plugin to integrate socket.io client","archived":false,"fork":false,"pushed_at":"2021-08-27T09:55:28.000Z","size":158,"stargazers_count":34,"open_issues_count":0,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-22T17:14:40.615Z","etag":null,"topics":["socket-io","vuex","websocket"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/joe-re.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":"2018-01-07T10:00:41.000Z","updated_at":"2024-04-30T10:48:09.000Z","dependencies_parsed_at":"2023-01-25T20:00:39.007Z","dependency_job_id":null,"html_url":"https://github.com/joe-re/vuex-socketio-plugin","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joe-re%2Fvuex-socketio-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joe-re%2Fvuex-socketio-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joe-re%2Fvuex-socketio-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joe-re%2Fvuex-socketio-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joe-re","download_url":"https://codeload.github.com/joe-re/vuex-socketio-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251941150,"owners_count":21668681,"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":["socket-io","vuex","websocket"],"created_at":"2024-11-12T13:03:35.643Z","updated_at":"2025-05-01T20:32:21.475Z","avatar_url":"https://github.com/joe-re.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vuex-socketio-plugin\n\nVuex plugin to integrate socket.io client\n\n## Install\n\n```\nnpm install vuex-socketio-plugin --save\n```\n\n## Simple Example\n\nstore.ts\n\n```js\nimport Vuex, { Store } from 'vuex'\nimport Vue from 'vue'\nimport { createSocketioPlugin } from 'vuex-socketio-plugin'\nimport * as io from 'socket.io-client'\n\nVue.use(Vuex)\n\nlet _client: (typeof io.Socket) | null = null;\nexport type State = { messages: string[] }\nconst store = new Vuex.Store\u003cState\u003e({\n  plugins: [createSocketioPlugin('http://localhost:3000')],\n  state: {\n    messages: []\n  },\n  mutations: {\n    SOCKET_CONNECT(state, { client }) {\n      console.log('connected')\n      _client = client;\n    },\n    SOCKET_CHAT_MESSAGE(state, { data }) {\n      state.messages = state.messages.concat([data[0]])\n    }\n  },\n  actions: {\n    postMessage(context, payload: { message: string }) {\n      if (!_client) {\n        throw new Error(\"don't have connection\")\n      }\n      _client.emit('CHAT_MESSAGE', payload.message)\n    }\n  }\n})\n\nexport default store\n```\n\n## Usage\n\n### createSocketioPlugin\n\nCreates a new instance of the plugin. You can give an URL string or custom socket.io-client instance.\n\n```\ncreateSocketioPlugin('http://localhost:3000') // apply default as socket-io(auto-connect)\ncreateSocketioPlugin(io('http://localhost:3000', { autoConnect: false }) // if you want to customize you can give any socket.io instance\n```\n\nIf you want to use multi connection, you can give an array of it.\n\n```\ncreateSocketioPlugin([\n  'http://localhost:3000/function1',\n  'http://localhost:3000/function2',\n  'http://localhost:3000/function3'\n])\n```\n\nPrefix are set automatically to each Mutation and Action.(See [Mutation And Action](https://github.com/joe-re/vuex-socketio-plugin#mutation-and-action))\nIf you want to change prefix name, you can give it as `actionPrefix` and `mutationPrefix` options.\n\n```\ncreateSocketioPlugin([\n  'http://localhost:3000/function1',\n  'http://localhost:3000/function2',\n  'http://localhost:3000/function3'\n], {\n  actionPrefix: 'socket/soc_',\n  mutationPrefix: 'socket/SOC_'\n})\n```\n\n### Mutation and Action\n\nWhen it receives any SocketIO events, vuex-socketio-plugin triggers Mutation and Action.\n`SOCKET_` prefix is added on MutationName, prefix `socket_` is added on ActionName .\n(MutationName and ActionName consists from prefix + EventName.)\n\n```js\n  mutations: {\n    SOCKET_CONNECT(state, payload) {\n      console.log('connected on mutation')\n    },\n  },\n  actions: {\n    socket_connect(context, payload) {\n      console.log('connected on action')\n    }\n  }\n```\n\n\u003e Note: In case of mutation, default socket.io events are UpperCase. Pleae ref [socket.io docs](https://socket.io/docs/) about type of default events.\n\nBoth of mutation and action payload includes `client` and `data` parameters.\n`client` is socket.io instance. You can emit any event via this.\n`data` is received message. It is always array type.\n\n\n### Socket.io Namespaces and Vuex Namespaced Modules\n\n[Socket.io namespaces](https://socket.io/docs/rooms-and-namespaces/) is mapped Vuex namespaced Modules.\n\nIf you use socket.io namespaces, you can receive which one of below types.\n\n```js\n{\n  plugins: [\n    createSocketioPlugin('http://localhost:3000/bar')\n  ],\n  mutations: {\n    SOCKET_CONNECT: { ... } // default\n    SOCKET_bar_CONNECT: { ... } // prefix + namespace + event name\n  },\n  modules: {\n    bar: {\n      SOCKET_CONNECT: { ... } // namespaced module + prefix + event name\n    }\n  }\n}\n```\n\nBecause this is a convention you don't have to set any configtation. It is triggered to be found mutation and action at first.\n\n### getClients\n\nIf you want to get a socket.io client, you can use `getClients` .\n\nExample\n```js\nimport { getClients } from 'vuex-socketio-plugin'\ngetClients().forEach(v =\u003e v.connect())\n```\n\n### Example\n\n[example](./example)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoe-re%2Fvuex-socketio-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoe-re%2Fvuex-socketio-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoe-re%2Fvuex-socketio-plugin/lists"}