pc端聊天室react+socket.io+webpack+redux+koa+antd技术站
发布于 14 天前 作者 pengliheng 943 次浏览 最后一次编辑是 3 天前 来自 分享
项目地址:http://112.74.63.84/chat http://www.pipk.com,备案审核中…。
我只是听说nginx是最快的服务器,所以我也稍稍配置了一下nginx反向代理,用80端口反向代理8080端口
开始兼容移动端。。新增Emoji表情,发送图片。添加人物头像功能。划到顶部加载更多功能,修复头像不统一的bug,总之就是改了一下数据结构,另外推荐PM2,这货兼容linux以及window的git,无论是线上调试还是线下,这货都很棒!尤其是在线下windows调试的时候,pm2可以实现无重启更新nodejs,前端调试有webpack-dev-server,后端调试有PM2,实现了全端,不必刷新重启的情况下,自动更新页面内容。极大加强了全端工程师们的调试代码速度!~~赞!
好吧,七牛云我实在看不懂他官方说明(好像根本没说明~),我直接拿ovzwaei80.bkt.clouddn.com这试用地址加在app.js的前头。mmp加载速度提高一倍不止。。
添加代码写入功能,可以在里面发代码。。为了方便我没做按钮 Ctrl+Enter一键发送代码。。
修改了一下数据结构,不再用/list这个结构,采用sockey.io为刚进入页面的发送历史聊天记录,如果修改人物头像,全部历史消息最新消息人物头像都会改变。。。

项目目录结构

mulu.png

主界面

.png `.png

主要功能介绍:

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

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

3.antd,界面设计,利用了antd的layout 布局,Row,Col。。

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

router.get(’/list’,async ctx => { ctx.body = await Chat.find({}) }), 异步查找,一旦存在用户,进行密码匹配判断,通过即可登陆, 用户注册,利用 router.post(’/register’,async (ctx,next) => new Promise((resolve, reject) => { let postData = ctx.request.body const token = jwt.encode({ userName: postData.userName } , ‘jwt’); Login .find({userName: postData.userName}) .exec(function(err,db){ if(db.length==1){ //如果能查找到,用户名被注册了 ctx.body = {info:‘userName has been used’,message:‘该用户名已注册了’,code:1} resolve() }else{ //用户名未被注册 var signUp = new Login({ userName: postData.userName, passWord: postData.passWord }); signUp.save(function(err) {}); islogin.push(token) ctx.body = {info:‘signUp successed’,message:‘注册成功’,token:token,code:0,userName:postData.userName} resolve() } }) })) 先查找数据库是否存在相同用户名,然后将数据储存在数据库里面,返回登陆成功且自动跳转到聊天界面的状态码。。

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

6.redux对前台state进行状态管理,好吧,我还不知道怎么把socket的信息也写入redux状态管理。。。

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

123.png 以及 entry: { ‘app’: [ ‘./src/client/index.jsx’ ], vender:[ ‘react’,‘redux’,‘react-redux’,‘react-router’, ] } 将代码分开打包加快前端资源加载速度

8.koa+koa-router管理路由跳转管理/list接口,,,+koa-static管理静态资源

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

有待改进的点:

1。代码体积过大,后期将会将preact替代react,减小代码总体积。

2.加入图片加载功能,https://sm.ms 将图片资源储存这个网站。。

3.把socket.io和redux结合好。。。不过antd居然推荐用dva来辅助进行状态管理,有点纠结,看了dva,github官网教程总共都没几个字。,dva作者可能去玩守望先锋去了。。

好吧,如果这些功能都写好,聊天室基本功能也应该差不多完善了吧。

源码地址:https://gitlab.com/pengliheng/chatroom/tree/master

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状态管理

回到顶部