V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
bw2
V2EX  ›  程序员

用 NodeJS 打造多人在线聊天室( NodeJS & SocketIO & Express & EJS & MongoDB & Gulp)

  •  
  •   bw2 ·
    bergwhite · 2017-05-31 13:36:03 +08:00 · 2633 次点击
    这是一个创建于 2729 天前的主题,其中的信息可能已经有所发展或是发生改变。

    项目背景

    这个项目主要是为了玩玩 NodeJS,项目的方向大概是做出类似 QQ 的在线聊天系统。想要在线体验可以点击在线演示

    项目使用 PM2 进行部署和管理,功能在不断的迭代开发中。如果你觉得这个项目比较有趣,或者能对你有所帮助,欢迎给个 Star。

    项目地址:https://github.com/bergwhite/nodejs-chat

    PS: 最近找工作,北京的欢迎联系。另外之前做过一个基于 Vue 全家桶二次开发的 V2EX 社区 https://github.com/bergwhite/v2ex-vue

    项目目录

    
    ├─bin
    │    www  // 启动 express
    ├─database
    │    index.js  // MongoDB
    ├─public  // 静态文件
    │    css
    │        index.css  // 首页 CSS
    │    js
    │        index.js  // 与 socket 服务进行通讯(关键文件)
    |        socket-server.js  // socket 服务(关键文件)
    │    img
    ├─routers
    │    index.js  // 页面路由
    ├─view
    │    error.ejs  // 错误页
    │    index.ejs  // 首页
    │    userCenter.ejs  // 用户中心(规划中)
    │    userList.ejs  // 用户列表(规划中)
    ├─app.js  // express
    ├─package.json  // npm 包
    
    

    路由

    目前只有 /目录和 /room/:id 正式使用了,其他路由的页面还在迭代开发中。

    
    /  // 首页
    /user  // 用户列表
    /user/:id  // 用户中心
    /user/:id/register  // 注册( JSON )
    /user/:id/login  // 登陆( JSON )
    /user/:id/logout  // 注销( JSON )
    /user/:id/info  // 用户资料( JSON )
    /room/:id  // 指定聊天室
    
    

    开始安装

    使用之前,请在 package.json 中修改 MongoDB 的安装路径(--dbpath )。

    
    git clone https://github.com/bergwhite/nodejs-chat  // 克隆项目到本地
    cd nodejs-chat  // 进入项目目录
    npm install  // 安装依赖
    npm run build  // 构建线上代码
    npm run mongod // 启动 MongoDB 服务
    npm run start // 启动聊天室服务并启动网站
    
    

    项目演示

    目前项目存在一个已知的 bug,表情包无法在 div 模拟的输入框中插入(修复中)。

    匿名聊天

    nodejs-chat-nick-chat

    用户聊天

    nodejs-chat-user-chat

    成员&房间

    nodejs-chat-memb-room

    离线通知

    nodejs-chat-user-gone

    更多房间

    nodejs-chat-more-rooms

    房间独立

    nodejs-chat-room-diff

    已上线功能

    • 跨浏览器,跨地域聊天( SocketIO 自带技能)
    • 首次进入会显示欢迎信息
    • 发送空消息会进行提示
    • 直接发送消息默认昵称为“神秘人”
    • 发送消息后会清空当前输入框内容,然后焦点回到消息输入框
    • 添加用户名后会成为新用户,然后告知全房间人有新用户加入
    • 可以创建不同的房间,不同的房间的聊天是相互独立的
    • 显示当前房间的在线用户(设置了用户名的)
    • 显示目前所有打开的房间
    • 用户(设置了用户名的)离线会通知所有房间内的成员
    • 压缩线上代码,加快访问速度
    • ...

    待上线功能

    用户名

    • 统计匿名用户
    • 支持一键随机获取用户名

    头像

    • 访客使用默认头像
    • 新用户(设置了用户名的)随机获得一个头像
    • 新用户换头像可以从默认的一组头像中选择
    • 是否支持上传头像还在考虑中(安全性问题)

    聊天

    • 支持多组丰富的表情包
    • 是否支持上传图片还在考虑中(安全性问题)

    数据库

    • 对接 MongoDB,新用户(设置了用户名的)设置密码后,将从临时用户转变为正式用户

    项目缺陷

    • 界面丑(等功能完善了再考虑)
    • 表情包无法在 div 模拟的输入框中插入(修复中)
    • ...
    izayl
        1
    izayl  
       2017-05-31 14:32:29 +08:00 via Android
    我也做了个类似的,多了一个 WebRTC 实现的音视频聊天功能
    bw2
        2
    bw2  
    OP
       2017-06-01 09:58:26 +08:00
    @izayl 你的项目有在线演示吗?发出来大家一起看看呗 ^_^
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1318 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 851ms · UTC 23:49 · PVG 07:49 · LAX 15:49 · JFK 18:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.