Question

在onMasterClicked方法中，我想连接并使用网络套接字将数据发送到服务器。

我更喜欢使用来自react-native的本机Web套接字库，我也可以使用socket.io客户端，但这对我不起作用。我不需要应用程序中的服务器端代码，服务器是云。

只是想知道如何使用Web套接字连接到服务器并发送数据，并在将数据发送到应用程序时监听它

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, TouchableOpacity } from 'react-native';
import Card from '../common/Card';
import { onMasterClicked } from '../../actions';

class MasterCard extends Component {

     getMasterUnit() {
        return this.props.masterUnit;
    }

    masterClicked() {
        const cardNav = this.props.masterCardNav;

        this.props.onMasterClicked(this.getMasterUnit());

        cardNav('Room', {
            id: this.getMasterUnit().id,
            title: this.getMasterUnit().title,
        });
    }

    render() {

        return (
        <TouchableOpacity onPress={this.masterClicked.bind(this)}>
        <Card>
        <View style={styles.parentContainer}>
        <Text style={styles.masterNameTextStyles}> { this.getMasterUnit().title } </Text>
        <Text style={styles.arrowTextStyle}> > </Text>
        </View>
        </Card>
        </TouchableOpacity>
        );
    }
}

const styles = {

    parentContainer: {
        flexDirection: 'row', 
        flex: 1,
        alignItems: 'center',
        height: 50
    },

    masterNameTextStyle: {
        flex: 1,
        textAlign: 'left',
        color: '#000000',
        fontSize: 16, 
        textAlignVertical: 'center'
    }, 

    arrowTextStyle: {
        flex: 1,
        textAlign: 'right',
        color: '#000000',
        fontSize: 16, 
        textAlignVertical: 'center'
    }
};

export default connect(null, { onMasterClicked })(MasterCard);

Answer 1

如果查看Face books simple example，您可以看到react-native支持WebSocket。您还可以查看此信息以获取更多信息。 Web Sockets 它没有比这更容易。请注意，由于var ws = new WebSocket('ws://host.com/path'); ws.onopen = () => { // connection opened ws.send('something'); // send a message }; ws.onmessage = (e) => { // a message was received console.log(e.data); }; ws.onerror = (e) => { // an error occurred console.log(e.message); }; ws.onclose = (e) => { // connection closed console.log(e.code, e.reason); };是全局的，因此您无需导入任何内容。

<nav>

Answer 2

以下是我的表现：

我创建了一个WSService.js文件来包含所有的Web套接字逻辑。该文件中只有一个类，其中包含一个构造函数，用于设置所有侦听器：

class WSService {
    constructor() {
        this.ws = new WebSocket('ws://localhost:3001');

        this.ws.onopen = (arg) => {
            // connection opened
        };
        this.ws.onmessage = (e) => {
            // a message was received
        };
        this.ws.onerror = (e) => {
            // an error occurred
        };
        this.ws.onclose = this.logout; // function implemented elsewhere
    }
}    
export default new WSService();

请注意它如何在底部实例化服务并将其导出。

该类包含可由操作用于发送特定消息的附加功能（例如，用于登录或注销）。

我正在使用Redux，因此我将其导入到我的操作文件中：

从＆＃39; ../ services / WSService＆＃39;;
我的操作会根据需要调用该服务。该服务还可以访问商店，以便在收到消息时调度操作。

此处的完整代码： https://github.com/SpaceAppsReno/higher-ground/tree/master/controller

如何在React Native

2 个答案: