【问题标题】:React-native Redux socket.io session authenticationReact-native Redux socket.io 会话认证
【发布时间】:2016-04-23 21:51:58
【问题描述】:

在 http 请求之后 将 redux/react-native 连接到 socket.io 有什么建议吗?我需要先发出 http 请求以存储身份验证会话 cookie,然后连接到 socket.io。我见过的所有示例(即https://www.npmjs.com/package/redux-socket.io)都会立即连接到socket.io。我的想法是在自定义 redux 中间件中听操作并像这样连接:

import React from 'react-native'
import * as actions from './actions/';
import io from 'socket.io-client/socket.io';

export default socketMiddleware = (store) => {
    return next => action => {
    const result = next(action);
    // var socket = io();
    //
    if (action.type === 'HTTP_CONNECT_SUCCEEDED') {
      debugger;
      const socket = io('localhost:3000', {jsonp: false);
      socket.on('connect', function(){console.log('Connected!')});
    }
    //
    // socket.on('message', data => {
    //   store.dispatch(actions.addResponse(data));
    // });
    //
    // if (socket && action.type === actions.ADD_MESSAGE) {
    //   let messages = store.getState().messages;
    //   socket.emit('message', messages[messages.length -1]);
    // }

    return result;
  };
}

这可以连接,但我必须在“HTTP_CONNECT_SUCCESS”条件下定义我的套接字,所以我的其他套接字操作和事件在该操作发生之前是未定义的。如何在操作上连接到 WS 并公开我的套接字事件和其他操作?

【问题讨论】:

    标签: javascript socket.io react-native session-cookies redux


    【解决方案1】:

    希望我的临时技巧是让我的套接字变量全局化,并在条件中包装事件:

    import React from 'react-native'
    import * as actions from './actions/';
    import io from 'socket.io-client/socket.io';
    
    export default socketMiddleware = (store) => {
      return next => action => {
    
        const result = next(action);
        globalSocket = typeof globalSocket === 'undefined' ? false : globalSocket
    
        if (action.type === 'HTTP_CONNECT_SUCCEEDED') {
          globalSocket = io('http://localhost:3000', {jsonp: false});
          globalSocket.on('connect', () => {
            console.log('Connected!')
          });
        }
    
        if (globalSocket != false) {
          globalSocket.on('friends', data => {
            store.dispatch(actions.updateFriends(data));
          })
    
          if (action.type === 'CREATE_QUESTION') {
            globalSocket.emit('createQuestion', action.question);
          }
        }
    
        return result;
      };
    }
    

    【讨论】:

    • 边际改进,但您可以使用var 而不是全局,即var socket = null 而不是globalSocket = typeof...。然后在if (action.type === 'HTTP_CONNECT_SUCCEEDED') 中设置socket,然后向下将if (globalSocket != false) 更改为if (socket)
    猜你喜欢
    • 2018-04-14
    • 2016-06-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-03-30
    • 2017-07-18
    • 2017-12-07
    相关资源
    最近更新 更多