web-dev-qa-db-ja.com

React NativeでWebSocketを使用する適切な方法

私はReactネイティブですが、Reactに非常に精通しています。残念ながら、私を助けてくれる適切な例はそこにはありません。

import React, { Component } from 'react';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button
} from 'react-native';

export default class raspberry extends Component {
  constructor(props) {
    super(props);

    this.state = { open: false };
    this.socket = new WebSocket('ws://127.0.0.1:3000');
    this.emit = this.emit.bind(this);
  }

  emit() {
    this.setState(prevState => ({ open: !prevState.open }))
    this.socket.send("It worked!")
  }

  render() {

    const LED = {
      backgroundColor: this.state.open ? 'lightgreen' : 'red',
      height: 30,
      position: 'absolute',
      flexDirection: 'row',
      bottom: 0,
      width: 100,
      height: 100,
      top: 120,
      borderRadius: 40,
      justifyContent: 'space-between'

    }

    return (
      <View style={styles.container}>
        <Button
          onPress={this.emit}
          title={this.state.open ? "Turn off" : "Turn on"}
          color="#21ba45"
          accessibilityLabel="Learn more about this purple button"
        />
        <View style={LED}></View>
      </View>
    );
  }

  componentDidMount() {
    this.socket.onopen = () => socket.send(JSON.stringify({ type: 'greet', payload: 'Hello Mr. Server!' }))
    this.socket.onmessage = ({ data }) => console.log(JSON.parse(data).payload)
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('raspberry', () => raspberry);

すべて正常に動作しますが、メッセージを送信するためにボタンを押すと、これは私が得るエラーです：

メッセージを送信できません。不明なWebSocket ID 1

また、jsクライアントでテストを行ったところ、すべてがスムーズに機能しました。この修正を取得する方法や、それを把握できるソースの例を確認しました。

reactjsreact-nativewebsocket
13
Razvan Alex

コードを変更する

socket.send(JSON.stringify({ type: 'greet', payload: 'Hello Mr. Server!' }))

に

this.socket.send(JSON.stringify({ type: 'greet', payload: 'Hello Mr. Server!' }))

動作するはずです。

コードとRN 0.45（およびcreate-react-native-appによって生成されたプロジェクト）に基づいてテストする私のコードは、パブリックwebsocketサーバーに接続しますwss://echo.websocket.org/、Androidで正常に動作し、ボタンを押した後にwebsocketサーバーのエコーメッセージが表示されます。

import React, { Component } from 'react';

import {
    StyleSheet,
    Text,
    View,
    Button
} from 'react-native';

export default class App extends React.Component {

    constructor() {
        super();

        this.state = {
            open: false
        };
        this.socket = new WebSocket('wss://echo.websocket.org/');
        this.emit = this.emit.bind(this);
    }

    emit() {
        this.setState(prevState => ({
            open: !prevState.open
        }))
        this.socket.send("It worked!")
    }

    componentDidMount() {
        this.socket.onopen = () => this.socket.send(JSON.stringify({type: 'greet', payload: 'Hello Mr. Server!'}));
        this.socket.onmessage = ({data}) => console.log(data);
    }

    render() {

        const LED = {
            backgroundColor: this.state.open
            ? 'lightgreen'
            : 'red',
            height: 30,
            position: 'absolute',
            flexDirection: 'row',
            bottom: 0,
            width: 100,
            height: 100,
            top: 120,
            borderRadius: 40,
            justifyContent: 'space-between'
        }

        return (
            <View style={styles.container}>
                <Button onPress={this.emit} title={this.state.open
        ? "Turn off"
        : "Turn on"} color="#21ba45" accessibilityLabel="Learn more about this purple button"/>
                <View style={LED}></View>
            </View>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5
    }
});
11
qianlei

ドキュメント によると、コンポーネントに状態connectedを追加する必要があります。 connected状態がtrueの場合にのみ、何かを送信します。

export default class raspberry extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      connected: false
    };
    this.socket = new WebSocket('ws://127.0.0.1:3000');
    this.socket.onopen = () => {
      this.setState({connected:true})
    }; 
    this.emit = this.emit.bind(this);
  }

  emit() {
    if( this.state.connected ) {
      this.socket.send("It worked!")
      this.setState(prevState => ({ open: !prevState.open }))
    }
  }
}
7
oklas

いくつかの調査を行った後、WebSocketは

new WebSocket("ws://10.0.2.2:PORT/")

ここで、10.0.2.2はlocalhostを意味します

2
Razvan Alex