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

Posted 2021-05-04

我试图通过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};
}