CNode

使用 KOA + Socket.io + React 编写的全栈web聊天应用

分享
Yyinxin630发布于10 年前最后回复10 年前18 回复14888 浏览0 收藏

在线地址: 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)

Y
yinxin630#1·10 年前
引用 yakczh多台服务器 组成一个逻辑聊天室,怎么搞?

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

Y
yinxin630#2·10 年前

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

X
XingHaoxiang#3·10 年前

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

S
StudentWan#4·10 年前

很棒~~~

Y
yinxin630#6·10 年前
引用 StudentWan很棒

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

M
minuowa523#7·10 年前

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

Y
yakczh#8·10 年前

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

S
singcl#9·10 年前

看看 From Noder

Y
yinxin630#10·10 年前

欢迎体验~ 指点~

Y
yinxin630#11·10 年前

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

Y
yinxin630#12·10 年前

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

O
Ocean1509#13·10 年前

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

M
MirrorWang#14·10 年前

mark

D
dukegod#15·10 年前

mark From Noder

Y
yinxin630#16·10 年前
引用 minuowa523我想问一下楼主,那个sever/route 文件夹下的 接口怎么在浏览器调用,像这个

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

参与回复
登录后即可参与回复。登录