mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Guilherme Iscaro
4b9c99dff0
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