2015-10-07 18:28:34 +03:00
|
|
|
/**
|
2018-09-12 01:27:47 +03:00
|
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
2015-10-07 18:28:34 +03:00
|
|
|
*
|
2018-02-17 05:24:55 +03:00
|
|
|
* This source code is licensed under the MIT license found in the
|
|
|
|
* LICENSE file in the root directory of this source tree.
|
2015-10-07 18:28:34 +03:00
|
|
|
*
|
2018-05-11 05:06:46 +03:00
|
|
|
* @format
|
2016-02-16 14:28:05 +03:00
|
|
|
* @flow
|
2015-10-07 18:28:34 +03:00
|
|
|
*/
|
2018-05-11 05:06:46 +03:00
|
|
|
|
2015-10-07 18:28:34 +03:00
|
|
|
'use strict';
|
|
|
|
|
2019-05-08 18:44:25 +03:00
|
|
|
const Blob = require('../Blob/Blob');
|
2019-08-09 20:06:53 +03:00
|
|
|
const BlobManager = require('../Blob/BlobManager');
|
2017-07-26 18:12:12 +03:00
|
|
|
const EventTarget = require('event-target-shim');
|
2019-05-08 18:44:25 +03:00
|
|
|
const NativeEventEmitter = require('../EventEmitter/NativeEventEmitter');
|
|
|
|
const Platform = require('../Utilities/Platform');
|
|
|
|
const WebSocketEvent = require('./WebSocketEvent');
|
2015-10-07 18:28:34 +03:00
|
|
|
|
2016-04-19 01:42:42 +03:00
|
|
|
const base64 = require('base64-js');
|
2019-05-08 18:44:25 +03:00
|
|
|
const binaryToBase64 = require('../Utilities/binaryToBase64');
|
2018-12-03 10:49:12 +03:00
|
|
|
const invariant = require('invariant');
|
2017-07-26 18:12:12 +03:00
|
|
|
|
2019-05-08 18:44:25 +03:00
|
|
|
import type EventSubscription from '../vendor/emitter/EventSubscription';
|
2019-08-09 20:06:53 +03:00
|
|
|
import NativeWebSocketModule from './NativeWebSocketModule';
|
2015-12-22 20:22:01 +03:00
|
|
|
|
2017-07-26 18:12:12 +03:00
|
|
|
type ArrayBufferView =
|
|
|
|
| Int8Array
|
|
|
|
| Uint8Array
|
|
|
|
| Uint8ClampedArray
|
|
|
|
| Int16Array
|
|
|
|
| Uint16Array
|
|
|
|
| Int32Array
|
|
|
|
| Uint32Array
|
|
|
|
| Float32Array
|
|
|
|
| Float64Array
|
2018-05-11 05:06:46 +03:00
|
|
|
| DataView;
|
2017-07-26 18:12:12 +03:00
|
|
|
|
2018-05-11 05:06:46 +03:00
|
|
|
type BinaryType = 'blob' | 'arraybuffer';
|
2017-07-26 18:12:12 +03:00
|
|
|
|
2016-04-19 01:42:42 +03:00
|
|
|
const CONNECTING = 0;
|
|
|
|
const OPEN = 1;
|
|
|
|
const CLOSING = 2;
|
|
|
|
const CLOSED = 3;
|
|
|
|
|
|
|
|
const CLOSE_NORMAL = 1000;
|
|
|
|
|
2018-05-11 05:06:46 +03:00
|
|
|
const WEBSOCKET_EVENTS = ['close', 'error', 'message', 'open'];
|
2016-04-19 01:42:42 +03:00
|
|
|
|
|
|
|
let nextWebSocketId = 0;
|
2015-10-07 18:28:34 +03:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Browser-compatible WebSockets implementation.
|
|
|
|
*
|
|
|
|
* See https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
|
2016-01-20 22:00:21 +03:00
|
|
|
* See https://github.com/websockets/ws
|
2015-10-07 18:28:34 +03:00
|
|
|
*/
|
2019-08-09 20:06:53 +03:00
|
|
|
class WebSocket extends (EventTarget(...WEBSOCKET_EVENTS): any) {
|
|
|
|
static CONNECTING: number = CONNECTING;
|
|
|
|
static OPEN: number = OPEN;
|
|
|
|
static CLOSING: number = CLOSING;
|
|
|
|
static CLOSED: number = CLOSED;
|
2015-10-07 18:28:34 +03:00
|
|
|
|
2016-04-19 01:42:42 +03:00
|
|
|
CONNECTING: number = CONNECTING;
|
|
|
|
OPEN: number = OPEN;
|
|
|
|
CLOSING: number = CLOSING;
|
|
|
|
CLOSED: number = CLOSED;
|
2015-10-07 18:28:34 +03:00
|
|
|
|
2016-04-19 01:42:42 +03:00
|
|
|
_socketId: number;
|
2016-05-12 18:29:39 +03:00
|
|
|
_eventEmitter: NativeEventEmitter;
|
2016-04-19 01:42:42 +03:00
|
|
|
_subscriptions: Array<EventSubscription>;
|
2017-07-26 18:12:12 +03:00
|
|
|
_binaryType: ?BinaryType;
|
2016-04-19 01:42:42 +03:00
|
|
|
|
|
|
|
onclose: ?Function;
|
|
|
|
onerror: ?Function;
|
|
|
|
onmessage: ?Function;
|
|
|
|
onopen: ?Function;
|
|
|
|
|
|
|
|
bufferedAmount: number;
|
|
|
|
extension: ?string;
|
|
|
|
protocol: ?string;
|
|
|
|
readyState: number = CONNECTING;
|
|
|
|
url: ?string;
|
|
|
|
|
2018-05-11 05:06:46 +03:00
|
|
|
constructor(
|
|
|
|
url: string,
|
|
|
|
protocols: ?string | ?Array<string>,
|
|
|
|
options: ?{headers?: {origin?: string}},
|
|
|
|
) {
|
2016-04-19 01:42:42 +03:00
|
|
|
super();
|
|
|
|
if (typeof protocols === 'string') {
|
|
|
|
protocols = [protocols];
|
|
|
|
}
|
2015-10-07 18:28:34 +03:00
|
|
|
|
WebSocket API change to make room for other connection options (SSL pinning)
Summary:
This is a simple groundwork PR to allow options to be passed to the `WebSocket` constructor. It represents a minor change to an undocumented part of the API, moving `headers` to within `options`.
This will be a BC for anyone manually specifying headers other than `origin` but a) that's not a common use case with WebSockets and b) it's not documented even in code and wouldn't currently pass a flow check.
NB: The third argument to the WebSocket constructor isn't part of the W3C spec, so I think this is a good place for RN-specific named parameters, better than adding a fourth argument. `protocols` needs to stay where it is, in line with the spec.
If this goes through I'd like to build on it by adding an additional connection option for SSL certificate pinning, as already supported by the underlying `okhttp` and `RCTSRWebSocket`. It could later be expanded for various other uses.
Currently, there's no way for a `WebSocket` user to specify any connection options other than url, protocol and headers. The fact that `WebSocket` connects in its constructor means any options have to go in there.
Connect to a websocket server using iOS and Android, observe the connection headers:
1. Without specifying `origin`, the default header should be set
2. Specifying it in the old way `new WebSocket(url, protocols, { origin: 'customorigin.com' })`
3. Specifying it in the new way `new WebSocket(url, protocols, { headers: { origin: 'customorigin.com' }})`.
I've tested myself using the test app with iOS and Android.
Closes https://github.com/facebook/react-native/pull/15334
Differential Revision: D5601675
Pulled By: javache
fbshipit-source-id: 5959d03a3e1d269b2c6775f3e0cf071ff08617bf
2017-08-10 15:59:36 +03:00
|
|
|
const {headers = {}, ...unrecognized} = options || {};
|
|
|
|
|
|
|
|
// Preserve deprecated backwards compatibility for the 'origin' option
|
2018-03-20 04:24:11 +03:00
|
|
|
/* $FlowFixMe(>=0.68.0 site=react_native_fb) This comment suppresses an
|
|
|
|
* error found when Flow v0.68 was deployed. To see the error delete this
|
|
|
|
* comment and run Flow. */
|
WebSocket API change to make room for other connection options (SSL pinning)
Summary:
This is a simple groundwork PR to allow options to be passed to the `WebSocket` constructor. It represents a minor change to an undocumented part of the API, moving `headers` to within `options`.
This will be a BC for anyone manually specifying headers other than `origin` but a) that's not a common use case with WebSockets and b) it's not documented even in code and wouldn't currently pass a flow check.
NB: The third argument to the WebSocket constructor isn't part of the W3C spec, so I think this is a good place for RN-specific named parameters, better than adding a fourth argument. `protocols` needs to stay where it is, in line with the spec.
If this goes through I'd like to build on it by adding an additional connection option for SSL certificate pinning, as already supported by the underlying `okhttp` and `RCTSRWebSocket`. It could later be expanded for various other uses.
Currently, there's no way for a `WebSocket` user to specify any connection options other than url, protocol and headers. The fact that `WebSocket` connects in its constructor means any options have to go in there.
Connect to a websocket server using iOS and Android, observe the connection headers:
1. Without specifying `origin`, the default header should be set
2. Specifying it in the old way `new WebSocket(url, protocols, { origin: 'customorigin.com' })`
3. Specifying it in the new way `new WebSocket(url, protocols, { headers: { origin: 'customorigin.com' }})`.
I've tested myself using the test app with iOS and Android.
Closes https://github.com/facebook/react-native/pull/15334
Differential Revision: D5601675
Pulled By: javache
fbshipit-source-id: 5959d03a3e1d269b2c6775f3e0cf071ff08617bf
2017-08-10 15:59:36 +03:00
|
|
|
if (unrecognized && typeof unrecognized.origin === 'string') {
|
2018-05-11 05:06:46 +03:00
|
|
|
console.warn(
|
|
|
|
'Specifying `origin` as a WebSocket connection option is deprecated. Include it under `headers` instead.',
|
|
|
|
);
|
2017-09-06 13:25:01 +03:00
|
|
|
/* $FlowFixMe(>=0.54.0 site=react_native_fb,react_native_oss) This
|
|
|
|
* comment suppresses an error found when Flow v0.54 was deployed. To see
|
|
|
|
* the error delete this comment and run Flow. */
|
WebSocket API change to make room for other connection options (SSL pinning)
Summary:
This is a simple groundwork PR to allow options to be passed to the `WebSocket` constructor. It represents a minor change to an undocumented part of the API, moving `headers` to within `options`.
This will be a BC for anyone manually specifying headers other than `origin` but a) that's not a common use case with WebSockets and b) it's not documented even in code and wouldn't currently pass a flow check.
NB: The third argument to the WebSocket constructor isn't part of the W3C spec, so I think this is a good place for RN-specific named parameters, better than adding a fourth argument. `protocols` needs to stay where it is, in line with the spec.
If this goes through I'd like to build on it by adding an additional connection option for SSL certificate pinning, as already supported by the underlying `okhttp` and `RCTSRWebSocket`. It could later be expanded for various other uses.
Currently, there's no way for a `WebSocket` user to specify any connection options other than url, protocol and headers. The fact that `WebSocket` connects in its constructor means any options have to go in there.
Connect to a websocket server using iOS and Android, observe the connection headers:
1. Without specifying `origin`, the default header should be set
2. Specifying it in the old way `new WebSocket(url, protocols, { origin: 'customorigin.com' })`
3. Specifying it in the new way `new WebSocket(url, protocols, { headers: { origin: 'customorigin.com' }})`.
I've tested myself using the test app with iOS and Android.
Closes https://github.com/facebook/react-native/pull/15334
Differential Revision: D5601675
Pulled By: javache
fbshipit-source-id: 5959d03a3e1d269b2c6775f3e0cf071ff08617bf
2017-08-10 15:59:36 +03:00
|
|
|
headers.origin = unrecognized.origin;
|
2017-09-06 13:25:01 +03:00
|
|
|
/* $FlowFixMe(>=0.54.0 site=react_native_fb,react_native_oss) This
|
|
|
|
* comment suppresses an error found when Flow v0.54 was deployed. To see
|
|
|
|
* the error delete this comment and run Flow. */
|
WebSocket API change to make room for other connection options (SSL pinning)
Summary:
This is a simple groundwork PR to allow options to be passed to the `WebSocket` constructor. It represents a minor change to an undocumented part of the API, moving `headers` to within `options`.
This will be a BC for anyone manually specifying headers other than `origin` but a) that's not a common use case with WebSockets and b) it's not documented even in code and wouldn't currently pass a flow check.
NB: The third argument to the WebSocket constructor isn't part of the W3C spec, so I think this is a good place for RN-specific named parameters, better than adding a fourth argument. `protocols` needs to stay where it is, in line with the spec.
If this goes through I'd like to build on it by adding an additional connection option for SSL certificate pinning, as already supported by the underlying `okhttp` and `RCTSRWebSocket`. It could later be expanded for various other uses.
Currently, there's no way for a `WebSocket` user to specify any connection options other than url, protocol and headers. The fact that `WebSocket` connects in its constructor means any options have to go in there.
Connect to a websocket server using iOS and Android, observe the connection headers:
1. Without specifying `origin`, the default header should be set
2. Specifying it in the old way `new WebSocket(url, protocols, { origin: 'customorigin.com' })`
3. Specifying it in the new way `new WebSocket(url, protocols, { headers: { origin: 'customorigin.com' }})`.
I've tested myself using the test app with iOS and Android.
Closes https://github.com/facebook/react-native/pull/15334
Differential Revision: D5601675
Pulled By: javache
fbshipit-source-id: 5959d03a3e1d269b2c6775f3e0cf071ff08617bf
2017-08-10 15:59:36 +03:00
|
|
|
delete unrecognized.origin;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Warn about and discard anything else
|
|
|
|
if (Object.keys(unrecognized).length > 0) {
|
2018-05-11 05:06:46 +03:00
|
|
|
console.warn(
|
|
|
|
'Unrecognized WebSocket connection option(s) `' +
|
|
|
|
Object.keys(unrecognized).join('`, `') +
|
|
|
|
'`. ' +
|
|
|
|
'Did you mean to put these under `headers`?',
|
|
|
|
);
|
WebSocket API change to make room for other connection options (SSL pinning)
Summary:
This is a simple groundwork PR to allow options to be passed to the `WebSocket` constructor. It represents a minor change to an undocumented part of the API, moving `headers` to within `options`.
This will be a BC for anyone manually specifying headers other than `origin` but a) that's not a common use case with WebSockets and b) it's not documented even in code and wouldn't currently pass a flow check.
NB: The third argument to the WebSocket constructor isn't part of the W3C spec, so I think this is a good place for RN-specific named parameters, better than adding a fourth argument. `protocols` needs to stay where it is, in line with the spec.
If this goes through I'd like to build on it by adding an additional connection option for SSL certificate pinning, as already supported by the underlying `okhttp` and `RCTSRWebSocket`. It could later be expanded for various other uses.
Currently, there's no way for a `WebSocket` user to specify any connection options other than url, protocol and headers. The fact that `WebSocket` connects in its constructor means any options have to go in there.
Connect to a websocket server using iOS and Android, observe the connection headers:
1. Without specifying `origin`, the default header should be set
2. Specifying it in the old way `new WebSocket(url, protocols, { origin: 'customorigin.com' })`
3. Specifying it in the new way `new WebSocket(url, protocols, { headers: { origin: 'customorigin.com' }})`.
I've tested myself using the test app with iOS and Android.
Closes https://github.com/facebook/react-native/pull/15334
Differential Revision: D5601675
Pulled By: javache
fbshipit-source-id: 5959d03a3e1d269b2c6775f3e0cf071ff08617bf
2017-08-10 15:59:36 +03:00
|
|
|
}
|
|
|
|
|
2016-04-19 01:42:42 +03:00
|
|
|
if (!Array.isArray(protocols)) {
|
|
|
|
protocols = null;
|
|
|
|
}
|
2015-10-07 18:28:34 +03:00
|
|
|
|
2019-05-31 00:23:39 +03:00
|
|
|
this._eventEmitter = new NativeEventEmitter(NativeWebSocketModule);
|
2016-04-19 01:42:42 +03:00
|
|
|
this._socketId = nextWebSocketId++;
|
|
|
|
this._registerEvents();
|
2019-05-31 00:23:39 +03:00
|
|
|
NativeWebSocketModule.connect(url, protocols, {headers}, this._socketId);
|
2017-07-26 18:12:12 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
get binaryType(): ?BinaryType {
|
|
|
|
return this._binaryType;
|
|
|
|
}
|
|
|
|
|
|
|
|
set binaryType(binaryType: BinaryType): void {
|
|
|
|
if (binaryType !== 'blob' && binaryType !== 'arraybuffer') {
|
2018-05-11 05:06:46 +03:00
|
|
|
throw new Error("binaryType must be either 'blob' or 'arraybuffer'");
|
2017-07-26 18:12:12 +03:00
|
|
|
}
|
|
|
|
if (this._binaryType === 'blob' || binaryType === 'blob') {
|
2018-05-11 05:06:46 +03:00
|
|
|
invariant(
|
|
|
|
BlobManager.isAvailable,
|
|
|
|
'Native module BlobModule is required for blob support',
|
|
|
|
);
|
2018-01-26 20:06:14 +03:00
|
|
|
if (binaryType === 'blob') {
|
|
|
|
BlobManager.addWebSocketHandler(this._socketId);
|
|
|
|
} else {
|
|
|
|
BlobManager.removeWebSocketHandler(this._socketId);
|
2017-07-26 18:12:12 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
this._binaryType = binaryType;
|
2015-10-07 18:28:34 +03:00
|
|
|
}
|
|
|
|
|
2016-04-19 01:42:42 +03:00
|
|
|
close(code?: number, reason?: string): void {
|
2018-05-11 05:06:46 +03:00
|
|
|
if (this.readyState === this.CLOSING || this.readyState === this.CLOSED) {
|
2016-04-19 01:42:42 +03:00
|
|
|
return;
|
|
|
|
}
|
2015-10-07 18:28:34 +03:00
|
|
|
|
2016-04-19 01:42:42 +03:00
|
|
|
this.readyState = this.CLOSING;
|
|
|
|
this._close(code, reason);
|
2015-10-07 18:28:34 +03:00
|
|
|
}
|
|
|
|
|
2017-07-26 18:12:12 +03:00
|
|
|
send(data: string | ArrayBuffer | ArrayBufferView | Blob): void {
|
2016-04-19 01:42:42 +03:00
|
|
|
if (this.readyState === this.CONNECTING) {
|
|
|
|
throw new Error('INVALID_STATE_ERR');
|
|
|
|
}
|
|
|
|
|
2017-07-26 18:12:12 +03:00
|
|
|
if (data instanceof Blob) {
|
2018-05-11 05:06:46 +03:00
|
|
|
invariant(
|
|
|
|
BlobManager.isAvailable,
|
|
|
|
'Native module BlobModule is required for blob support',
|
|
|
|
);
|
2018-01-26 20:06:14 +03:00
|
|
|
BlobManager.sendOverSocket(data, this._socketId);
|
2017-07-26 18:12:12 +03:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2016-04-19 01:42:42 +03:00
|
|
|
if (typeof data === 'string') {
|
2019-05-31 00:23:39 +03:00
|
|
|
NativeWebSocketModule.send(data, this._socketId);
|
2016-04-20 18:52:22 +03:00
|
|
|
return;
|
2016-04-19 01:42:42 +03:00
|
|
|
}
|
2016-04-20 18:52:22 +03:00
|
|
|
|
2017-01-21 05:40:28 +03:00
|
|
|
if (data instanceof ArrayBuffer || ArrayBuffer.isView(data)) {
|
2019-05-31 00:23:39 +03:00
|
|
|
NativeWebSocketModule.sendBinary(binaryToBase64(data), this._socketId);
|
2016-09-08 17:28:31 +03:00
|
|
|
return;
|
2016-04-20 18:52:22 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
throw new Error('Unsupported data type');
|
2015-10-07 18:28:34 +03:00
|
|
|
}
|
|
|
|
|
2016-07-05 15:52:24 +03:00
|
|
|
ping(): void {
|
|
|
|
if (this.readyState === this.CONNECTING) {
|
2018-05-11 05:06:46 +03:00
|
|
|
throw new Error('INVALID_STATE_ERR');
|
2016-07-05 15:52:24 +03:00
|
|
|
}
|
|
|
|
|
2019-05-31 00:23:39 +03:00
|
|
|
NativeWebSocketModule.ping(this._socketId);
|
2016-07-05 15:52:24 +03:00
|
|
|
}
|
|
|
|
|
2016-04-19 01:42:42 +03:00
|
|
|
_close(code?: number, reason?: string): void {
|
2019-05-20 11:06:33 +03:00
|
|
|
// See https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent
|
|
|
|
const statusCode = typeof code === 'number' ? code : CLOSE_NORMAL;
|
|
|
|
const closeReason = typeof reason === 'string' ? reason : '';
|
2019-05-31 00:23:39 +03:00
|
|
|
NativeWebSocketModule.close(statusCode, closeReason, this._socketId);
|
2018-01-26 20:06:14 +03:00
|
|
|
|
|
|
|
if (BlobManager.isAvailable && this._binaryType === 'blob') {
|
|
|
|
BlobManager.removeWebSocketHandler(this._socketId);
|
|
|
|
}
|
2015-10-07 18:28:34 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
_unregisterEvents(): void {
|
2016-04-19 01:42:42 +03:00
|
|
|
this._subscriptions.forEach(e => e.remove());
|
|
|
|
this._subscriptions = [];
|
2015-10-07 18:28:34 +03:00
|
|
|
}
|
|
|
|
|
2016-04-19 01:42:42 +03:00
|
|
|
_registerEvents(): void {
|
|
|
|
this._subscriptions = [
|
2016-05-12 18:29:39 +03:00
|
|
|
this._eventEmitter.addListener('websocketMessage', ev => {
|
2016-04-19 01:42:42 +03:00
|
|
|
if (ev.id !== this._socketId) {
|
2015-10-07 18:28:34 +03:00
|
|
|
return;
|
|
|
|
}
|
2017-07-26 18:12:12 +03:00
|
|
|
let data = ev.data;
|
|
|
|
switch (ev.type) {
|
|
|
|
case 'binary':
|
|
|
|
data = base64.toByteArray(ev.data).buffer;
|
|
|
|
break;
|
|
|
|
case 'blob':
|
2018-01-26 20:06:14 +03:00
|
|
|
data = BlobManager.createFromOptions(ev.data);
|
2017-07-26 18:12:12 +03:00
|
|
|
break;
|
|
|
|
}
|
2018-05-11 05:06:46 +03:00
|
|
|
this.dispatchEvent(new WebSocketEvent('message', {data}));
|
2015-10-07 18:28:34 +03:00
|
|
|
}),
|
2016-05-12 18:29:39 +03:00
|
|
|
this._eventEmitter.addListener('websocketOpen', ev => {
|
2016-04-19 01:42:42 +03:00
|
|
|
if (ev.id !== this._socketId) {
|
2015-10-07 18:28:34 +03:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.readyState = this.OPEN;
|
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
2019-06-21 13:39:47 +03:00
|
|
|
this.protocol = ev.protocol;
|
2016-05-12 18:29:39 +03:00
|
|
|
this.dispatchEvent(new WebSocketEvent('open'));
|
2015-10-07 18:28:34 +03:00
|
|
|
}),
|
2016-05-12 18:29:39 +03:00
|
|
|
this._eventEmitter.addListener('websocketClosed', ev => {
|
2016-04-19 01:42:42 +03:00
|
|
|
if (ev.id !== this._socketId) {
|
2015-10-07 18:28:34 +03:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.readyState = this.CLOSED;
|
2018-05-11 05:06:46 +03:00
|
|
|
this.dispatchEvent(
|
|
|
|
new WebSocketEvent('close', {
|
|
|
|
code: ev.code,
|
|
|
|
reason: ev.reason,
|
|
|
|
}),
|
|
|
|
);
|
2015-10-07 18:28:34 +03:00
|
|
|
this._unregisterEvents();
|
2015-10-27 18:33:38 +03:00
|
|
|
this.close();
|
2015-10-07 18:28:34 +03:00
|
|
|
}),
|
2016-05-12 18:29:39 +03:00
|
|
|
this._eventEmitter.addListener('websocketFailed', ev => {
|
2016-04-19 01:42:42 +03:00
|
|
|
if (ev.id !== this._socketId) {
|
2015-10-07 18:28:34 +03:00
|
|
|
return;
|
|
|
|
}
|
2016-09-09 03:01:10 +03:00
|
|
|
this.readyState = this.CLOSED;
|
2018-05-11 05:06:46 +03:00
|
|
|
this.dispatchEvent(
|
|
|
|
new WebSocketEvent('error', {
|
|
|
|
message: ev.message,
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
this.dispatchEvent(
|
|
|
|
new WebSocketEvent('close', {
|
|
|
|
message: ev.message,
|
|
|
|
}),
|
|
|
|
);
|
2015-10-07 18:28:34 +03:00
|
|
|
this._unregisterEvents();
|
2015-10-27 18:33:38 +03:00
|
|
|
this.close();
|
2018-05-11 05:06:46 +03:00
|
|
|
}),
|
2015-10-07 18:28:34 +03:00
|
|
|
];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
module.exports = WebSocket;
|