基于github的聊天室
发布于 9 个月前 作者 pengliheng 3415 次浏览 最后一次编辑是 7 个月前 来自 分享
项目地址:https://chat.pipk.top/group/Moonlight
gihtub:https://github.com/pengliheng/chatroom
博客:https://www.pipk.top
采用https,免费证书//其实就是加了一把🔒
好想说一句。。。原来个人网页的服务器不用备案也是可以让微信访问的,加上https就行了

主界面

image.png

主要功能介绍:

1.自动登陆,保存github access_token到前台cookie里面,nodejs将token存储mongodb数据库,采用class static 写法,将更多查询数据库方法沉淀到Model层,封装验证token方法在model层,可通过await Token.verify(access_token)验证token ,通过则直接拿到用户信息,逻辑更清晰。便于代码扩展

const mongoose = require("mongoose");
const {Model,Schema} = mongoose;
const tokenSchema = new Schema({
    access_token: String,
    user_id: String
});
const tokenModel = mongoose.model('token', tokenSchema);
class TokenClass extends Model {
    static async verify(data){
        let User = require('./User.model');
        let token = await this.findOne(data)
        if(token){
            //更新状态 --> 在线
            await User.update({
                user_id: token.user_id
            }, {
                status: 'online'
            })
            //然后再将用户信息发给前台
            let user = await User.findOnePretty({user_id:token.user_id})
            return user
        }else{
            return null
        }
    }
}
tokenSchema.loadClass(TokenClass)
const Token = mongoose.model('tokens', tokenSchema);
module.exports =  Token;

2.在线用户数量显示,在数据库内 Users 添加status状态。同步数据库更新用户在线状态

3.增加socket rooms,各个房间聊天内容相互独立,互不干扰。。

4.mongodb 数据储存,用户登陆利用,将更多便捷查询方法沉淀到Model层。

5.react-router-dom管理前台路由跳转。强制使用前台路由

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

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

8.bug好多,吃个饭回来再改

TODO:

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

2. 完善视频聊天功能,

3. 用 rollup.js,替代webpack打包,看了简介,tree shaking好像做的很棒

4. serverless

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

18 回复

如何加速资源加载速度啊

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

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

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

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

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

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

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

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

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

我更新了。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

timg.jpg 更新了更新了

支持,希望你能长期维护下去

来自酷炫的 CNodeMD

回到顶部