如何在 React Native 中导入和连接并监听 Web 套接字答案

【问题标题】：How to import and Connect and listen to a web socket in React Native如何在 React Native 中导入和连接并监听 Web 套接字
【发布时间】：2023-03-27 02:48:01
【问题描述】：

在 onMasterClicked 方法中，我想使用 web-socket 连接并向服务器发送数据。

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

只想知道如何使用 web-socket 连接到服务器并发送数据，并在向应用程序发送数据时监听它

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

【问题讨论】：

这个guide 应该是合适的。它使用来自 NPM 的socket.io-client。

标签： react-native websocket

【解决方案1】：

我是这样做的：

我创建了一个 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，所以我将它导入到我的操作文件中：

从'../services/WSService'导入WSService；
我的操作会根据需要调用服务。该服务还可以访问存储，因此它会在收到消息时调度操作。

总的来说，比我预期的要容易得多。

完整代码在这里： https://github.com/SpaceAppsReno/higher-ground/tree/master/controller

【讨论】：

【解决方案2】：

如果您查看 Face books simple example，您会发现 react-native 支持 web sockets。您也可以查看此内容以获取更多信息。 Web Sockets 没有比这更容易的了。请注意，由于WebSocket 是全局的，因此您无需导入任何内容。

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

【讨论】：