使用 KOA + Socket.io + React 编写的全栈web聊天应用
在线地址: http://fiora.suisuijiang.com/ 源码地址: https://github.com/yinxin630/fiora
技术栈
后端使用 koa 提供一个简易的 http 服务器, 并将所有路由定位到入口 index.html 处理. 使用 socket.io 前后端通讯, 后端 API 采用类似 Restful 风格的接口, 数据库是 MongoDB, 使用 bluebird 和 generator 处理异步, 用户认证采用 jwt token 的方式.
前端基于 react 框架, 资源大部分在 cdn 上(背景图打包进了 js 里), 使用 immutable 和 redux 处理数据, react-router 提供路由, 未使用第三方 UI 库, 页面样式均使用 sass 编写.
功能:
- 创建用户, 创建群组, 加入群组, 私聊, 群聊
- 文本, 图片, 代码, url 等多种类型消息, 还有炸弹 /系统消息 / 翔 / 精灵球等多种恶搞消息
- 消息桌面通知, 声音提醒, 通知开关
- 用户信息修改, 头像修改, 表情收藏, 群公告修改
- 消息内容过滤, 消息长度限制, 消息发送频率限制
- 提供第三方消息的实现接口, 使用中间件系统修改原消息体, 针对消息体自定义渲染逻辑, 恶搞消息即依此实现
致谢
推荐这个基于jq的图片爆炸效果工具, boom和capture的恶搞消息均基于本工具实现. jquery-image-explode 感谢@blackmiaool为fiora贡献代码