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

Posted 2023-03-14

【中文标题】React Native：通过 websocket 实现自定义客户端

【英文标题】：React Native: Implement custom client over websocket

【发布时间】：2017-02-03 08:52:22

【问题描述】：

我正在为我的应用程序使用 react native，根据我的理解，下面是 react native 架构

native: Some thin UI layer on native mobile device js: The actual js runtime bridge: Handles the communication between native and js side. This communication can be over websockets

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

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

我观看了 this 幕后反应视频，我当然知道可以这样做，但我不知道从哪里开始，也没有找到任何相关文档。

来自 react native 教程的This 指南与我正在寻找的类似，但我希望这个应用程序独立于 android 或 ios 等本机设备上的 running the app。这个应用程序可以是一个简单的控制台应用程序，可以简单地将通过 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"
    

【参考方案1】：

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

【讨论】：

这不仅仅是关于控制台应用程序，我想利用反应核心概念的力量，即 UI = f(data) 并且我想定义我自己的自定义 UI 层。我专注于 react native，因为我想通过 websocket 将 UI 视图从服务器流式传输到某个远程客户端。是否有可能通过 react 实现这一目标？你能参考一些文档吗？

我明白了，我发现本指南与您的用例相关。 danialk.github.io/blog/2013/06/16/…

你误解了这不是我要问的，那是一个在浏览器中呈现的简单聊天应用程序。我想实现自己的 UI 层。