Bonjour,

J'ai une appli react qui communique avec la base via une websocket. Tous fonctionne normalement, sauf que j'aimerais que mon websocket retourne une Promise.

le websocket en question a été développer par exec64
source : [https://exec64.co.uk/blog/websockets_with_redux/]()

voici ce que j'ai implémenté en se basant du code de exec64 :

Mon Middleware :

import * as types from '../actions/actionsTypes'
import * as actionsCreators from '../actions/actionsCreators'
import * as appActions from '../actions/appActions'

const wsMiddleware = (function(){ 
  var socket = null;

  const onOpen = (ws, store, token) => evt => {
    //Send a handshake, or authenticate with remote end
    ws.send(JSON.stringify(
      {
        type: 'AUTH',
        data: { token: 'eck264' } 
      }))
    //Tell the store we're connected
    store.dispatch(appActions.wsConnected());
  }

  const onClose = (ws, store) => evt => {
    //Tell the store we've disconnected
    store.dispatch(appActions.wsDisconnected());
  }

  const onMessage = (ws, store) => evt => {
    //Parse the JSON message received on the websocket
    var msg = JSON.parse(evt.data);
    switch(msg.type) {
      case "CLIENT_ERROR":
        alert(msg.data.message)
        break;
      case "ITEMS":
        store.dispatch(flowActions.receiveItems(msg.data));
        break;
      default:
        console.log("Received unknown message type: '" + msg.type + "'");
        break;
    }
  }

  const sendMessage = (data) => {
    if (socket.readyState === WebSocket.OPEN) {
      socket.send(data)
    } else {
      console.log('Socket not open, cannot send ' + data)
    }
  }

  return store => next => action => {
    switch(action.type) {
      //The user wants us to connect
      case types.WS_CONNECT:
        //Start a new connection to the server
        if(socket != null) {
          socket.close();
        }
        //Send an action that shows a "connecting..." status for now
        store.dispatch(appActions.wsConnecting());
        store.dispatch(snackActions.showSnack("Connexion en cours..."));

        //Attempt to connect (we could send a 'failed' action on error)
        socket = new WebSocket(action.url);
        socket.onmessage = onMessage(socket,store);
        socket.onclose = onClose(socket,store);
        socket.onopen = onOpen(socket,store,action.token);

        break;

      //The user wants us to disconnect
      case types.WS_DISCONNECT:
        if(socket != null) {
          socket.close();
        }
        socket = null;

        break;

      //The socket disconnected
      case types.WS_DISCONNECTED:        
        // reconnect
        setTimeout(() => store.dispatch(appActions.wsConnect(store.getState().ws.url)), 1000)
        break;
      //This action is irrelevant to us, pass it on to the next middleware
      default:
        return next(action);
    }
  }

})();

export default wsMiddleware

Mon actionsTypes :

export const WS_CONNECTING = 'WS_CONNECTING'
export const WS_CONNECTED = 'WS_CONNECTED'
export const WS_DISCONNECTED = 'WS_DISCONNECTED'
export const WS_CONNECT = 'WS_CONNECT'
export const WS_DISCONNECT = 'WS_DISCONNECT'

Mon appAction:

import * as types from './actionsTypes'
export function wsConnecting() {
  return {
    type: types.WS_CONNECTING
  }
}

export function wsConnected() {
  return {
    type: types.WS_CONNECTED
  }
}

export function wsDisconnected(reason = "No reason") {
  return {
    type: types.WS_DISCONNECTED,
    reason
  }
}

export function wsConnect(url) {
  return {
    type: types.WS_CONNECT,
    url: url
  }
}

Mon reducer :

import * as types from '../actions/actionsTypes'

function appReducers(state = [], action) {
  switch (action.type) {
    case types.WS_CONNECTING:      
      return Object.assign({}, state, { status: types.WS_CONNECTING });
    case types.WS_CONNECTED:      
      return Object.assign({}, state, { status: types.WS_CONNECTED });
    case types.WS_DISCONNECTED:      
      return Object.assign({}, state, { status: types.WS_DISCONNECTED });
    default:
      return state
  }
}

export default appReducers

Ce que j'aimerais c'est utiliser cette librairie [https://www.npmjs.com/package/websocket-as-promised]() avec ce websocket mais je ne vois pas comment l'implémenter dans mon code Et bien sûr, j'ai éssayer d'installer la librairie , puis ensuite l'importer et l'implémenter dans le websocket mais ça ne fonction pas. je l'ai implémenter en remplaçant :

socket = new WebSocket(action.url);

par

socket = new WebSocketAsPromised(action.url);

Aucune réponse