@gluedigital/chat

Chat Client

A complete chat solution to use in your React + Redux apps.

It includes:

• A store middleware to manage the websocket connection
• A reducer to keep track of the messages and their status
• Some UI elements you can reuse to build your client

Note: This project is still under heavy development, and is not ready for production use. Feel free to test it, though.

Usage

First, you have to add the middleware and reducer to your Redux store:

import { createStore, combineReducers, applyMiddleware } from 'redux'
import { middleware, reducer } from '@gluedigital/chat'
 
let store = createStore(
  combineReducers({
    // Your other reducers here...
    chat: reducer
  }),
  applyMiddleware(middleware)
)

If you want to use our ready-made client, just render it at your component of choice:

import { Chat } from '@gluedigital/chat'
// ...
<Chat autoconnect={{ chatUrl: 'wss://example.com', credentials: { username: 'demo' }}} />

To use the default styling, don't forget to also import our CSS from your app:

@import '~@gluedigital/chat/dist/style.css'

Components

If the ready-made client doesn't suit your needs, you can replace some or all of the component tree. All the wrapper components allow overriding which child classes they use, so if you want to customize eg. the Message component, you don't have to rebuild the MessageList, just pass a Message prop with your class. For more info on the components or their props, check the source.

Protocol

Check the chat-server documentation for info on the protocol.