Question

我是React Native的新手，有一个奇怪的问题。

我有两个组件Visitor和Visitor Chat Details。在Visitor连接到websocket并将websocket prop发送到Visitor Chat Details。

我在Visitor和Visitor Chat Details上收听消息。在Visitor组件中收听消息时，它的效果非常好。但是当我将组件更改为Visitor Chat Details时，它会在onmessage组件上禁用Visitor事件。仅在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

您首先在访客组件中创建一个websocket实例“ws”，然后设置

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

然后，在访客聊天详细信息中，您获得相同的websocket“ws”并将onmessage重置为另一个功能：

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

您刚刚更改了onmessage，第二个函数将被调用而不是第一个函数。

React Native Websocket onmessage只触发一次

1 个答案: