> For the complete documentation index, see [llms.txt](https://doc.fxwebapi.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.fxwebapi.com/real-time-streaming/real-time-quotes.md).

# Real Time Quotes

{% hint style="success" %}
It is possible to customize this service during the project without additional costs (ex. add websocket fallback protocols). Below you can find simple example that will allow you to quickly understand concept behind FXWebAPI.
{% endhint %}

For architecture overview check:

{% content-ref url="/pages/-Lqax-601F6hkPBXJwVK" %}
[Oauth2 streaming workflow](/real-time-streaming/aoauth2.md)
{% endcontent-ref %}

## Step 1: Connect to websocket

Websocket URL is different for each sandbox environment. 

{% hint style="info" %}
Please do not use below server for any other purpose than initial phase. Below service does not contain any security rules and is created just to the purpose of this web-page. Please request your own sandbox environment via email to: [techsupport@fxwebapi.com](mailto:%20techsupport@fxwebapi.com)
{% endhint %}

To connect client needs a Key from Auth Server. Before Real-time delivery of FX rates FXWebAPI will validate this key with Auth Server.

Key is passed inside of "key" parameter in websocket URL

```javascript
var uri = 'wss://demo.fxcib.com/api/WebSocket/Getees?key=123123123';
websocket = new WebSocket(uri);

websocket.onopen = function () {
    console.log("Connected");
    event.preventDefault();
}

```

After successful Oauth2 authentication user can subscribe to receive real time FX rates

## Step 2: Subscribe in Streaming mode

To subscribe for particular currency pair, please send following message:

```javascript
{ 
   "messageType":2,
   "pair":"EUR/USD"
}
```

{% hint style="success" %}
This service can also support streams based on amount (not presented in this documentation)
{% endhint %}

To fully understand this service your you can use our debugging console: <http://websocket.fxcib.com/>

You can also check our very simple HTML demo: <http://webstream.fxcib.com/>

![Simple HTML demo](https://4042115498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqajCaFdk0suI0l0dSe%2F-LrAKsgJoZiucznN4qfj%2F-LrAOxsCz3S1m35dxZGe%2Fpair%20example.png?alt=media\&token=f237c707-e757-41de-b9a4-e5e50ce72bd9)

{% hint style="success" %}
We can provide custom look and feel development in Bootstrap, Angularjs, React and React Native based on you Mockups. Please send email to [techsupport@fxwebapi.com](mailto:%20techsupport@fxwebapi.com) with your requirements.
{% endhint %}

{% hint style="warning" %}
You can also check connect and subscribe workflow in JSFiddle.&#x20;

Please Press "Result" below to see incoming messages in JSFiddle debugging console:
{% endhint %}

{% embed url="<https://jsfiddle.net/z9rvme3c/16/>" %}

## Step 3: Subscribe in Request For Stream mode

JSON Message example:

```javascript
{ 
   "messageType":1, 
   "pair":"EUR/USD", 
   "side":1,
   "amount":"2",
   "action":"1",
   "SettlementDate":"0c5b6754-492b-443b-9c45-b294ae0f8850"
}
```

`OPTIONS` `wss://demo.fxcib.com/api/WebSocket/Getees?key=123123123/`

#### Request Body

| Name           | Type   | Description                                                                              |
| -------------- | ------ | ---------------------------------------------------------------------------------------- |
| messageType    | string | For RFS always 1                                                                         |
| pair           | string | Currency Pair                                                                            |
| side           | number | 1 = Buy, 2 = Sell                                                                        |
| amount         | string | trade amount                                                                             |
| action         | string | For RFS always 1                                                                         |
| SettlementDate | object | <p>SettlementDate in ddmmyyyy format <br>ex. 21072022 would be 21st of July 2022<br></p> |

{% tabs %}
{% tab title="200 " %}

```
```

{% endtab %}
{% endtabs %}