带有聊天应用程序的问题，React Native和FlaskBackend和flask_socketio

问题描述 投票：0回答：1

我正在尝试创建一个项目，其功能之一是聊天。聊天的结构是：用React Native制作的应用程序，后端使用Flask。对于后端，我有许多不同的路由，我的意图是创建另一个路由来使用WebSocket处理用户消息。我在flask_socketio中遇到很多问题。我使用NodeJ尝试了一个小版本的websocket，它完美地工作了。那是我到目前为止所做的：

RN app(frontend):
import SocketIOClient from 'socket.io-client'
import {GiftedChat} from 'react-native-gifted-chat'
export default class ChatScreen extends React.Component{
    static navigationOptions = ({ navigation }) => {
            return{
                title:`${navigation.getParam('mTitle')}`
            }
    }
    state={
        messages:[]
    }

    constructor(props){
      super(props)
      this.socket = SocketIOClient('http://a960eba8.ngrok.io');
      // this.socket.on('message', this.onReceivedMessage);
      this.socket.on("chat_message", msg => {
        console.log('mensagem recebida: ',msg)
        // this.setState({ chatMessages: [...this.state.chatMessages, msg] });
      });
    }
    componentDidMount() {
      console.log('component did mount function')
        this.setState({
          messages: [
            {
              _id: 1,
              text: 'Hello developer',
              createdAt: new Date(),
              user: {
                _id: 2,
                name: 'React Native',
                avatar: 'https://placeimg.com/140/140/any',
              },
            },
          ],
        })

      }
      onReceivedMessage = (message)=>{
        console.log('message received:',message)
      }
      onSend(messages = []) {
        this.setState(previousState => ({
          messages: GiftedChat.append(previousState.messages, messages),
        }))
        let msg = messages[0].text
        console.log('emit message: ',msg)
        this.socket.emit('chat_message',{message:msg})
        console.log('quite done')
      }

      render() {
        return (
            <GiftedChat
            messages={this.state.messages}
            onSend={messages => this.onSend(messages)}
            user={{
              _id: 1,
            }}
            />
        )
      }
}

我尝试测试的节点后端...

const express = require("express");
const app = express();
const server = require("http").createServer(app);
const io = require("socket.io").listen(server);
const port = 3000;
const ws_event = "chat_message"
console.log('novo cod...')
io.on("connection", socket => {
  console.log("a user connected :D");
  socket.on(ws_event, msg => {
    console.log(msg);
    io.emit(ws_event, msg);
  });
});

server.listen(port, () => console.log("server running on port:" + port));

烧瓶后端：

...
app = config_server() # flask app
db = app.db
m_test_room = 'm_room_123'
Session(app)
##----------------------------------------------------------------##
True,manage_session = True)
socketio = SocketIO(app,manage_session = False)

def estrutura_server():
    from src.util.util_outros import cria_pastas_necessarias
    cria_pastas_necessarias()
    pass

# api = create_api(app) # swagger
if __name__ == '__main__':
    estrutura_server()
    configure_websocket(socketio, app)
    if set_is_debug() is False:
        port = int(os.environ.get('PORT'))
        logging.debug('running on heroku, port: ', port)
        app.run(host='0.0.0.0', port=port)
    else:
        app.run(host='localhost', port = 3000, debug=True)

    # socketio.run(host="localhost", port=3000, debug=True, app=app)

配置websocket功能：

def configure_websocket(socketio_object,flask_app):
    from src.resources.reatime_resources.chatsocketresources import SocketChat
    socketio_object.on_namespace(SocketChat(''))

用于处理Websocket的命名空间：

from  flask_socketio import Namespace, emit

class SocketChat(Namespace):


    def on_join(self,**kwargs):
        print('join interno: ',kwargs)


    def on_connect(self,**kwargs):
        print('on connect interno')
        emit('chat_message','chegou aqui no backend')
        pass

    def on_chat_message(self,**kwargs):
        print('on chat message::',kwargs)
        emit('chat_message',kwargs)

也许值得一提的是，我正在使用ngrok在前端（移动应用程序）和后端之间建立隧道。PyCharm上的错误消息（用于烧瓶后端）：

