如何在 react-native 中调用另一个纯类中的方法？

Question

I got a class to help websocket communication as a single file, here's the code(note this class not extends component):

import {
    DeviceEventEmitter,
} from 'react-native';
import { observer, inject } from 'mobx-react';

let that = null;
class WebSocketClient {
    constructor() {
        this.ws = null;
        that = this;
        this.prefixUrl = this.props.globalVarStore.serverAddr + 'ws/chat/' + this.genId() + '/';
    }

    /**
     * get WebSocket instance
     * @returns {WebSocketClient}
     */
    static getInstance() {
        if (!this.instance) {
            this.instance = new WebSocketClient();
        }
        return this.instance;
    }

    /**
     * generate uuid
     */
    static genId() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = Math.random() * 16 | 0,
                v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        }).toUpperCase();
    }

    /**
     * initialize WebSocket
     */
    initWebSocket() {
        try {

            this.timer && clearInterval(this.timer);
            this.ws = new WebSocket(this.prefixUrl);
            this.initWsEvent();
        } catch (e) {
            console.log('WebSocket err:', e);

            this.reconnect();
        }
    }

    /**
     * initialize WebSocket events
     */
    initWsEvent() {

        this.ws.onopen = function () {
            console.log('WebSocket:', 'connect to server');
        };

        this.ws.onmessage = function (evt) {
            if (evt.data !== 'pong') {

                console.log('WebSocket: response msg', evt.data);

                DeviceEventEmitter.emit('pushEmitter', '');

            } else {
                console.log('WebSocket: response pong msg=', evt.data);
            }
        };


        this.ws.onerror = function (err) {
            console.log('WebSocket:', 'connect to server error');

            that.reconnect();
        };

        this.ws.onclose = function () {
            console.log('WebSocket:', 'connect close');

            that.reconnect();
        };


        this.timer = setInterval(() => {
            if (this.ws && this.ws.readyState === WebSocket.OPEN) {
                console.log('WebSocket:', 'ping');
                this.ws.sendMessage('ping');
            }
        }, 15000);
    }


    sendMessage(msg) {
        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
            try {
                this.ws.send(msg);
            } catch (err) {
                console.warn('ws sendMessage', err.message);
            }
        } else {
            console.log('WebSocket:', 'connect not open to send message');
        }
    }


    reconnect() {
        if (this.timeout) {
            clearTimeout(this.timeout);
        }
        this.timeout = setTimeout(function () {

            this.initWebSocket();
        }, 15000);
    }
}

export default WebSocketClient;

Then i import it in APP.js to make a connect. I put it in the componentDidMount() function as follow:

componentDidMount() {
        const ws = new webSocketClient();
        ws.initWebSocket();
        ws.initWsEvent();
        //Here I want to save the instance in the mobx so i can easily get it and send message
        this.props.messageStore.saveWs(ws);

    }

But when I run on my Android device, it show ws.initWebSocket is not a function. wrong info So how to use a pure class in react native? Or there is not a pure class in React? Thanks!

Answer 1

Would be happening 2 things.

A) You have not imported the class.

B) When you create a new WebSocketClient you use it with the first letter in lowercase. Should be:

        const ws = new WebSocketClient();

instead of what you have that is

        const ws = new webSocketClient();

note the change: w => W