7zf001 / chatup-app

react + redux + socket.io 招聘实时聊天应用

Chatup -- 招聘聊天应用

线上测试 user: test pwd: test

技术栈

• react 构建前端页面架构
• antd-mobile 蚂蚁金服的UI库
• es6 服务端与客户端皆用es6语法，本地环境使用babel-node解析
• babel 将代码转换es5
• react-router4 路由管理
• redux 实现组件之间的状态管理
  • redux-thunk 提供redux异步操作
• react-redux 连接react与redux，让redux使用起来跟方便。
• axios 基于 Promise 的 http 库
• express 服务端
• cookie-parser 操作cookit
• socket.io 实现实时聊天功能
• webpack 打包工具
• pm2 使用ecosystem一键部署环境
• nginx 反向代理
• mongodb 非关系型数据库

实现功能

• 在线聊天
• 浏览Boss/genius用户列表
• 实时在线人数
• 添加好友
• ......

应用图片

开发阶段

使用 create-create-app 初始应用，运行 npm run eject 将配置等文件获取到。

在 window 下安装 mongodb，并将mongodb的文件夹路径放入环境变量中，我使用的命令行工具是cmder， 在命令行中输入mongo即可，详情安装可看mongodb安装

开始写我们的业务代码，我将项目路径规划成

.
+-- config
+-- public
+-- scripts
+-- server
+-- src
|  +-- components 页面组件
|  +-- container 页面容器
|  +-- iconfont antd 字体
|  +-- store redux状态管理
|  +-- app.js 主组件
|  +-- config.js axios配置
|  +-- index.js 
|  +-- util.js 工具库
+-- .babelrc
+-- .gitgnore
+-- cmrh.conf.js 服务端渲染加载css hook
+-- package.json
+-- README.md

引入antd-mobile，并且实现按需加载 使用 babel-plugin-import（推荐）

部署项目

在部署项目这块使用了pm2来管理我们的node应用，并且使用ecosystem实现一键部署。

在服务器渲染这块花了挺长的时间，最后用了babel-node来进行服务端代码的转码工作，但是官方是不推荐这样做的，后续会思考怎么做会更加好。

使用nginx进行反向代理，将默认80端口指向了node项目端口，然后node服务端添加中间件进行路由拦截，并且用了React16的新方法renderToNodeStream直接渲染到节点流，渲染到流可以减少你的内容的第一个字节（TTFB）的时间，在文档的下一部分生成之前，将文档的开头至结尾发送到浏览器。 当内容从服务器流式传输时，浏览器将开始解析HTML文档。

客户端使用注水(hydrate)操作。