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);