From 4b9c99dff0dad50df1e203dccd806eee56335740 Mon Sep 17 00:00:00 2001
From: Guilherme Iscaro <cabelitostos@gmail.com>
Date: Fri, 21 Jun 2019 03:39:47 -0700
Subject: [PATCH] Protocol property of WebSocket object is undefined (#25273)

Summary:
Prior to this patch the websocket protocol was not being set when a connection
was opened, which could cause client libraries and apps to not work properly.
According to the [whatwg] spec the protocol must be set once the connection is
estabilished.

[whatwg]: https://html.spec.whatwg.org/multipage/web-sockets.html#feedback-from-the-protocol

## Changelog

[Javascript] [Fixed] - Properly set the this.protocol on WebSocket open
[Android] [Fixed] - Send the server chosen protocol to the WebSocket object
[iOS] [Fixed] - Send the server chosen protocol to the WebSocket object
Pull Request resolved: https://github.com/facebook/react-native/pull/25273

Test Plan:
In order to reproduce the issue you **need to install wampy@6.2.1**. Since **wampy@6.2.2** and newer contains a workaround for this react-native bug.

https://www.npmjs.com/package/wampy

```javascript
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * format
 * flow
 */

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import Wampy from "wampy";

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};

export default class App extends Component<Props> {
  state = {conState: 'Initializing...'};
  componentDidMount() {
    const url = "wss://demo.crossbar.io/ws";

    const ws = new Wampy(url, {
      realm: "crossbardemo",
      ws: WebSocket,
      debug: true,
      onConnect: () => {
        console.log("WAMP onConnect");
        this.setState({conState: 'Connected'});
      },
      onClose: () => {
        console.log("WAMP onClose");
        this.setState({conState: 'Connection closed'});
      },
      onError: () => {
        console.log("WAMP onError");
        this.setState({conState: 'Connection Error'});
      }
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.message}>{this.state.conState}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  message: {
    fontSize: 20,
    color: 'black'
  },
});
```

Using the code above one must see the message **WAMP onConnect** on Console and **Connected** in the middle of the screen

Closes https://github.com/facebook/react-native/issues/24796

Differential Revision: D15938870

Pulled By: cpojer

fbshipit-source-id: 10a0a9b40c2a69e484ead37149abc2b1158a4ffc
---
 Libraries/WebSocket/RCTWebSocketModule.m                       | 3 ++-
 Libraries/WebSocket/WebSocket.js                               | 1 +
 .../com/facebook/react/modules/websocket/WebSocketModule.java  | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/Libraries/WebSocket/RCTWebSocketModule.m b/Libraries/WebSocket/RCTWebSocketModule.m
index 0150cd59582..c0426e947d5 100644
--- a/Libraries/WebSocket/RCTWebSocketModule.m
+++ b/Libraries/WebSocket/RCTWebSocketModule.m
@@ -155,7 +155,8 @@ RCT_EXPORT_METHOD(close:(NSInteger)code reason:(NSString *)reason socketID:(nonn
 - (void)webSocketDidOpen:(RCTSRWebSocket *)webSocket
 {
   [self sendEventWithName:@"websocketOpen" body:@{
-    @"id": webSocket.reactTag
+    @"id": webSocket.reactTag,
+    @"protocol": webSocket.protocol ? webSocket.protocol : @""
   }];
 }
 
diff --git a/Libraries/WebSocket/WebSocket.js b/Libraries/WebSocket/WebSocket.js
index 47d56c7eecd..ccca07c77f2 100644
--- a/Libraries/WebSocket/WebSocket.js
+++ b/Libraries/WebSocket/WebSocket.js
@@ -237,6 +237,7 @@ class WebSocket extends EventTarget(...WEBSOCKET_EVENTS) {
           return;
         }
         this.readyState = this.OPEN;
+        this.protocol = ev.protocol;
         this.dispatchEvent(new WebSocketEvent('open'));
       }),
       this._eventEmitter.addListener('websocketClosed', ev => {
diff --git a/ReactAndroid/src/main/java/com/facebook/react/modules/websocket/WebSocketModule.java b/ReactAndroid/src/main/java/com/facebook/react/modules/websocket/WebSocketModule.java
index c2c4021ed3c..7c776cadef6 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/modules/websocket/WebSocketModule.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/modules/websocket/WebSocketModule.java
@@ -144,6 +144,7 @@ public final class WebSocketModule extends ReactContextBaseJavaModule {
             mWebSocketConnections.put(id, webSocket);
             WritableMap params = Arguments.createMap();
             params.putInt("id", id);
+            params.putString("protocol", response.header("Sec-WebSocket-Protocol", ""));
             sendEvent("websocketOpen", params);
           }