Проблемы с приложением чата, React Native и FlaskBackend и flask_socketio - PullRequest
Новая
       18

Проблемы с приложением чата, React Native и FlaskBackend и flask_socketio

0 голосов
/ 09 февраля 2020

Я пытаюсь создать проект, и одна из его функций - это чат. Структура для чата: приложение, созданное в React Native, и бэкэнд, которым я пользуюсь Flask. Для бэкэнда у меня много разных маршрутов, и я намерен создать другой маршрут для обработки пользовательских сообщений с помощью WebSocket. У меня много проблем с flask_socketio. Я попробовал маленькую версию websocket, используя NodeJs, и она работала безупречно. Вот что я сделал до сих пор: 

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));

Flask Бэкэнд: 

...
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 (для flask бэкэнда): 

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

Сообщение об ошибке для приложения React Native в Android Studio: 

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
  • Эта ошибка выше появляется на Терминал несколько раз Ошибка на панели ngrok: https://imgur.com/R0UBK2R

1 Ответ

1 голос
/ 09 февраля 2020

Полученная вами ошибка Invalid session None часто встречается в интерфейсе React Native. См. здесь , здесь и здесь для предыдущих сообщений об этой же проблеме.

Обходное решение, которое, кажется, работает, это спросить React Native Клиент Socket.IO для прямого подключения к WebSocket. Проблема существует только тогда, когда клиент подключается через HTTP, а затем обновляется до WebSocket. Вот пример соединения, которое использует WebSocket напрямую: 

SocketIOClient(`http://a960eba8.ngrok.io`, {transports: ['websocket']});
...