缺少 React-Native Websocket 事件数据属性

问题描述

我正在尝试通过 React-Native 中的 Websocket 连接连接到 Watson TTS API.连接已建立，我可以向服务器发送消息，但是我从服务器返回的数据总是为空.

I am trying to connect to the Watson TTS API over a Websocket connection in React-Native. The connection is established and I can send a message to the server, however the data that I get back from the server somehow always is empty.

似乎 event.data 属性完全丢失了.如果我在 react-native 中将它记录到控制台，我会得到未定义"的结果.如果我在浏览器中使用相同的代码，则一切正常.

It seems as if the event.data property is completely missing. If I log it to the console in react-native I get 'undefined' as a result. If i use the same code in the browser everything works perfectly.

我使用的是 react-native 0.33，这是我的代码:

I am using react-native 0.33 and here's my code:

function connectTTS(token) {
  var voice = "de-DE_BirgitVoice";
  var format = 'audio/basic';
  var token = token;
  var wsURI = "wss://stream.watsonplatform.net/text-to-speech/api/v1/synthesize?voice=" + voice + "&watson-token=" + token;

  function onOpen(evt) {
    var message = {
      text: "Hello world.",
      accept: format
    };
    // note: the Text to Speech service currently only accepts a single message per WebSocket connection
    websocket.send(JSON.stringify(message));
  }

  var audioParts = [];
  var finalAudio;
  function onMessage(evt) {
    console.log(evt.data);
    if (typeof evt.data === 'string') {
      console.log('Received string message: ', evt.data)
    } else {
      console.log('Received ' + evt.data.size + ' binary bytes', evt.data.type);
      audioParts.push(evt.data);
    }
  }

  function onClose(evt) {
    console.log('WebSocket closed', evt.code, evt.reason);
    console.log(audioParts);
    console.log(format);
    finalAudio = new Blob(audioParts, {type: format});
    console.log('final audio: ', finalAudio);
  }

  function onError(evt) {
    console.log('WebSocket error', evt);
  }

  var websocket = new WebSocket(wsURI);
  websocket.onopen = onOpen;
  websocket.onclose = onClose;
  websocket.onmessage = onMessage;
  websocket.onerror = onError;

}

如果有更多 react-native/websocket 经验的人可以帮助我找到解决方案，那就太好了.谢谢.

It would be great if somebody with more react-native / websocket experience could help me find the solution. Thanks.

推荐答案

在 react-native up to 0.53(目前最新版本)中，react-native WebSocket 事件处理依赖于 event-target-shim 1.1.1 lib，其中包装一个事件并且不包括包装事件的数据，因此为了获取 WebSocket 事件数据，您可以使用以下两种方法之一:

In react-native up to 0.53 (latest version at the moment), react-native WebSocket event processing relies on event-target-shim 1.1.1 lib which wraps an event and does not include data to the wrapped event, so in order to get WebSocket event data you may use one of two approaches:

1. 从__proto__获取数据；
2. 重写 event-target-shim 1.1.1；

第一种方法:

• 使用.__proto__.__proto__.data

第二种方法:

• fork event-target-shim 并重置为 event-target-shim 1.1.1；
• fork react-native;
• 将下面列出的代码添加到 event-target-shim/lib/event-wrapper.js；
• 重写 react-native package.json 以使用事件目标垫片的分叉版本；
• 重写你的项目的 package.json;

在 var propertyDefinition = {...} 之后添加在 exports.createEventWrapper 中的代码:

Code to add in exports.createEventWrapper after var propertyDefinition = {...}:

if (event.type === "message"){
  propertyDefinition.data = {value: event.data, enumerable: true};
}

这篇关于缺少 React-Native Websocket 事件数据属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！