使用 KOA + Socket.io + React 编写的全栈web聊天应用
发布于 9 年前 作者 yinxin630 14538 次预览 最后一次回复是 9 年前 来自 分享
在线地址: 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贡献代码
18 回复
多台服务器 组成一个逻辑聊天室,怎么搞?
看看 From Noder
@yakczh 可以搞一个负载均衡处理,分发任务到各个单独服务器,没实践过。
欢迎体验~ 指点~
更新版本(v1.0.19): 添加退出群组功能, 添加修改个人信息功能, 更新消息过滤规则.
更新版本(v1.0.21), 修复bug, 规范化第三方消息实现接口, 修改炸弹效果.
很棒,mark!最近也在写聊天室。刚好可以参考了。
mark
更新v1.1.4版本, 新增精灵球捕捉对方功能, capture指令
mark From Noder
我想问一下楼主 express koa 这些模块 是不是相当于封装了http模块了呀?
很棒~~~
@XingHaoxiang 对的.
@StudentWan 谢谢~~ (。・∀・)ノ゙
我想问一下楼主,那个sever/route 文件夹下的 接口怎么在浏览器调用,像这个
@minuowa523 你可以使用任意的socket.io-client调用, 首先与后端建立连接, 然后
socket.emit('message', { method: 'get', path: 'user', data: { }, callback }即可, 其中callback是可选, 用于接收调用结果.@minuowa523 详细内容可以在聊天室交流哦.