javascript - 向 websocket 服务器 React Native 应用程序发送/写入值

问题描述

我正在开发一个我想用于控制灯光等的应用程序。我已经在一个有效的 React Native 应用程序中实现了 Websocket（测试我已经连接到我的 websocket 服务器，localbus.lp）。我想添加一个Button来控制一些灯光，我已经用 HTML 测试了这个，并且可以工作。但是我怎样才能在React Native应用程序中做同样的事情呢？

示例 HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="http://192.168.10.11/apps/js/jquery.js.gz"></script>
  <script src="http://192.168.10.11/apps/js/localbus.js.gz"></script>
  <script src="http://192.168.10.11/scada/vis/busdecode.js.gz"></script>

</head>
<body>

    <div class="container">
        <div>
            <input type = "text" id= "input-get" placeholder = "Get Value">
        </div>

        <div>
            <input type = "text" id = "input-set" placeholder = "Set Value">
        </div>

    </div>
    


    <button onclick="toggle()">KONTOR</button>
    <script>
        localbus.init('http://192.168.10.11', 'admin:password');


        var toggled = false;
        function toggle(){
            if(!toggled){
                toggled = true;
                localbus.write('1/0/4', true);
                buttontext = PÅ

                return;

            }
            if (toggled) {
                toggled = false;
                localbus.write('1/0/4', false);
                return;
            }
        

            
        }
        

    </script>

<script>

这是我在 React Native 中的 App.js：当我在浏览器中运行它时，它会打开到我的 websocket server 的连接localbus.lp。但我不确定在哪里以及如何添加Button与 HTML 相同的内容。

export default class App extends Component{
  render(){
    return(
      <View style={{flex: 1}}>
        
        <WS
        
        ref = {ref => {this.ws = ref}}
        url = "ws://admin:password@192.168.10.11/apps/localbus.lp"
        onOpen = {() =>{
          console.log('Open')
          this.ws.send('Hello')
        }}
        onMessage={console.log}
        onError={console.log}
        onClose={console.log}
        reconnect
        />
        <Button>

        </Button>

     

      </View>
    )
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

标签： javascriptreactjsreact-nativewebsocket

javascript - 向 websocket 服务器 React Native 应用程序发送/写入值

问题描述

解决方案

推荐阅读