# @kevinorriss/chatroom-component

> A chatroom React component using SocketIO and @kevinorriss/chatroom-server

Latest version **2.0.1** (published 2021-09-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @kevinorriss/chatroom-component
pnpm add @kevinorriss/chatroom-component
yarn add @kevinorriss/chatroom-component
bun add @kevinorriss/chatroom-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2021-09-08 |
| First published | 2020-06-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 355.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Kevin Orriss |
| Maintainers | kevinorriss |
| Keywords | react, component, chat, ui |

## Links

- npm: https://www.npmjs.com/package/@kevinorriss/chatroom-component
- Repository: https://github.com/kevinorriss/reactjs-chatroom
- Homepage: https://github.com/kevinorriss/reactjs-chatroom#readme
- Issues: https://github.com/kevinorriss/reactjs-chatroom/issues
- npm.io page: https://npm.io/package/@kevinorriss/chatroom-component

## Dependencies (3)

- [bufferutil](https://npm.io/package/bufferutil.md) ^4.0.3
- [utf-8-validate](https://npm.io/package/utf-8-validate.md) ^5.0.5
- [socket.io-client](https://npm.io/package/socket.io-client.md) ^2.4.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 2.0.1 (latest) — 2021-09-08
- 1.0.2 — 2021-08-22
- 1.0.1 — 2020-06-24
- 1.0.0 — 2020-06-24

## README

# Chatroom

A React and Express chatroom using SocketIO

![Screenshot](screenshot.jpg)

## Installing

### Client
```
npm install @kevinorriss/chatroom-component@2.0.0 react@17.0.2 react-dom@17.0.2
```

### Server
```
npm install @kevinorriss/chatroom-server@2.0.0 express@4.17.1
```

## Usage

### Client
```javascript
// import the component and CSS styles
import Chatroom from '@kevinorriss/chatroom-component'
import '@kevinorriss/chatroom-component/dist/styles.css'

...

// This token should be generated on the server and passed to the user
var token = jwt.sign({ username: 'username' }, 'thisismychatroomsecret')
```

```html
<Chatroom token={token} uri="http://localhost:5000" path="/socketio/chatroom"/>
```

### Server
```javascript
// import the server
import ChatroomServer from '@kevinorriss/chatroom-server'

// setup the express server as normla
const app = express()
const httpServer = http.createServer(app)
httpServer.listen(5000)

// create the chatroom server, passing in your express server
new ChatroomServer(httpServer, '/socketio/chatroom', 'thisismychatroomsecret')
```

## Development
Within the root folder, in a terminal, run:
```
npm start
```
This will concurrently run the server, component and example React app in watch mode.

**Configurable Username**

The react app accepts a URL param to control the username, this allows you to open the chat in multiple tabs and fake being different users. Simply use the following URL:

```
http://localhost:3000/chat?username=Kevin
```

## Tests

### Server
```
cd server
npm test
```

### Component
```
cd component
npm test
```

## Author

* **Kevin Orriss** - [orriss.io](http://orriss.io)

---
_Source: https://npm.io/package/@kevinorriss/chatroom-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._