2017-09-28 1 views
1

redux에서 약속 한대로이 웹 소켓을 어떻게 변환 할 수 있습니까? 이 라이브러리 https://www.npmjs.com/package/websocket-as-promised을 사용하고 싶었지만 이것을 weksocket에서 구현하는 방법을 모르겠습니다.웹 소켓은 redux 용으로 약속 됨

귀하의 도움이 필요합니다 PLEASEEE.

은 REDUX위한이 웹 소켓은 "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
이것에 의하여

socket = new WebSocket(action.url); 

**하지만 작동하지 :

내가 설치하고 약속 웹 소켓 -로 - 라이브러리 (https://www.npmjs.com/package/websocket-as-promised)를 가져올 시도, 나는 내 웹 소켓에 바로이 코드를 교체 **

socket = new WebSocketAsPromised(action.url); 

답변

1

감사합니다. 나는 원하는 해결책을 발견했습니다. 나는 REDUX와 약속 같은 웹 소켓을 원하는 사람들을 위해 내 사용자 지정 웹 소켓을 공유

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-websocket-bridge 볼 수 있으며, 모든 Redux 작업을 웹 소켓으로 전달합니다. CHAT_MESSAGESEND_CHAT_MESSAGE에 대한 작업을 줄일 수 있습니다.

언 폴드/릴레이 동작 외에는 웹 소켓 이벤트가 Redux 작업으로 노출됩니다.

관련 문제