{"id":13941603,"url":"https://github.com/veaba/ncov","last_synced_at":"2025-07-20T04:32:17.388Z","repository":{"id":37060403,"uuid":"235004316","full_name":"veaba/ncov","owner":"veaba","description":"【在开发2.x版本，暂时关闭站点！新版大屏beta 版本，全实时数据，交互式大屏，精确到城市级，弹幕来袭】关注2019新型冠状病毒（2019-nCoV），数据可视化感染人群热点图、迁徙扩散轨迹，以提供帮助分析疫情。 愿世界安好。Focus on Wuhan 2019-nCoV, data visualization, to help analyze the epidemic situation.  May the world be well.","archived":true,"fork":false,"pushed_at":"2022-12-11T15:54:26.000Z","size":5224,"stargazers_count":253,"open_issues_count":16,"forks_count":43,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-08-09T02:16:03.489Z","etag":null,"topics":["2019-ncov","data-visualization","first-covid-19-repo","ncov","ncov-data-visual"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/veaba.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-20T02:34:54.000Z","updated_at":"2024-06-03T18:16:17.000Z","dependencies_parsed_at":"2023-01-27T02:31:09.015Z","dependency_job_id":null,"html_url":"https://github.com/veaba/ncov","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/veaba%2Fncov","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/veaba%2Fncov/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/veaba%2Fncov/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/veaba%2Fncov/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/veaba","download_url":"https://codeload.github.com/veaba/ncov/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226733209,"owners_count":17673163,"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":["2019-ncov","data-visualization","first-covid-19-repo","ncov","ncov-data-visual"],"created_at":"2024-08-08T02:01:22.280Z","updated_at":"2024-11-27T10:31:12.836Z","avatar_url":"https://github.com/veaba.png","language":"TypeScript","readme":"# ncov\nFocus on Wuhan 2019-nCoV, data visualization, to help analyze the epidemic situation.  May the world be well. 关注新型肺炎，数据可视化，以提供帮助分析疫情。 愿世界安好。\n\n\n\n\u003e 声明：本库旨在分析有关nCvo官方提供的地点、人数、等医学数据进行分析可视化数据。同时个人也希望能够相关工作提供一丢丢儿分析帮助，如果觉得该仓库帮倒忙，请联系作者删除仓库。并为未来可能引发不好的事件致歉。by @veaba 2020年1月20日10:42:30\n\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"http://2020-ncov.datav.ai\"\u003e2020-nCov感染可视化，不再维护\u003c/a\u003e |   \n \u003cstrong\u003e\n  \u003ca href=\"http://2019-ncov.datav.ai\"\u003e2019-nCov弹幕支持，新版可视化(全实时通信)\u003c/a\u003e\n \u003c/strong\u003e\n\u003cp\u003e\n\n![](client/public/new-screen.png)\n\n\n\n\n## 技术栈架构\n\n原本是想做一个疫情行为分析的项目，一边学习TensorFlow去分析的，但现在看起来，实用性不大，太小学生了。\n\n昨天认真想了一夜，这个项目对于疫情实在没什么帮助，于是重新定位这个仓库用途：一个关于疫情可视化分析全栈式学习项目。\n\n不管你在IT领域从事何种工作，不管是在读学生还是对开源web技术有兴趣的人群，都可以从这个项目中或多或少有一些小帮助。\n\n代码可能有些粗劣，但这是一个web全栈技术的体现，涉及到实时通信，前后端分离，可视化大屏，容器化，消息队列，OAuth、python、kafka、爬虫等。\n\n性能上不会考虑太多问题，只是根据业务角度来做选型实现，所有方案都非常的初级，甚至可能被抛弃。\n\n里面的技术方案基本都是平常积累的应用，如果有匹配度高的场景，好好改造下代码，应该也可以适用于小规模的业务使用。\n\n鉴于此，我下面详细描述下这个仓库技术方案。\n\n\n\n### 前端: client目录\n\n#### vue3\n\n本仓库前端使用Vue-next(即Vue3), 提前走进vue 3的 实战项目\n- 注意：不要刷新页面，本页面与后端交互是通过socket.io，刷新页面即认为重新登录，需要重新走授权流程\n- [vue-next](https://github.com/vuejs/vue-next)， 尚未正式发布还是alpha阶段vue\n- vue3提供了一些新写法，但由于麻烦还是换回了vue2的方法\n- 前端项目是改造 [vue-next-webpack-preview](https://github.com/vuejs/vue-next-webpack-preview)\n- alpha3-\u003ealpha4时候，源码改造了一个非常基础实例化入参方式（详见/client/main.js），于是页面挂了。\n    - 在正式上线时候，一定一定要写死package的版本引用。如果不清楚的话，这排查起来非常费劲。[反面教材](https://github.com/vuejs/vue-next/issues/664)\n    - 比如 href 不能在 '\u0026'字符，见[vuejs/vue-next \"\u0026\" is not allowed in attribute values](https://github.com/vuejs/vue-next/issues/663)，现已修复，可能要等到下个版本\n    \n- 手动实现`vue`数字滚动，[示例](https://2019-ncov.datav.ai/)\n    - 得益于vue中能够watch对象变化，所以就很好实现。当新数字过来的时候，需要滚动\n    - 由于vue 3的未成熟，导致了很多插件、特效都需要自己手动模拟出来，当然也是一个学习的过程\n    - 这里的关键点的是，首次要先全部出来，后面的数字watch然后定时++到新的对象上去\n\n- 手动实现`vue`弹幕效果\n    - 参考了现有弹幕网站的效果实现。\n    - 不足：颜色变化、高度等\n    - [KagurazakaHanabi](https://github.com/veaba/ncov/issues/6#issuecomment-583697395) 说有弹幕库，有兴趣可以调用它玩玩。[弹幕库:CommentCoreLibrary](https://github.com/jabbany/CommentCoreLibrary)\n\n#### ECharts\n- [ECharts官网](https://www.echartsjs.com/zh/index.html)， 国内比较主流的可视化库\n- 不足：可以定制化图表类型，现在的全量加载\n    \n####  webpack\n- [webpack官网](https://www.webpackjs.com/)\n- 自己学吧，无能为力，不懂就搜\n\n####  socket.io\n- `websocket` 领域比较完善的库\n- 说起来很巧，半年以前自己翻译了一波[socket.io的中文文档](https://github.com/veaba/socket.io-docs)\n- [官网](https://socket.io/)\n- 技术要点\n    - room如何使用\n    - 如何指定人发送消息\n    - 如何emit发送消息\n    - 如何on接收消息\n- 不足：\n    - 不知为何，有时候前端emit后，到达后端的过程会很慢，甚至不可达\n    - 带宽很费劲\n- 思考：如何考虑一连接进来就推送历史的弹幕？\n- websocket是要附加在HTTP服务上的，大多数情况下，和前端的web服务是要独立开来，所以问题是：\n    - [nginx 配置转发socket.io](https://socket.io/docs/using-multiple-nodes/#NginX-configuration)\n    - 记录实时在线人数：在[这个页面](https://2019-ncov.datav.ai/) 有个在线人数统计功能，这个是实时的，连接、退出都会被记录\n- socket.io 通用事件的调用\n\n### 后端：servers目录\n\n#### python 爬虫\n- 基于selenium 实现爬虫抓取\n- linux上和windows差异性需要注意下\n- 不足：现在这个项目，自己改了个镜像但跑的不好，暂停了\n- 从前端视角去看python的执行机制就感觉被秀逗了，非常难受\n- 之前是想用python 做web服务了。个人能力有限，跑不动，到底还是node比较舒服\n- 可以搭配kafka\n- 也可以搭配mongo做一些录入，但注意，数据格式的转化挺头疼的事情\n- todo TensorFlow\n    \n#### mongodb 数据库\n- 对于前端来说node+mongodb简直神器组合\n- node 端使用mongoose类库，和mongodb使用\n- 舒服的格式转换个js天生支持json和mongodb支持js对象就很让人安心\n- 不足：当然查询量1w以上时候，需要注意性能问题了，10s才完成\n    - 没优化好，当然可能是查询的语句不够好\n- 主要安全问题\n    - 如授权，需要设置密码\n    - 端口的暴露也需要看一下限制白名单\n#### redis \n- [redis官网](https://redis.io/)\n- [node-redis](http://redis.js.org/)\n- 主要用来存储一些即时的数据，如token，在线状态\n- 注意对要内存要求高\n    \n#### kafka 消息队列\n- [kafka官网](http://kafka.apache.org/)\n- kafka给我的体验不太好\n- 我要在这里实名举报这几个类库：\n    - [kafka-node](https://github.com/SOHU-Co/kafka-node)\n        - 文档写的什么玩意？？？\n        - 使用起来各种问题，API设计成什么样？\n        - 据说sohu的库\n        - 实在是被搞的炸毛，吐槽一波，舒服\n    - [node-kafka](https://www.npmjs.com/package/node-kafka)\n        - 不予置评\n    - [kafkajs](https://github.com/tulios/kafkajs)\n        - 不搭个kafka集群还用不了，是不？\n        - 这个项目在用\n- kafka贼慢，导致发送代码过一会才出来\n    - 用户发送弹幕，生产者写入\n    - 取出来是从消费者读出来的\n    - 不足：这两种的时间差导致有些慢\n    \n#### node \n主要给页面提供转接内容和socket通信\n- 使用TypeScript书写\n- pm2容器化运行\n\n### 服务器\ndocker需要运行，建议4G以上，kafka是java的吧？据说java不都是4G起步？\n- 建立docker网络，指定内网ip\n- 设置白名单端口\n- 放行策略\n- 敏感组件关闭开发给公网\n\n### OAuth 走的是Github的授权\n- 仅注册使用，相关内容见 [OAuth](https://developer.github.com/v3/oauth/)\n- 你也可以[取消授权](https://github.com/settings/installations)）\n\n### 可持续继承、运维、容器化\n\n- docker\n    - [docker官网](https://www.docker.com/)\n- docker-compose\n    - web服务使用docker-compose编排\n    - 此前个人用的 [learn-docker-compose](https://github.com/veaba/learn-docker-compose), 很多部分笔记没有放出来\n- gh-pages. 为了灵活化配合nginx代理，已不用gh-pages了，但此前的配置可以参考 [配合Actions生成ph-pages](https://github.com/veaba/ncov/blob/master/.github/workflows/deploy.yml)\n- Github Actions. 自己写部署的脚本 [build.sh](https://github.com/veaba/ncov/blob/master/scripts/deploy-client.sh)\n- 拓展：k8s(Kubernetes)\n\n### CDN\n\n现在是调用CDN，但为了保险建议还是存一份本地库在服务器上，以免CDN炸机，\n\n- 个人使用的小网站，可以走cloudflare，但要处理，第一次生效和取消，都有一段时间的空档期，升级时，避免高峰期访问\n- 云服务器厂商的服务，收费，贵\n\n\n### shell\n- 灵活化自己的部署，需要写一些shell脚本 [build.sh](https://github.com/veaba/ncov/blob/master/scripts/deploy-client.sh)\n- 从之前的项目迁移过来 [vuepress-actions](https://github.com/veaba/vuepress-actions)\n\n### nginx\n- 这个仓库没放出nginx.conf，但需要知道怎么配置\n- 前后端分离项目，一般需要nginx做反向代理一些API等\n\n### 内容：\n- 通信全走实时通信socket.io \n- 全世界RANK\n- 中国省份RANK\n- 疫情饼图\n- 统计数据有更新会自动滚动\n- 地图数据全部是实时\n- 内容更新1-3分钟不等\n- 弹幕系统\n- 数据：大屏API走的腾讯新闻的接口\n\n### 教训、心得\n- 上线部署的时候，真的非常小心了。由于本地配置和线上配置还是有些差异的\n- 注意安全性问题\n- 还是极致比较好些吧\n- 权当一次技术学习\n\n\n## 贡献/Contribute\n[贡献/Contributor](https://github.com/veaba/ncov/graphs/contributors)\n\n## 关于\n\n### 为什么会有本站？\n\n- 提供可视化分析，一次个人技术栈练习\n- 基于Vue+ECharts 实现，具体见 [开发文档](dev.md)\n- 同时本仓库暂不提供API，但可以直接对接socket.io 进行通信，目前并未设置权限\n\n### 关于本人\n目前职业是前端，主要从事vue项目的ctrl+c、ctrl+v\n\n\n### 其他疫情项目\n鉴于本仓库的局限性，可能适合个人用来学习练手的全栈式项目，我个人认为这个项目对实际帮助疫情的可能性不大，所以推荐下其他疫情的项目，免得大家迷路。\n\n- [wuhan2020](https://github.com/wuhan2020/wuhan2020) 新型冠状病毒防疫信息收集平台，多人协作，可以派得上用场的项目\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fveaba%2Fncov","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fveaba%2Fncov","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fveaba%2Fncov/lists"}