https://github.com/Shmew/Fable.SignalR

A functional type-safe wrapper for SignalR and Fable.
https://github.com/Shmew/Fable.SignalR

fable react signalr web websocket

Last synced: about 1 month ago
JSON representation

A functional type-safe wrapper for SignalR and Fable.

• Host: GitHub
• URL: https://github.com/Shmew/Fable.SignalR
• Owner: Shmew
• License: mit
• Created: 2020-06-21T18:22:06.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-10T11:44:41.000Z (9 months ago)
• Last Synced: 2024-11-02T14:07:27.698Z (about 2 months ago)
• Topics: fable, react, signalr, web, websocket
• Language: F#
• Homepage: https://shmew.github.io/Fable.SignalR/
• Size: 2.73 MB
• Stars: 91
• Watchers: 7
• Forks: 17
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Contributing: Contributing.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Fable.SignalR [![Nuget](https://img.shields.io/nuget/v/Fable.SignalR.svg?maxAge=0&colorB=brightgreen&label=Fable.SignalR)](https://www.nuget.org/packages/Fable.SignalR)

Fable bindings for the SignalR client, a wrapper for the .NET client, 

and ASP.NET Core/Giraffe/Saturn wrappers for SignalR server hubs.

The full documentation can be found [here](https://shmew.github.io/Fable.SignalR/).

### On the client

```fsharp

let textDisplay = React.functionComponent(fun (input: {| count: int; text: string |}) ->

    React.fragment [

        Html.div input.count

        Html.div input.text

    ])

let buttons = React.functionComponent(fun (input: {| count: int; hub: Hub |}) ->

    React.fragment [

        Html.button [

            prop.text "Increment"

            prop.onClick <| fun _ -> input.hub.current.sendNow (Action.IncrementCount input.count)

        ]

        Html.button [

            prop.text "Decrement"

            prop.onClick <| fun _ -> input.hub.current.sendNow (Action.DecrementCount input.count)

        ]

        Html.button [

            prop.text "Get Random Character"

            prop.onClick <| fun _ -> input.hub.current.sendNow Action.RandomCharacter

        ]

    ])

let render = React.functionComponent(fun () ->

    let count,setCount = React.useState 0

    let text,setText = React.useState ""

    let hub =

        React.useSignalR(fun hub -> 

            hub.withUrl(Endpoints.Root)

                .withAutomaticReconnect()

                .configureLogging(LogLevel.Debug)

                .onMessage <|

                    function

                    | Response.NewCount i -> setCount i

                    | Response.RandomCharacter str -> setText str

        )

            

    Html.div [

        prop.children [

            textDisplay {| count = count; text = text |}

            buttons {| count = count; hub = hub |}

        ]

    ])

```

### On the server

```fsharp

module SignalRHub =

    open FSharp.Control.Tasks.V2

    let update (msg: Action) =

        match msg with

        | Action.IncrementCount i -> Response.NewCount(i + 1)

        | Action.DecrementCount i -> Response.NewCount(i - 1)

        | Action.RandomCharacter ->

            let characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"

            

            System.Random().Next(0,characters.Length-1)

            |> fun i -> characters.ToCharArray().[i]

            |> string

            |> Response.RandomCharacter

    let invoke (msg: Action) _ =

        task { return update msg }

    let send (msg: Action) (hubContext: FableHub) =

        update msg

        |> hubContext.Clients.Caller.Send

application {

    use_signalr (

        configure_signalr {

            endpoint Endpoints.Root

            send SignalRHub.send

            invoke SignalRHub.invoke

        }

    )

    ...

}

```

### The shared file

```fsharp

[]

type Action =

    | IncrementCount of int

    | DecrementCount of int

    | RandomCharacter

[]

type Response =

    | NewCount of int

    | RandomCharacter of string

module Endpoints =

    let [] Root = "/SignalR"

```