{"id":25538764,"url":"https://github.com/mesteche/react-socket","last_synced_at":"2025-04-11T15:41:41.437Z","repository":{"id":57127601,"uuid":"85497584","full_name":"mesteche/react-socket","owner":"mesteche","description":"A react-redux inspired library to deal with websocket.","archived":false,"fork":false,"pushed_at":"2017-03-26T20:54:11.000Z","size":21,"stargazers_count":25,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-08T09:35:42.402Z","etag":null,"topics":["react","redux","socket","websocket","websockets"],"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/mesteche.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-19T18:04:19.000Z","updated_at":"2019-08-07T00:15:25.000Z","dependencies_parsed_at":"2022-08-31T17:20:30.996Z","dependency_job_id":null,"html_url":"https://github.com/mesteche/react-socket","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mesteche%2Freact-socket","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mesteche%2Freact-socket/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mesteche%2Freact-socket/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mesteche%2Freact-socket/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mesteche","download_url":"https://codeload.github.com/mesteche/react-socket/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248433040,"owners_count":21102498,"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":["react","redux","socket","websocket","websockets"],"created_at":"2025-02-20T05:24:02.355Z","updated_at":"2025-04-11T15:41:41.414Z","avatar_url":"https://github.com/mesteche.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-socket\n\n[![Build Status](https://travis-ci.org/mesteche/react-socket.svg?branch=master)](https://travis-ci.org/mesteche/react-socket)\n[![npm (scoped)](https://img.shields.io/npm/v/@mesteche/react-socket.svg?style=flat)]()\n[![Coverage_Status](https://coveralls.io/repos/github/mesteche/react-socket/badge.svg?branch=master)](https://coveralls.io/github/mesteche/react-socket?branch=master)\n\n[![Discord](https://img.shields.io/badge/Discord-chat-blue.svg?style=social)](https://discord.gg/bTujxkY)\n\nA react-redux inspired library to deal with websocket.  \n## Installation\n### Using npm\n`npm i --save @mesteche/react-socket`\n### Using yarn\n`yarn add @mesteche/react-socket`\n\n## API\n\n### `\u003cSocket [id] [socket] [url] [protocol] [onopen] [onerror] [onmessage]\u003e`\nMakes the socket available to the children, anywhere below in the tree.  \nAn open `\u003cSocket\u003e` is required for being able to use `connect()` on sub-components.\n\n#### Props\n\n- `children` the component down the tree. Must be an only child, if you need to have siblings, wrap them in a single component.\n- `id` if you want to have multiple socket connected at once, you must give them an id that will be used by `connect()` to identify the right socket.\n\nIf you want to instanciate the connection outside of the `\u003cSocket\u003e` component, you should pass the `WebSocket` instance as a prop:\n- `socket` An instance of WebSocket\n\nElse the `\u003cSocket\u003e` component can create it with the following parameters as props:\n- `url` The url to connect to\n- `protocol` The protocol to use\n- `onopen` A function to call when the connection is established\n- `onerror` A function to call if an errors occurs\n- `onmessage` A function to call when a message is recieved (the message will be passed as an argument)\n\nSee [WebSocket documentation](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket)\n\n#### Example\n```jsx\n// main.js\nimport React from 'react'\nimport {render} from 'react-dom'\nimport Socket from 'react-socket'\n\n/* See connect() documentation below */\nimport Demo from './Demo.js'\n\nrender(\n  \u003cSocket url='ws://localhost:8080'\u003e\n    \u003cDemo onWsMessage={msg =\u003e console.info('message recieved', msg)}\u003e\n      Send Message\n    \u003c/Demo\u003e\n  \u003c/Socket\u003e,\n  document.querySelector('#app')\n)\n```\n### `connect(mapSendToProps)`\nConnects a React component to a `WebSocket`.\nSimilarly to react-redux's `connect()`, it doesn't modify the component passed to it but returns a new component connected to the `WebSocket` instead.\n\nIn addition to connect the component's props to the socket's `send()` method, the new component will expose a `onWsMessage` and `socketId` prop, for you to register a callback when a message is recieved from the server and to select the socket you want to connect to.\nFor instance, if you already use react-redux, you can use use react-redux's `connect()` on this new component to dispatch an action when a message arrives.\n\n#### Arguments\n\n- `mapSendToProps`(Object or Function):\n  - If an object is passed, each key is assumed to be a prop of the component, and the correspondign values are assumed to be functions that returns the data to be sent to the server. Each function will be wrapped into a `send()` call to the server.\n  - If a function is passed, it will be given the `send()` function of the socket.\n    It is expected that it returns an object containning the props.\n    It's up to you to use `send()` in these props.\n\n### `connectBase(mapSendToProps, [config]])`\nSimilar to `connect()`, except instead of exposing `onWsMessage` and `socketId` as props on the returned component, it accepts a `config` argument.\n\n#### Arguments\nSame as `connect()` plus :\n- `[config]`(Object):\n  - `[onWsMessage]`(Function): This function will be called when a message is recieved from the server, with the message as parameter.\n  - `[socketId]`(String or Symbol): The id of the socket you're targetting.\n\n#### Examples\n##### `mapSendToProps` as an object\nIn this example, 'Message' will be sent to the server when the button is clicked.\n\n```jsx\n// Demo.js\nimport React from 'react'\nimport { connect } from 'react-socket'\n\n// Basic React component\nexport const Demo = ({sendMessage, children}) =\u003e (\n  \u003cbutton onClick={function () {sendMessage('Message')}}\u003e\n    {children}\n  \u003c/button\u003e\n)\n\nconst mapSendToProps = {\n  sendMessage: msg =\u003e msg,\n}\n\nexport default connect(mapSendToProps)(Demo)\n```\n\n##### `mapSendToProps` as a function\nThis Example is similar to the previous one but `mapSendToProps` is used as a function.\n\n```jsx\n// Demo.js\nimport React from 'react'\nimport { connect } from 'react-socket'\n\n// Basic React component\nexport const Demo = ({sendMessage, children}) =\u003e (\n  \u003cbutton onClick={function () {sendMessage('Message')}}\u003e\n    {children}\n  \u003c/button\u003e\n)\n\nconst mapSendToProps = send =\u003e ({\n  sendMessage: msg =\u003e send(msg),\n})\n\nexport default connect(mapSendToProps)(Demo)\n```\n\n##### usage with react-redux's `connect`\nIn this example, we use the `onWsMessage` prop of the connected component to listen to the server.\nWe also use react-redux to respond to such event by dispatching an action (see redux and react-redux documentation).\n\n```jsx\n// Demo.js\nimport React from 'react'\nimport { connect as wsConnect } from 'react-socket'\nimport { connect as RRConnect } from 'react-redux'\n\n// Basic React component\nexport const Demo = ({sendMessage, children}) =\u003e (\n  \u003cbutton onClick={function () {sendMessage('Message')}}\u003e\n    {children}\n  \u003c/button\u003e\n)\n\nconst mapSendToProps = {\n  sendMessage: msg =\u003e msg,\n}\n\nconst mapDispatchToProps = {\n  onWsMessage: msg =\u003e ({\n    type: 'SERVER_MESSAGE',\n    payload: msg.data,\n  })\n}\n\nexport default RRConnect(null, mapDispatchToProps)(\n  wsConnect(mapSendToProps)(Demo)\n)\n```\n\n[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square\n[build]: https://travis-ci.org/user/repo\n\n[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square\n[npm]: https://www.npmjs.org/package/npm-package\n\n[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square\n[coveralls]: https://coveralls.io/github/user/repo\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmesteche%2Freact-socket","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmesteche%2Freact-socket","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmesteche%2Freact-socket/lists"}