https://github.com/billstclair/elm-chat

A simple chat component that is easy to add to your Elm user interface.
https://github.com/billstclair/elm-chat

Last synced: 8 months ago
JSON representation

A simple chat component that is easy to add to your Elm user interface.

• Host: GitHub
• URL: https://github.com/billstclair/elm-chat
• Owner: billstclair
• License: mit
• Created: 2017-09-25T00:23:58.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-08-29T13:22:29.000Z (almost 8 years ago)
• Last Synced: 2025-04-06T23:48:26.858Z (about 1 year ago)
• Language: Elm
• Size: 44.9 KB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
The [billstclair/elm-chat](http://package.elm-lang.org/packages/billstclair/elm-chat/latest) package implements a simple chat component, designed to be easy to add to your user interface.

I use a WebSocket interface to feed it input, which you can see in my [Archmage game](https://github.com/billstclair/archmage/).

The [example/ElmChatExample.elm](example/ElmChatExample.elm) is a simple self-contained UI, with separate text input areas for two chatters. It's live at [gibgoygames.com/elm-chat](https://gibgoygames.com/elm-chat/).

You need to reserve space for the chat `Settings` record in your model:

    type alias Model =

        { ...

        , chatSettings : ElmChat.Settings

        , ...

        }

        

You need three messages, one to send chat input, one to update the settings, and one to receive chat input from the other side.

    type Msg

       = ...

       | ChatUpdate Settings (Cmd Msg)

       | ChatSend String Settings

       | ChatReceive String

       | ...

       

When you initialize your model, create a `Settings` record:

    init : ( Model, Msg )

    init =

        ( { ...

          , chatSettings = ElmChat.makeSettings "chatid" 14 True ChatUpdate

          , ...

          }

          

Inside your view function, create a chat display area:

    ElmChat.chat model.chatSettings

  

And an input box:

    ElmChat.inputBox 40 "Send" ChatSend model.chatSettings

  

Handle the messages in your `update` function.

    update : Msg -> Model -> ( Model, Cmd Msg )

    update msg model =

        case msg of

            ...

            ChatUpdate settings cmd ->

                ( { model | chatSettings = settings }

                , cmd

                )

            ChatSend line settings ->

                update (ChatUpdate settings (sendLine line model)) model

            ChatReceive line ->

                let (settings, cmd) = ElmChat.addChat settings line

                in

                    update (ChatUpdate settings cmd) model

            ...

Where `sendLine` is a function you write that returns a `Cmd` to send the line over the wire.

You can style the UI components with the `Settings.attributes` property. See the code for details.

Bill St. Clair


24 September, 2017