使用 KOA + Socket.io + React 编写的全栈web聊天应用
发布于 7 年前 作者 yinxin630 13047 次浏览 来自 分享

在线地址: 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贡献代码

17 回复

多台服务器 组成一个逻辑聊天室,怎么搞?

@yakczh 可以搞一个负载均衡处理,分发任务到各个单独服务器,没实践过。

欢迎体验~ 指点~

更新版本(v1.0.19): 添加退出群组功能, 添加修改个人信息功能, 更新消息过滤规则.

更新版本(v1.0.21), 修复bug, 规范化第三方消息实现接口, 修改炸弹效果.

很棒,mark!最近也在写聊天室。刚好可以参考了。

更新v1.1.4版本, 新增精灵球捕捉对方功能, capture指令

我想问一下楼主 express koa 这些模块 是不是相当于封装了http模块了呀?

@StudentWan 谢谢~~ (。・∀・)ノ゙

我想问一下楼主,那个sever/route 文件夹下的 接口怎么在浏览器调用,像这个 untitled2.png

@minuowa523 你可以使用任意的socket.io-client调用, 首先与后端建立连接, 然后 socket.emit('message', { method: 'get', path: 'user', data: { }, callback } 即可, 其中callback是可选, 用于接收调用结果.

@minuowa523 详细内容可以在聊天室交流哦.

回到顶部