INFO:engineio.server:96d6a2bae8c94cd98ed4003c3b9bf53e: Sending packet OPEN data {'sid': '96d6a2bae8c94cd98ed4003c3b9bf53e', 'upgrades': ['websocket'], 'pingTimeout': 60000, 'pingInterval': 25000}
INFO:socketio.server:emitting event "chat_message" to all [/]
INFO:engineio.server:48d735483b7f4cd5b0efb60c5f0493cf: Sending packet MESSAGE data 2["chat_message","chegou aqui no backend"]
INFO:engineio.server:96d6a2bae8c94cd98ed4003c3b9bf53e: Sending packet MESSAGE data 2["chat_message","chegou aqui no backend"]
INFO:engineio.server:96d6a2bae8c94cd98ed4003c3b9bf53e: Sending packet MESSAGE data 0
INFO:werkzeug:127.0.0.1 - - [09/Feb/2020 08:44:06] "GET /socket.io/?EIO=3&transport=polling&t=N0fmuTD HTTP/1.1" 200 -
on connect interno
WARNING:engineio.server:Invalid session None
INFO:werkzeug:127.0.0.1 - - [09/Feb/2020 08:44:07] "POST /socket.io/?EIO=3&transport=polling&t=N0fmud0 HTTP/1.1" 400 -
INFO:engineio.server:ebfeb359a601499a8df9db58415092ed: Sending packet OPEN data {'sid': 'ebfeb359a601499a8df9db58415092ed', 'upgrades': ['websocket'], 'pingTimeout': 60000, 'pingInterval': 25000}
INFO:socketio.server:emitting event "chat_message" to all [/]
INFO:engineio.server:48d735483b7f4cd5b0efb60c5f0493cf: Sending packet MESSAGE data 2["chat_message","chegou aqui no backend"]
INFO:engineio.server:96d6a2bae8c94cd98ed4003c3b9bf53e: Sending packet MESSAGE data 2["chat_message","chegou aqui no backend"]
INFO:engineio.server:ebfeb359a601499a8df9db58415092ed: Sending packet MESSAGE data 2["chat_message","chegou aqui no backend"]
INFO:engineio.server:ebfeb359a601499a8df9db58415092ed: Sending packet MESSAGE data 0
INFO:werkzeug:127.0.0.1 - - [09/Feb/2020 08:44:12] "GET /socket.io/?EIO=3&transport=polling&t=N0fmvrF HTTP/1.1" 200 -
on connect interno
WARNING:engineio.server:Invalid session None
INFO:werkzeug:127.0.0.1 - - [09/Feb/2020 08:44:13] "POST /socket.io/?EIO=3&transport=polling&t=N0fmv-y HTTP/1.1" 400 -
INFO:engineio.server:87e52ce8da464b6a86c979e8dd2fd1a3: Sending packet OPEN data {'sid': '87e52ce8da464b6a86c979e8dd2fd1a3', 'upgrades': ['websocket'], 'pingTimeout': 60000, 'pingInterval': 25000}
INFO:socketio.server:emitting event "chat_message" to all [/]
INFO:engineio.server:48d735483b7f4cd5b0efb60c5f0493cf: Sending packet MESSAGE data 2["chat_message","chegou aqui no backend"]
INFO:engineio.server:96d6a2bae8c94cd98ed4003c3b9bf53e: Sending packet MESSAGE data 2["chat_message","chegou aqui no backend"]
INFO:engineio.server:ebfeb359a601499a8df9db58415092ed: Sending packet MESSAGE data 2["chat_message","chegou aqui no backend"]
INFO:engineio.server:87e52ce8da464b6a86c979e8dd2fd1a3: Sending packet MESSAGE data 2["chat_message","chegou aqui no backend"]
INFO:engineio.server:87e52ce8da464b6a86c979e8dd2fd1a3: Sending packet MESSAGE data 0
INFO:werkzeug:127.0.0.1 - - [09/Feb/2020 08:44:18] "GET /socket.io/?EIO=3&transport=polling&t=N0fmxD8 HTTP/1.1" 200 -
on connect interno

[关于Android Studio上React Native应用的错误消息：

W/unknown:ReactNative: failed to decode string from byte array
W/unknown:ReactNative: failed to decode string from byte array
W/unknown:ReactNative: failed to decode string from byte array
react-native flask websocket flask-socketio python-socketio
1个回答
1
投票

您收到的Invalid session None错误在React Native前端很常见。有关同一问题的先前报告，请参见here，here和here。

似乎可行的解决方法是让React Native Socket.IO客户端直接与WebSocket连接。仅当客户端通过HTTP连接然后升级到WebSocket时，问题才存在。这是直接使用WebSocket的示例连接：

SocketIOClient(`http://a960eba8.ngrok.io`, {transports: ['websocket']});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.