2017-09-28 55 views
1

如何根據redux承諾改變此websocket?我想用這個庫https://www.npmjs.com/package/websocket-as-promised,但我不知道如何在我的weksocket中實現這個。Websocket承諾爲redux

我需要你的幫助PLEASEEE。

這對於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

我試圖安裝和進口的WebSocket-AS-承諾庫(https://www.npmjs.com/package/websocket-as-promised),然後我換成眼前這個代碼在我的WebSocket:

socket = new WebSocket(action.url); 

**通過這一點,但它不是功能**

socket = new WebSocketAsPromised(action.url); 

回答

1

謝謝,我找到了我想要的解決方案。 我分享我的自定義的WebSocket對於那些誰想要一個的WebSocket與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

你也可以看看,可以展開所有Web套接字消息到您的終極版存儲,將所有Redux操作轉發到Web Socket。這會爲您節省一些工作在CHAT_MESSAGESEND_CHAT_MESSAGE

除了展開/ relay操作之外,它還將Web套接字事件作爲Redux操作進行展示。