pc端聊天室react+socket.io+webpack+redux+koa+antd技术站
发布于 2 个月前 作者 pengliheng 1277 次浏览 最后一次编辑是 1 个月前 来自 分享
项目地址:https://chat1.pipk.top
我的博客:https://blog1.pipk.top
新增Emoji表情,发送图片。添加人物头像功能。划到顶部加载更多功能,推荐PM2用于管理nodejs进程,好吧,由于我用node开启nodejs代码,居然不会自动退出服务器,这让我很蛋疼,每次都要再进程管理器里面kill掉。
添加代码写入功能,可以在里面发代码。。为了方便我没做按钮 Ctrl+Enter一键发送代码。。
使用socket管理post和fetch,不再用koa的后台接口,
采用https,免费证书//其实就是加了一把🔒

项目目录结构

mulu.png

主界面

`.png

主要功能介绍:

1.自动登陆,前台登陆/注册,后台自动生成cookie,前台储存,以后每次登陆自动post token到后端自动拿去对比,存在即返回自动登陆状态码,,,

2.在线用户数量显示,在线用户全部储存在后台users里面:即储存在后台内存里面,每次有新用户登陆,后台socket.emit绑定自动将users数组全部利用socket.io发送给前台

3.增加房间分割功能,各个房间聊天内容相互独立,互不干扰。。

4.mongodb 数据储存,用户登陆利用

5.react-router-dom管理前台路由跳转。<Redirect to="/chat"/>管理自动跳转不像link那样需要点击触发跳转

6.mobx对前台state进行状态管理,mobx比redux简单使用,

7.好吧,将preact 替换 react,减小了100kb+ 的体积

123.png 以及

entry: {
	'app': [
		'./src/client/index.jsx'
    ],
	vender:[
		'react','redux','react-redux','react-router',
	]
}

将代码分开打包加快前端资源加载速度

8.全程由socket.io管理前后台对接+koa-static管理静态资源

9.j’wt-simple将token加密然后发送到前台进行cookies储存。

有待改进的点:

1. 使用七牛cdn加速,及其图床功能进行资源优化加速,7牛的

2. 完善人物头像上传功能,修复https遗留bug

3. 完善代码编辑框自动编写功能,

4. 完善视频聊天功能,

github地址:https://gitlab.com/pengliheng/chatroom

15 回复

如何加速资源加载速度啊

代码体积过大不是用preact替代的理由吧, 应该先分析包内容做 tree shakeing, 初始不需要的内容用webpack做按需加载

@yinxin630 厉害了老大。我完全照抄你的那个

cdn用7牛云??阿里云送了我个免费cdn。。但是这几天手机摔破了屏幕。完全无法依靠支付宝账号登陆阿里云了。。。

markdown看得好尴尬。感觉页面看起来不太美观啊

@pengliheng cdn能用的就行, 我用的是七牛, 流量不高, 一个月不到一毛钱.

我也想弄七牛,但是镜像存储https貌似不行。。。

崩溃中。。react如何做一个当新消息引入,滚动到最低部的应用

在socket的emit 里加入redux的action~ 应该就能把socket的信息加入redux的管理 不知道你是不是这个意思 我自己就这么写的

@rover5056 😰。确实不懂。。这个项目我已经放弃用redux管理socket的数据内容了。。。回去补补redux基本知识,下个练习项目在从头研究redux状态管理

回到顶部