使用React Native进行WebSocket通信

在App Engine的可扩展环境中，使用nodejs搭建WebSocket服务器，并从React Native客户端连接到该服务器。我几乎可以根据示例代码创建，但遇到了一点小问题。这里我将写到与本地的nodejs服务器进行通信的部分。

服务器 fú qì)

请参考以下链接：
https://github.com/GoogleCloudPlatform/nodejs-docs-samples/tree/master/appengine/websockets

暂时先在本地尝试直接运行。
克隆，移动，并运行。

git clone https://github.com/GoogleCloudPlatform/nodejs-docs-samples.git
cd nodejs-docs-samples/appengine/websockets/
yarn install && yarn start

通过浏览器访问localhost:8080，您将能够看到WebSocket消息客户端的界面，因此您可以在两个浏览器中打开并尝试实际的消息交互。我们将通过ReactNative客户端连接到此服务器。

客户

我将简单创建一个客户端并连接到服务器进行尝试。安装expo-cli，

expo init

然后，创建一个空白项目并切换到项目文件夹，在App.tsx中进行如下更改（这是一个用于尝试WebSocket的最基本示例）。如果从手机上扫描二维码进行测试，则URL应指定本地机器的IP地址（在本地运行服务器端时）。
以下使用了socket.io-client库。虽然我认为使用标准库的WebSocket也可以工作，但是出了些问题。

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity, Alert } from 'react-native';
import socketIOClient from "socket.io-client";

export default class App extends React.Component {

socket

constructor(props) {
    super(props);
    this.state = {text: ""}
}

componentDidMount(){
this.socket = socketIOClient("ws://192.xxx.xxx.xxx:8080");
//  this.socket = socketIOClient("https://'app engine project id'.appspot.com");

const _that = this;

this.socket.on('message', function(data){ 
    console.log('recieve', data)
    Alert.alert("Message recieved. " + JSON.stringify(data))
});
}

sendMessage(){
    if(!this.state.text){
    Alert.alert('Please input message')
    return;
    }
    this.socket.emit('message', this.state.text);
}

render() {
    return (<View style={styles.container}>
    <TextInput onChangeText={(text) => this.setState({text: text}) } 
    style={styles.input}></TextInput>
    <TouchableOpacity style={styles.button}
    onPress={() => this.sendMessage()}><Text>Click to send Message</Text></TouchableOpacity>
    </View>)
}
}

const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
},
input: {
    height: 40, borderColor: 'gray', borderWidth: 1 , width: '100%'
},
button: {
    backgroundColor: "#888",  height: 40, width: "100%", marginTop: 10, alignItems: 'center',padding: 'auto'
}
});

然后，通过 yarn add socket.io-client 来添加库，并通过 yarn start 来启动客户端。

应用引擎

将此示例服务器部署到AppEngine非常简单，因为服务器源代码中已包含app.yml。只需在文件夹nodejs-docs-samples/appengine/websockets/下运行gcloud app deploy即可。对于ReactNative客户端，将URL更改为实际的URL。

建议立即删除不再使用的服务器。我曾经让它一直运行，结果产生了数千元的使用费用。AppEngine的flux环境可能需要一些费用吧？可能与WebSocket有关？