|
| 1 | +/** |
| 2 | + * Sample React Native App |
| 3 | + * https://github.com/facebook/react-native |
| 4 | + * |
| 5 | + */ |
| 6 | + |
| 7 | +import React from 'react'; |
| 8 | +import { |
| 9 | + ScrollView, |
| 10 | + StyleSheet, |
| 11 | + Text, |
| 12 | + View |
| 13 | +} from 'react-native'; |
| 14 | + |
| 15 | +var net = require('react-native-tcp-socket'); |
| 16 | + |
| 17 | +function randomPort() { |
| 18 | + return Math.random() * 60536 | 0 + 5000; // 60536-65536 |
| 19 | +} |
| 20 | + |
| 21 | +class App extends React.Component { |
| 22 | + constructor(props) { |
| 23 | + super(props); |
| 24 | + |
| 25 | + this.updateChatter = this.updateChatter.bind(this); |
| 26 | + this.state = { chatter: [] }; |
| 27 | + } |
| 28 | + |
| 29 | + updateChatter(msg) { |
| 30 | + this.setState({ |
| 31 | + chatter: this.state.chatter.concat([msg]) |
| 32 | + }); |
| 33 | + } |
| 34 | + |
| 35 | + componentDidMount() { |
| 36 | + const serverPort = 5000; |
| 37 | + const serverHost = "192.168.1.42"; |
| 38 | + let server; |
| 39 | + // let server = net.createServer((socket) => { |
| 40 | + // this.updateChatter('server connected on ' + JSON.stringify(socket.address())); |
| 41 | + |
| 42 | + // socket.on('data', (data) => { |
| 43 | + // this.updateChatter('Server Received: ' + data); |
| 44 | + // socket.write('Echo server\r\n'); |
| 45 | + // }); |
| 46 | + |
| 47 | + // socket.on('error', (error) => { |
| 48 | + // this.updateChatter('error ' + error); |
| 49 | + // }); |
| 50 | + |
| 51 | + // socket.on('close', (error) => { |
| 52 | + // this.updateChatter('server client closed ' + (error ? error : '')); |
| 53 | + // }); |
| 54 | + // }).listen(serverPort, () => { |
| 55 | + // this.updateChatter('opened server on ' + JSON.stringify(server.address())); |
| 56 | + // }); |
| 57 | + |
| 58 | + // server.on('error', (error) => { |
| 59 | + // this.updateChatter('error ' + error); |
| 60 | + // }); |
| 61 | + |
| 62 | + // server.on('close', () => { |
| 63 | + // this.updateChatter('server close'); |
| 64 | + // }); |
| 65 | + |
| 66 | + let client = net.createConnection({ |
| 67 | + port: serverPort, |
| 68 | + host: serverHost, |
| 69 | + localAddress: "192.168.1.33", |
| 70 | + interface: "wifi" |
| 71 | + }, () => { |
| 72 | + this.updateChatter('opened client on ' + JSON.stringify(client.address())); |
| 73 | + client.write('Hello, server! Love, Client.'); |
| 74 | + }); |
| 75 | + |
| 76 | + client.on('data', (data) => { |
| 77 | + console.log(data.toString()); |
| 78 | + this.updateChatter('Client Received: ' + data); |
| 79 | + |
| 80 | + this.client.destroy(); // kill client after server's response |
| 81 | + // this.server.close(); |
| 82 | + }); |
| 83 | + |
| 84 | + client.on('error', (error) => { |
| 85 | + console.log(error); |
| 86 | + this.updateChatter('client error ' + error); |
| 87 | + }); |
| 88 | + |
| 89 | + client.on('close', () => { |
| 90 | + console.log("Client closed"); |
| 91 | + this.updateChatter('client close'); |
| 92 | + }); |
| 93 | + |
| 94 | + this.server = server; |
| 95 | + this.client = client; |
| 96 | + } |
| 97 | + |
| 98 | + componentWillUnmount() { |
| 99 | + this.server = null; |
| 100 | + this.client = null; |
| 101 | + } |
| 102 | + |
| 103 | + render() { |
| 104 | + return ( |
| 105 | + <View style={styles.container}> |
| 106 | + <ScrollView> |
| 107 | + {this.state.chatter.map((msg, index) => { |
| 108 | + return ( |
| 109 | + <Text key={index} style={styles.welcome}> |
| 110 | + {msg} |
| 111 | + </Text> |
| 112 | + ); |
| 113 | + })} |
| 114 | + </ScrollView> |
| 115 | + </View> |
| 116 | + ); |
| 117 | + } |
| 118 | +}; |
| 119 | + |
| 120 | +const styles = StyleSheet.create({ |
| 121 | + container: { |
| 122 | + flex: 1, |
| 123 | + justifyContent: 'center', |
| 124 | + alignItems: 'center', |
| 125 | + backgroundColor: '#F5FCFF', |
| 126 | + }, |
| 127 | + welcome: { |
| 128 | + fontSize: 20, |
| 129 | + textAlign: 'center', |
| 130 | + margin: 10, |
| 131 | + }, |
| 132 | + instructions: { |
| 133 | + textAlign: 'center', |
| 134 | + color: '#333333', |
| 135 | + marginBottom: 5, |
| 136 | + }, |
| 137 | +}); |
| 138 | + |
| 139 | +export default App; |
0 commit comments