{"id":25697665,"url":"https://github.com/yuanwu0000/cryptoexchange","last_synced_at":"2025-07-09T01:33:55.389Z","repository":{"id":219687378,"uuid":"749637786","full_name":"YuAnWu0000/cryptoExchange","owner":"YuAnWu0000","description":"即時更新的加密貨幣訂單簿 \u0026 K線圖，支援切換不同時框。 (Vue3 + Pinia + WebSocket)","archived":false,"fork":false,"pushed_at":"2025-02-19T01:46:33.000Z","size":577,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-25T02:35:19.689Z","etag":null,"topics":["pinia","vue3","websocket"],"latest_commit_sha":null,"homepage":"https://yuanwu0000.github.io/cryptoExchange/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/YuAnWu0000.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-29T04:52:10.000Z","updated_at":"2025-02-19T01:53:27.000Z","dependencies_parsed_at":"2024-11-14T03:22:17.571Z","dependency_job_id":"c4be677b-8310-402d-ac84-47ad97f927d7","html_url":"https://github.com/YuAnWu0000/cryptoExchange","commit_stats":null,"previous_names":["yuanwu0000/cryptoexchange"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/YuAnWu0000/cryptoExchange","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YuAnWu0000%2FcryptoExchange","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YuAnWu0000%2FcryptoExchange/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YuAnWu0000%2FcryptoExchange/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YuAnWu0000%2FcryptoExchange/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YuAnWu0000","download_url":"https://codeload.github.com/YuAnWu0000/cryptoExchange/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YuAnWu0000%2FcryptoExchange/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264375632,"owners_count":23598422,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["pinia","vue3","websocket"],"created_at":"2025-02-25T02:30:10.947Z","updated_at":"2025-07-09T01:33:55.357Z","avatar_url":"https://github.com/YuAnWu0000.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Crypto Exchange\n\n### Implement real-time order book and candlestick charts like a crypto exchange.\n\n#### https://yuanwu0000.github.io/cryptoExchange/\n\n[![Demo video](https://img.youtube.com/vi/Z-fJEUXQLNs/0.jpg)](https://www.youtube.com/watch?v=Z-fJEUXQLNs)\n\n## Tech Stack\n\n**Frontend Framework:** `vue 3`\u003cbr\u003e\n\n**CSS Preprocessor:** `scss`\u003cbr\u003e\n\n**UI Library:** `lightweight-charts`\u003cbr\u003e\n\n**State Management:** `pinia`\u003cbr\u003e\n\n**Build Tool:** `vite`\u003cbr\u003e\n\n**WebSocket API source:** [Crypto.com](https://exchange-docs.crypto.com/exchange/v1/rest-ws/index.html#book-instrument_name)\n\n## Directory Structure\n\n```\n├── src\n|    │ App.vue\n|    │ main.js\n|    │\n|    ├─assets\n|    │   logo.svg\n|    │   main.css\n|    │\n|    ├─components\n|    │   Candles.vue\n|    │   OrderBook.vue\n|    │\n|    ├─stores\n|    │   candles.js\n|    │   orderBook.js\n|    │   ws.js\n```\n\n## WebSocket Flow Chart\n\n```mermaid\nsequenceDiagram\n  actor User\n  participant Web Client\n  participant Crypto.com\n  User -\u003e\u003e+ Web Client: Enter page\n  Web Client -\u003e\u003e+ Crypto.com: Establish websocket connection\n  opt socket.onopen = () =\u003e {}\n  Web Client-\u003e\u003e+ Crypto.com: Send message { id: 1, method: 'subscribe', params: { channels: ['book.BTCUSD-PERP.10'] } }\n  Web Client-\u003e\u003e+ Crypto.com: Send message { id: 2, method: 'subscribe', params: { channels: ['candlestick.1m.BTCUSD-PERP'] } }\n  end\n  opt socket.onmessage = () =\u003e {}\n  Crypto.com-\u003e\u003e+ Web Client: Send message { code, id, method, channel?, result?}\n  Note over Web Client: Check if code = 0 (success)\n  Web Client-\u003e\u003e+ Web Client: Proceed\n  Note over Web Client: Check if method = 'public/heartbeat'\n  Web Client-\u003e\u003e+ Crypto.com: Send message { id, method: 'public/respond-heartbeat' }\n  Note over Web Client: Check if id = -1 (updated) and result != null\n  Web Client-\u003e\u003e+ Web Client: Assign result.data to different stores (base on channel)\n  Web Client-\u003e\u003e+ User: Re-render component\n  end\n  opt socket.onclose = () =\u003e {}\n  Web Client-\u003e\u003e+ Crypto.com: Reconnect websocket\n  end\n  opt Switch Timeframe\n  User-\u003e\u003e+ Web Client: Click timeframe option\n  Web Client-\u003e\u003e+ Crypto.com: Send message { id: 2, method: 'unsubscribe', params: { channels: ['candlestick.1m.BTCUSD-PERP'] } }\n  Web Client-\u003e\u003e+ Crypto.com: Send message { id: 2, method: 'subscribe', params: { channels: ['candlestick.5m.BTCUSD-PERP'] } }\n  Web Client-\u003e\u003e+ User: Re-render component\n  end\n```\n\n## Commands\n\n### Install Dependencies\n\n```sh\nnpm install\n```\n\n### Compile and Hot-Reload for Development\n\n```sh\nnpm run dev\n```\n\n### Lint with [ESLint](https://eslint.org/)\n\n```sh\nnpm run lint\n```\n\n### Compile and Minify for Production\n\n```sh\nnpm run build\n```\n\n### Deploy to Github Page\n\n```sh\nnpm run deploy\n```\n\n### Serve dist locally\n\n```sh\nnpm install -g serve\n```\n\n```sh\nserve -s dist\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuanwu0000%2Fcryptoexchange","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyuanwu0000%2Fcryptoexchange","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuanwu0000%2Fcryptoexchange/lists"}