2017-09-28 6 views
1

私はこのWebsocketをreduxで約束どおりに変えることができますか?私はこのライブラリhttps://www.npmjs.com/package/websocket-as-promisedを使いたかったのですが、私はこれを私のweksocketでどのように実装するのか分かりません。還元のために約束されたWebsocket

私はあなたの助けが必要ですPLEASEEE。

ReduxのためのこれのWebSocketは「exec64」により作成されていて、それが自分のアプリケーションで機能的だが、私はそれは約束を返すことをしたいです。

ソース:https://exec64.co.uk/blog/websockets_with_redux/

マイミドルウェア

import actions from './actions' 
 

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

 
    const onOpen = (ws,store,token) => evt => { 
 
    //Send a handshake, or authenticate with remote end 
 

 
    //Tell the store we're connected 
 
    store.dispatch(actions.connected()); 
 
    } 
 

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

 
    const onMessage = (ws,store) => evt => { 
 
    //Parse the JSON message received on the websocket 
 
    var msg = JSON.parse(evt.data); 
 
    switch(msg.type) { 
 
     case "CHAT_MESSAGE": 
 
     //Dispatch an action that adds the received message to our state 
 
     store.dispatch(actions.messageReceived(msg)); 
 
     break; 
 
     default: 
 
     console.log("Received unknown message type: '" + msg.type + "'"); 
 
     break; 
 
    } 
 
    } 
 

 
    return store => next => action => { 
 
    switch(action.type) { 
 

 
     //The user wants us to connect 
 
     case '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(actions.connecting()); 
 

 
     //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 'DISCONNECT': 
 
     if(socket != null) { 
 
      socket.close(); 
 
     } 
 
     socket = null; 
 

 
     //Set our state to disconnected 
 
     store.dispatch(actions.disconnected()); 
 
     break; 
 

 
     //Send the 'SEND_MESSAGE' action down the websocket to the server 
 
     case 'SEND_CHAT_MESSAGE': 
 
     socket.send(JSON.stringify(action)); 
 
     break; 
 

 
     //This action is irrelevant to us, pass it on to the next middleware 
 
     default: 
 
     return next(action); 
 
    } 
 
    } 
 

 
})(); 
 

 
export default socketMiddleware

マイアクションタイプ

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

マイアプリのアクション(アクションの作成者)

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 
 
    } 
 
}

そして、私の減速

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

私は(https://www.npmjs.com/package/websocket-as-promised)約束したのWebSocket-として、ライブラリをインストールしてインポートしようとした、そして私は私のWebSocketでちょうどこのコードに置き換え:これによって**

socket = new WebSocket(action.url); 

を、それが機能していません**

socket = new WebSocketAsPromised(action.url); 

答えて

1

ありがとうございました。 私はReduxので約束通りのWebSocketをしたい人のための私のカスタム用WebSocketを共有する:あなたは、あなたのReduxのストアにすべてのWebソケットメッセージを展開することができた、で見ることができ

import actions from './actions' 
 
import WebSocketAsPromised from 'websocket-as-promised'; 
 

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

 
    const onOpen = (ws, store, token) => { 
 
     //Send a handshake, or authenticate with remote end 
 

 
     //Tell the store we're connected 
 
     store.dispatch(actions.connected()); 
 
    } 
 

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

 
    const onMessage = (msg, store) => { 
 
     //Parse the JSON message received on the websocket 
 
     var msg = msg; 
 
     switch (msg.type) { 
 
      case "CHAT_MESSAGE": 
 
       //Dispatch an action that adds the received message to our state 
 
       store.dispatch(actions.messageReceived(msg)); 
 
       break; 
 
      default: 
 
       console.log("Received unknown message type: '" + msg.type + "'"); 
 
       break; 
 
     } 
 
    } 
 

 
    return store => next => action => { 
 
     switch (action.type) { 
 

 
      //The user wants us to connect 
 
      case '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(actions.connecting()); 
 

 
       //Attempt to connect (we could send a 'failed' action on error) 
 
       socket = new WebSocketAsPromised(action.url); 
 
       socket.onMessage.addListener((data, jsonData) => onMessage(jsonData, store)) 
 
       socket.onClose.addListener(() => onClose(socket, store)) 
 
       socket.open() 
 
         .then(() => {onOpen(socket, store, action.token)}) 
 
       break; 
 

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

 
       //Set our state to disconnected 
 
       store.dispatch(actions.disconnected()); 
 
       break; 
 

 
       //Send the 'SEND_MESSAGE' action down the websocket to the server 
 
      case 'SEND_CHAT_MESSAGE': 
 
       socket.send(JSON.stringify(action)); 
 
       break; 
 

 
       //This action is irrelevant to us, pass it on to the next middleware 
 
      default: 
 
       return next(action); 
 
     } 
 
    } 
 

 
})(); 
 

 
export default socketMiddleware

0

、およびすべてのReduxアクションをWeb Socketにリレーします。 CHAT_MESSAGESEND_CHAT_MESSAGEの作業を節約できます。

unfold/relayアクションの上には、Web SocketイベントがReduxアクションとして公開されます。

関連する問題