项目背景

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

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

项目地址:https://github.com/bergwhite/nchat

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模拟的输入框中插入(修复中)。

匿名聊天

用户聊天

成员&房间

离线通知

更多房间

房间独立

已上线功能

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

待上线功能

用户名

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

头像

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

聊天

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

数据库

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

项目缺陷

  • 界面丑(等功能完善了再考虑)
  • 表情包无法在div模拟的输入框中插入(修复中)
  • ...

NodeJS在线聊天室(NodeJS & SocketIO & Express & EJS & MongoDB & Gulp)的更多相关文章

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

    项目背景 这个项目主要是为了玩玩NodeJS,项目的方向大概是做出类似QQ的在线聊天系统.想要在线体验可以点击在线演示. 项目使用PM2进行部署和管理,功能在不断的迭代开发中.如果你觉得这个项目比较有 ...

  2. AngularJS+Node.js+socket.io 开发在线聊天室

    所有文章搬运自我的个人主页:sheilasun.me 不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍 ...

  3. Asp.NET MVC 使用 SignalR 实现推送功能二(Hubs 在线聊天室 获取保存用户信息)

    简单介绍 关于SignalR的简单实用 请参考 Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室) 在上一篇中,我们只是介绍了简单的消息推送,今天我们来修改一下,实现 ...

  4. 基于Server-Sent Event的简单在线聊天室

    Web即时通信 所谓Web即时通信,就是说我们可以通过一种机制在网页上立即通知用户一件事情的发生,是不需要用户刷新网页的.Web即时通信的用途有很多,比如实时聊天,即时推送等.如当我们在登陆浏览知乎时 ...

  5. 三、jQuery--jQuery基础--jQuery基础课程--第12章 jQuery在线聊天室

    在线聊天室案例 一.功能简介: 1.用户需要登录后才能进入聊天室交流 2.已无刷新的方式,动态展示交流后的内容和在线人员的基本信息 3.登录后的用户可以提交文字和表情图标 技术重点:利用ajax的无刷 ...

  6. 在线聊天室的实现(1)--websocket协议和javascript版的api

    前言: 大家刚学socket编程的时候, 往往以聊天室作为学习DEMO, 实现简单且上手容易. 该Demo被不同语言实现和演绎, 网上相关资料亦不胜枚举. 以至于很多技术书籍在讲解网络相关的编程时, ...

  7. 基于JQuery+JSP的无数据库无刷新多人在线聊天室

    JQuery是一款非常强大的javascript插件,本文就针对Ajax前台和JSP后台来实现一个无刷新的多人在线聊天室,该实现的数据全部存储在服务端内存里,没有用到数据库,本文会提供所有源程序,需要 ...

  8. 基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。

    基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍.最后我们将会实现一个基于S ...

  9. 百度前端面试题-类似slack的在线聊天室

    别人国庆出去玩,我在家写代码的感觉也是很不错哒. 首先介绍一下技术架构吧! 使用了js框架:FFF,zepto,jquery,md5.min.js 前端框架:Bootstrap 后端:野狗,部分PHP ...

随机推荐

  1. Bug 笔记

    1.页面返回 400 Bag request: 原因:使用Spring  MVC  controller的时候,查询数据库:当数据库的数据类型是int型时,Spring MVC在查询的数据匹配给实体类 ...

  2. jQuery控制元素隐藏和显示

    1.jQuery隐藏和显示效果 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: $("#hide").click(functio ...

  3. iptables常用命令之配置生产环境iptables及优化

    第一步:清空当前的所有规则和计数 iptables -F #清空所有的防火墙规则 iptables -X #删除用户自定义的空链 iptables -Z #清空计数 第二步:配置允许ssh端口连接 i ...

  4. virtual box ubuntu 与Windows共享文件夹

    由于懒得去截图了,直接抛链接.参考链接:http://www.cnblogs.com/lidabo/p/5317024.html 简介概括:首先安装增强功能,接着在virtual box的seting ...

  5. PROFINET如何实现实时性

    平时我们都听过文艺作品要“源于生活而高于生活”.PROFINET是基于工业以太网的,用文艺范儿的词汇说就是“源于以太网而高于以太网”.那么,PROFINET是怎么做到“高于以太网”的呢? 要做到比普通 ...

  6. java获得路径的多种方式

    本文讲解java语言中获得运行时路径的多种方式,包括java项目.java web项目.jar.weblogic等多种场景. 一.this.getClass().getClassLoader().ge ...

  7. jquery虎牙TV3D轮播特效

    css部分: *{ margin: 0px; padding: 0px; } body{ margin: 0px; padding: 0px; text-align: center; } #banne ...

  8. 使用Asp.Net MVC开发兼职文章系统

    我已经开发好了,你拿去用就是了. 以下是README的内容,包含功能要求和开发过程的一些思考: 一.功能 1.学生兼职人员文章(任务.自由编写),审核(通过,退回修改,无效),并按每15天结算一次费用 ...

  9. [第一阶段] Python学习

    首先声明一下,我这个学习计划是关于学习Python的. 先说一下起因:我自己接触Python算是很久了,目前仍没学会,很失败,很惭愧.所以这次一方面简单分析一下自学会碰到的问题:另一方便,我想到了一种 ...

  10. MongoDB副本集的常用操作及原理

    本文是对MongoDB副本集常用操作的一个汇总,同时也穿插着介绍了操作背后的原理及注意点. 结合之前的文章:MongoDB副本集的搭建,大家可以在较短的时间内熟悉MongoDB的搭建和管理. 下面的操 ...