Javascript React Native：通过websocket实现自定义客户端

我在应用程序中使用react-native，根据我的理解，下面是react-native体系结构

本机：本机移动设备上的一些精简UI层
js：实际的js运行时
桥接器：处理本机和js端之间的通信。这种通信可以通过WebSocket进行

在上述方法中，js端定义UI的外观，并创建虚拟DOM，然后将其传递给本机端，本机端从虚拟DOM创建UI。我想要实现的是为js运行时定义一个自定义客户端

假设我有一个客户端，它通过WebSocket连接到react本机服务器，服务器将所需的虚拟DOM推送到客户端，客户端对DOM执行一些操作。客户机还将客户机和其他事件传递回服务器，服务器识别并调用react组件类中的相应处理程序

我看了react under the hood的视频，我当然知道这样做是可能的，但我不知道从哪里开始，也找不到任何相关文档

react native教程中的指南与我正在寻找的类似，但我希望该应用程序独立于android或ios等本机设备。此应用程序可以是一个简单的控制台应用程序，只需在控制台上记录通过websocket通信从服务器接收的消息

更具体地说，我正在寻找这样的东西

For instance, if a React Native app is defined like this:

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
<TextInput
    keyboardType="default"
    returnKeyType="done"
    onKeyPress={this.handleKeyDown}
    placeholder="Enter text here..."
/>

    );
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
handleKeyDown: function(e) {
    console.log(e.nativeEvent.key);
},

The server might send a JSON message to the websocket client that looks like this.  This is just a suggested format - the actual format just has to encapsulate a good view and be readable for review.  The true format will come in a later challenge, so all we're doing now is validating.

{
    "app": {
        "name": "Hello World",
        "view": {
            "text": "Hello World!",
            "textInput": "Enter text here"
        }
    }
}

Client

The client will open a connection to a websocket on the server.  Once the connection is open, it will send a simple message, like this:

{
    "onConnect": {
        "name": "React client1"
    }
}

The server will respond with the view details described above.

Then, the client can send an event, like a key press.  The event could look something like this:

{
    "event": {
        "type": "keyDown",
        "key": "Enter"
    }
}  

At which point the handleKeyDown callback would be called on the server.  An update to the text should then be sent from the server back to the client to complete the full loop.  This update to the text can just be something like below, but it should be fully implemented in React Native and then translated down for the client.

{
    "update": {
        "text": "Updated text"
    }
}

例如，如果React本机应用的定义如下：
从“React”导入React，{Component}；
从“react native”导入{AppRegistry，Text}；
类HelloWorldApp扩展了组件{
render（）{
返回(
你好，世界！
);
}
}
注册表组件（'HelloWorldApp'，（）=>HelloWorldApp）；
handleKeyDown：功能（e）{
console.log（e.nativeEvent.key）；
},
服务器可能会向websocket客户端发送一条JSON消息，如下所示。这只是一个建议的格式-实际的格式只需要封装一个好的视图，并且可读性好，便于查看。真正的格式将在稍后的挑战中出现，因此我们现在所做的就是验证。
{
“应用程序”：{
“姓名”：“你好，世界”，
“视图”：{
“文本”：“你好，世界！”，
“文本输入”：“在此处输入文本”
}
}
}
客户
客户端将打开到服务器上websocket的连接。一旦连接打开，它将发送一条简单的消息，如下所示：
{
“onConnect”：{
“名称”：“反应客户端1”
}
}
服务器将响应上面描述的视图详细信息。
然后，客户端可以发送事件，如按键。事件可能看起来像这样：
{
“事件”：{
“类型”：“按下键”，
“键”：“输入”
}
}  
此时将在服务器上调用handleKeyDown回调。然后，应该将文本更新从服务器发送回客户端，以完成整个循环。对文本的更新可以如下所示，但应该在React Native中完全实现，然后为客户端向下翻译。
{
“更新”：{
“文本”：“更新文本”
}
}

您对react native的理解是正确的。我想补充一点，react native是一种用Javascript和react框架风格编写ios/android应用程序的方法。所以，如果你想制作一个控制台应用程序，你可以使用React with Electron[如果你想要一个桌面应用程序]，或者控制台应用程序也有React实现

这不仅仅是关于控制台应用程序，我想利用react核心概念的威力，即UI=f（数据），我想定义自己的自定义UI层。我将重点放在react native上，因为我希望通过WebSocket将UI视图从服务器流到某个远程客户端。有可能通过react实现这一点吗？你能参考一些文档吗？我明白了，我发现这个指南与你的用例相关。你误解了这不是我要问的，这是一个在浏览器中呈现的简单聊天应用程序。我想实现我自己的UI层。