Request - example using web sockets. about redux-logic HOT 11 CLOSED

Here is an example using redux-logic with websockets https://jsfiddle.net/jeffbski/baqz3rkj/

It basically sends whatever msg you type to the websocket service at echo.websocket.org and then it adds all the responses (which are the same since it is an echo service) to a list and displays them.

from redux-logic.

Great idea! I will add one.

from redux-logic.

FYI. I have a more recent example using redux-logic@2 and rxjs@6

https://codesandbox.io/s/m38l7n745y

from redux-logic.

I would be interested in such an example as well.

I have a project that will require this feature, but I won't be working on that for a month or more, so an example would be good place to start.

from redux-logic.

Hi, I am trying to use/modify this code. I want the client to send back a message when it receives a specific message from the server. I am dispatching the response message sending with store.dispatch in msgRec before returning { type: MSG_REC }. But this seems to lead to msgRec being called again with the same message.

Note that I have also merged SEND_MSG_CHANGED and MSG_SEND together, as my message is not send through a form field.

I am thinking that sending the message triggers MSG_LISTEN and somehow calls msgRec again with the same message. Any advice would be appreciated. Thank you.

from redux-logic.

Nevermind, I had missed that getState().wsConnected would not work in my case, as I am using a selector. I replaced it with selector.wsConnected(getState()) and things started working properly.

from redux-logic.

Excellent! Thanks for updating us @therealgilles

from redux-logic.

@jeffbski: The example is missing error handling through failType. How should I add it back in? Same question about the websocket connection status.

from redux-logic.

You could add error handling into the example which would be useful if they have wrong url or to see why the connection is hanging up. We are tracking and displaying the connection status.

from redux-logic.

From what I can see, the example is not tracking the connection status, it's tracking the state of the connect/disconnect button, which is not the same thing.

I am not sure how to implement error handling. If you could point me to an example or documentation, it would be great.

The older version of the example also had a retry mechanism in case of disconnection, which is missing here. In my app, it means I have to manually hit refresh to reconnect the socket, whereas it was automatic before.

I am trying to see if I can adapt the older version to rxjs@6 but I am not yet well versed on it. Any help/advice will be appreciated.

from redux-logic.

Here is what I came up with. Feel free to suggest improvements.

const wsListenLogic = createLogic({
  type: actions.connect,
  cancelType: actions.disconnect,
  latest: true, // take latest only
  warnTimeout: 0, // long running logic

  processOptions: {
    failType: actions.wsError,
  },

  process({ action$, cancelled$ }) {
    const wsSubject$ = webSocket({
      url: WS_SERVER,
      openObserver: {
        next: () => store.dispatch({ type: actions.connect }),
      },
      closeObserver: {
        next: () => store.dispatch({ type: actions.disconnect }),
      },
    })

    // send message on WS_MSG_SEND action
    action$
      .pipe(
        filter(action => action.type === actions.sendMsg.toString()),
        tap(action => wsSubject$.next(getState().messageToSend)),
        takeUntil(cancelled$)
      )
      .subscribe()

    // dispatch msgReceived with payload from server
    // on any incoming messages
    // returning obs subscribes to it
    return wsSubject$.pipe(
      map(msg => actions.msgReceived(msg)),
      retryWhen(errors => errors.pipe(
        tap(err => console.error(err)),
        switchMap(err => timer(1000)),
      )),
    )
  }
})

from redux-logic.