Implement real-time order book and candlestick charts like a crypto exchange (integrate crypto.com API by using websocket.)
See Crypto.com API doc here.
sequenceDiagram
actor User
participant Web Client
participant Crypto.com
User ->>+ Web Client: Enter page
Web Client ->>+ Crypto.com: Establish websocket connection
opt socket.onopen = () => {}
Web Client->>+ Crypto.com: Send message { id: 1, method: 'subscribe', params: { channels: ['book.BTCUSD-PERP.10'] } }
Web Client->>+ Crypto.com: Send message { id: 2, method: 'subscribe', params: { channels: ['candlestick.1m.BTCUSD-PERP'] } }
end
opt socket.onmessage = () => {}
Crypto.com->>+ Web Client: Send message { code, id, method, channel?, result?}
Note over Web Client: Check if code = 0 (success)
Web Client->>+ Web Client: Proceed
Note over Web Client: Check if method = 'public/heartbeat'
Web Client->>+ Crypto.com: Send message { id, method: 'public/respond-heartbeat' }
Note over Web Client: Check if id = -1 (updated) and result != null
Web Client->>+ Web Client: Assign result.data to different stores (base on channel)
Web Client->>+ User: Re-render component
end
opt socket.onclose = () => {}
Web Client->>+ Crypto.com: Reconnect websocket
end
opt Switch Timeframe
User->>+ Web Client: Click timeframe option
Web Client->>+ Crypto.com: Send message { id: 2, method: 'unsubscribe', params: { channels: ['candlestick.1m.BTCUSD-PERP'] } }
Web Client->>+ Crypto.com: Send message { id: 2, method: 'subscribe', params: { channels: ['candlestick.5m.BTCUSD-PERP'] } }
Web Client->>+ User: Re-render component
end
yarn
yarn dev
Lint with ESLint
yarn lint
yarn build
npm install -g serve
serve -s dist