React-Native Websocket事件数据属性丢失

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React-Native Websocket事件数据属性丢失相关的知识,希望对你有一定的参考价值。

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

好像event.data属性似乎完全丢失了。如果我在react-native中将它记录到控制台,那么结果是“未定义”。如果我在浏览器中使用相同的代码,一切都很完美。

我正在使用react-native 0.33,这是我的代码:

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;

}

如果有更多本地/ websocket经验的人可以帮助我找到解决方案,那将会很棒。谢谢。

答案

在react-native高达0.53(目前的最新版本)中,react-native WebSocket事件处理依赖于event-target-shim 1.1.1 lib,它包装事件并且不包含数据到包装事件,所以为了获取WebSocket事件数据您可以使用以下两种方法之一:

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

第一种方法:

  • 使用<your event>.__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以使用event-target-shim的分叉版本;
  • 重写你项目的package.json;

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

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

以上是关于React-Native Websocket事件数据属性丢失的主要内容,如果未能解决你的问题,请参考以下文章

React-native websocket TLS连接

websocket

react-native点击事件

react-native 手势响应以及触摸事件的处理

react-native 中是不是有与 RCTJavaScriptDidLoadNotification 事件等效的 Android?

React-Native:无法触发 Native UIButton 触摸事件