上个月在米国找工作，遇到一家公司，给我发了一个制作在线聊天室的需求文档，说我做完后就可以面试。没有deadline，但他们会根据我的现有状况和学习速度对我评估。过了1个月，我把React，Flask和SocketIO学到手，这个项目做完了。先不管面试什么时候进行，我在这里跟大家分享一下我的整个学习历程。由于这更是我对自己这个项目对回顾，我会尽量写得比较细。如果喜欢简单直接，就去我的GitHub(https://github.com/shisaq/chat-server)看源码吧。
我的技能树
在接到这个项目之前，我在前端领域只了解过一些HTML和CSS的皮毛知识。今年4月到8月，我在Udacity(优达学城)拿到了Front-end Web Development Nanodegree(https://cn.udacity.com/course/front-end-web-developer-nanodegree–nd001)，所以技能树如下：
- HTML/CSS/JavaScript/jQuery基础知识
- Knockout/Git/Grunt日常用法
- Ajax与API日常用法
- Bootstrap/网页性能优化/HTML5游戏基础知识
除此之外，关于市面上正火的React，Angular 2.0，Vue，Webpack等好东西没有任何接触，更甭提实战经验了。所以，在我面对这个既包含React这样的前端框架，又加上Flask的后端框架的项目，第一感觉是两眼一抹黑。但是这是我唯一一个可能得到工作的机会，所以硬着头皮开始了学习+实战之旅——人都是逼出来的。
项目原型
本项目现有的原型如图所示，不过在满足基本原型的基础上，我可以对外观自由发挥。
项目逻辑
项目是从阅读需求文档开始的。我详细描述一下需求：
-
用户首次登录页面的时候，只能看到logo和顶部导航栏（没有任何聊天窗口）。该用户需要通过输入一个用户名，按回车发送后登录。我们可以假设每个用户名都是唯一的。
-
用户数据不能保存到服务器。服务器不允许拥有数据库，也不能保存任何用户数据（比如
users = []）。然而，你可以随意使用SocketIO的rooms特性。 -
客户端的用户列表需要根据所有用户的在线情况保持更新。当用户A选择用户列表中的用户B时，如果A和B的私聊窗口不存在，会打开一个针对用户A和B的私聊窗口。
-
每当一个新的私聊窗口建立时，应当出现在已打开窗口的后面；如果该行没有空间，则显示到下一行。点击
X可以关闭该窗口。 -
用户在聊天窗口底部可以输入信息，按回车发送。新信息永远在聊天记录的底部显示（当聊天记录已经满了的时候，新信息仍然可以在不手动拖动滚动条的时候，自动呈现在底部）。
-
所有聊天记录应当可以被保存。举例：
- 一个用户以“Bob”为名字注册
- Bob跟Alice聊天
- Bob离开了页面
- 回到这个页面的时候，Bob重新以“Bob”为名字注册，并点击Alice开始聊天
- Bob和Alice此时都应当能看到他们的聊天记录（这些数据同样不能保存到服务器）
第一印象
面对这样的项目需求，我的感觉是，这真的是一个很小的，仅实现了基本功能，但需求描述非常清晰但项目。面对要求的技术栈（React/Flask/SocketIO），作为一个两眼一抹黑的玩家，我很长时间不知道该从何下手。于是逃避了2天。30天中的7%就这么过去了！！！
行动
光说不做的人成不了程序猿。根据我已经掌握的知识，我判断React和Knockout一样，都是前端框架。当务之急是我要快点开始学习后端了。从后端入手，搭建好服务器，到时候哪怕我仅仅用jQuery实现了，也能有办法通过再学习React，把前端代码替换掉。至于SocketIO，应当放到后端基础知识之后学习。毕竟SocketIO是个桥梁，两岸要送货，我得先知道怎么搭建这个桥梁。于是学习路线被我定为：
Python - Flask - SocketIO - React
这篇文章是个引子，从下一篇文章开始，我会详细分享技术细节，我遇到的困难及解决办法。我会保持每天一更的频率，把这个系列写完。
