{"id":22679260,"url":"https://github.com/cliffhall/react-chat-client","last_synced_at":"2025-08-24T17:43:56.386Z","repository":{"id":148698055,"uuid":"139048149","full_name":"cliffhall/react-chat-client","owner":"cliffhall","description":"A simple chat client built in React for communicating with the node-multi-server-chat example","archived":false,"fork":false,"pushed_at":"2018-10-21T22:29:19.000Z","size":420,"stargazers_count":25,"open_issues_count":0,"forks_count":12,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-26T09:40:05.438Z","etag":null,"topics":["beginner-friendly","chat","chat-application","es6","git-submodule","javascript","react","socket-io","socket-io-client"],"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/cliffhall.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-28T17:17:46.000Z","updated_at":"2023-01-12T11:47:14.000Z","dependencies_parsed_at":"2023-05-28T16:45:21.634Z","dependency_job_id":null,"html_url":"https://github.com/cliffhall/react-chat-client","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cliffhall%2Freact-chat-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cliffhall%2Freact-chat-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cliffhall%2Freact-chat-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cliffhall%2Freact-chat-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cliffhall","download_url":"https://codeload.github.com/cliffhall/react-chat-client/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248586249,"owners_count":21128997,"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":["beginner-friendly","chat","chat-application","es6","git-submodule","javascript","react","socket-io","socket-io-client"],"created_at":"2024-12-09T18:25:54.425Z","updated_at":"2025-04-12T15:02:18.591Z","avatar_url":"https://github.com/cliffhall.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-chat-client\n\n## What is this?\nA React-based chat client for communicating with my \n[node-multi-server-chat](https://github.com/cliffhall/node-multi-server-chat) example.\n\nThis client differs from the minimalist one that comes with the server project in a few ways:\n\n  * It lets you log in with any number of different users (instead of the predefined Anna and Billy)\n  * It allows you to choose the recipient of each outgoing message from a dropdown of all connected users\n  * It displays scrollable message history \n  * It notifies you when your selected recipient disconnects\n  * If your lost recipient reconnects, it notifies you and selects them again in the dropdown\n  * It stores and displays messages by thread, so you can carry on separate conversations with different users\n  * When you receive a message from another user, it automatically selects them as a recipient and shows their thread\n  \nYou can [read a tutorial](https://itnext.io/building-a-react-based-chat-client-with-redux-816b47cb8c74) \nabout how it was built with only React and then refactored to use Redux.\n\n## Two users chatting \n![Two users chatting](img/one-on-one-chat-with-message-history.png \"Two users chatting\")\n\n## Setup\n\n### Install Node and npm\n[Node](https://nodejs.org/en/download/) 7.7 or above (also installs npm)\n\n### Install Node modules\n```cd path/to/react-chat-client``` (the rest of this document assumes you are at this location)\n\n```npm install```\n\n### Initialize server project\nFor convenience, this project pulls in the [node-multi-server-chat](https://github.com/cliffhall/node-multi-server-chat)\nproject as a Git submodule. After you run the following command, you'll find that project in the ```server``` folder,\nwith its node-modules installed.\n\n```npm run install-server-module```\n\n## Launch\n\n### Launching Socket Server Instances\nSeveral npm scripts have been defined in ```package.json``` for launching the socket server instances.\n\n#### Inside your IDE\nIf you're running a modern IDE like Webstorm, you can just open the npm window and double-click on each ```start-server-x``` script. \nA separate integrated terminal will launch and you can monitor each instance's log output.\n\n#### From the command line\nIn each of four separate terminal windows, enter one of the following commands: \n\n```npm run start-server-1```\n\n```npm run start-server-2```\n\n```npm run start-server-3```\n\n```npm run start-server-4```\n\n### Launching the Server for the React Chat Client\nThe [react-scripts](https://www.npmjs.com/package/react-scripts) library will compile the client bundle and start the server for the client.\n\n```npm run serve-client```\n\nOnce that's done, open a couple of browser windows, navigate to ```http://localhost:3000/```, enter two different user\nnames, choose a server port, and connect. It doesn't matter if you're on different ports or the same port, the servers\nwill make sure your messages make it to each other. \n\nNote that when you connect the first user, you won't see anything other than a status message of 'Connected' and the \n'Connect' button will change to 'Disconnect'. As soon as you sign in another user, you'll see a dropdown with\n'Choose someone to message' in it. As users connect and disconnect, this list will be updated on all connected clients,\nand of course your own name won't be listed.\n\n## Implementation\nThis React client uses:\n  * [redux](https://github.com/reduxjs/redux) to manage application state\n  * [react-redux](https://github.com/reduxjs/react-redux) to inject the store's dispatch function and selected parts of the \napplication state into any component's props. \n\n## Protocol handling\nThe protocol is outlined in the [chat server README](https://github.com/cliffhall/node-multi-server-chat/blob/master/README.md#protocol), \nso there's no need to duplicate that here. This client operates the same as the minimalist chat client in the server project, \nexcept all the protocol handling is encapsulated in the ```Socket``` class.\n\nThe ```socketMiddleware``` middleware instantiates a ```Socket``` instance, passing in callbacks for\n  \n  * ```onConnectionChange```, called when the socket connection state changes\n  * ```onError```, called when the socket experiences an error condition, so status can be reported\n  * ```onIncomingMessage```, called when an instant message is received\n  * ```onUpdateClient```, called when the server updates the client with the list of connected users\n\n## TODO\n\n  * Pretty it up with [React-Bootstrap](https://react-bootstrap.github.io/components/alerts/).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcliffhall%2Freact-chat-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcliffhall%2Freact-chat-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcliffhall%2Freact-chat-client/lists"}