React 네이티브 Websocket onmessage가 한 번만 실행됩니다.

Question

저는 React Native에서 새로 생소하고 이상한 문제가 있습니다.

두 구성 요소가 있습니다. Visitor 및 Visitor Chat Details입니다. Visitor에서 websocket에 연결하고 Visitor Chat Details으로 websocket 소품을 보냅니다.

나는 모두 Visitor과 Visitor Chat Details의 메시지를 듣습니다. Visitor 구성 요소가 메시지를 듣고 잘 작동합니다. 그러나 구성 요소를 Visitor Chat Details으로 변경하면 Visitor 구성 요소의 onmessage 이벤트가 비활성화됩니다. Visitor Chat Details에서 작업 이벤트 만 여기

은 방문자 구성 요소입니다

export class VisitorListScreen extends React.Component { 

    constructor(props) { 
     super(props); 

     this.state = { isConnected: false, ws: null, fullname: '', username: '', alias: '', userId: null, hash: '', status: true, users: [] } 
     ... 
     this.connect = this.connect.bind(this); 
     this.connectClient = this.connectClient.bind(this); 

    } 


    componentDidMount() { 
     ... 
     this.connect(); 
    } 


    connect() { 
     const SERVER_ID = createServerId(); 
     const CONNECTION_ID = createConnectionId(); 
     var ws = new WebSocket('wss://myurl.com/im/websocket'); 

     this.setState({ ws: ws }); 

     ws.onopen =() => { 
      // connection opened 
      console.log("connected") 
      this.setState({ isConnected: true }); 
     }; 

     ws.onmessage = e => { 
      console.log("listening"); 
      // a message was received      
      this.handleMessage(e.data); 
     }; 

     ws.onerror = e => { 
      // an error occurred 
      console.log("An error occured"); 
     }; 

     ws.onclose = e => { 
      // connection closed 
      console.log("connection closed"); 
      this.setState({ isConnected: false }); 

      TimerMixin.setTimeout(() => { 
       if (!this.state.isConnected) { 
        console.log("Reconnecting..."); 
        this.connect(); 
       } 
      }, 5000); 
     } 
    } 

    handleMessage(data) { 
    ... 
    } 

    connectClient(user) { 
     this.props.navigation.navigate('VisitorDetail', { user: user, agentFullname: this.state.fullname, agentId: this.state.userId, ws: this.state.ws }); 
    } 

    ... 

그리고 방문자 채팅 상세 구성 요소

export class VisitorDetail extends React.Component { 

    constructor(props) { 
     super(props); 

     const params = this.props.navigation.state.params; 

     let isServing = params.user.servingAgent != null && params.user.servingAgent == params.agentFullname; 

     this.state = { isServing:isServing, agentFullname: '', username: '', alias: '', agentId: '', hash: '', typing: '', user: params.user, ws: params.ws, messages: [] }; 

     this.sendMessage = this.sendMessage.bind(this); 
     this.loadMessages = this.loadMessages.bind(this); 
     this.registerRoom = this.registerRoom.bind(this); 
     this.handleMessage = this.handleMessage.bind(this); 
     this.startChat = this.startChat.bind(this); 

     this.state.ws.onmessage = e => { 
      console.log("visitor detail listening"); 
      console.log(e.data); 
      //this.handleMessage(e.data); 
     } 

    } 

    componentWillMount() { 
     .. 
    } 

    componentDidMount() { 
     this.loadMessages(); 
     this.registerRoom(); 
    } 

    loadMessages() { 
     const siteId = 'cc76df43-da21-4b62-81be-4868b11c43dc'; 
     ... 
    } 

    registerRoom() { 
     ... 
    } 

    startChat(){ 

Answer 1

먼저 방문자 구성 요소에서, "WS"는 웹 소켓 인스턴스를 생성하고

ws.onmessage = e => // 1st function 

을 설정하는

그런 다음 Visitor Chat Detail에서 동일한 웹 소켓 "ws"를 재설정하고을 재설정하십시오. 다른 함수은 :

this.state.ws.onmessage = e => // 2nd function 

당신은 onmessage을 변경했습니다, 두 번째 기능은 대신 처음으로 호출됩니다.