项目背景

这个项目主要是为了玩玩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. 基于JQuery+JSP的无数据库无刷新多人在线聊天室

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

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

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

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

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

  5. SignalR实现在线聊天室功能

    一.在线聊天室 1.新建解决方案 SignalROnlineChatDemo 2.新建MVC项目 SignalROnlineChatDemo.Web (无身份验证) 3.安装SignalR PM> ...

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

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

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

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

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

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

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

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

随机推荐

  1. SQLServer2008 统计表占用空间

    1.查看一张表占用的空间大小 EXEC sp_spaceused '表' 1.查看一个数据库中所有表占用空间大小 EXEC sp_MSforeachtable 'sp_spaceused " ...

  2. poj1135

    Domino Effect Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10454   Accepted: 2590 De ...

  3. node.js实现国标GB28181设备接入的sip服务器解决方案

    方案背景 在介绍GB28181接入服务器的方案前,咱们先大概给大家介绍一下为什么我们选择了用nodejs开发国标GB28181的服务,我大概给很多人介绍过这个方案,大部分都为之虎躯一震,nodejs在 ...

  4. Web框架的引入

    为什么会有web框架 有了上一篇内容,静态.动态web服务器的实现,已经掌握了客户端请求到服务器处理的机制.在动态资源处理中,根据请求 .py 导入模块应用,然后调用应用入口程序实现动态处理.但是在真 ...

  5. 九度OJ 1186:打印日期 (日期计算)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:6366 解决:2214 题目描述: 给出年分m和一年中的第n天,算出第n天是几月几号. 输入: 输入包括两个整数y(1<=y<= ...

  6. ABAP服务器文件操作

    转自http://blog.itpub.net/547380/viewspace-876667/ 在程序设计开发过程中,很多要对文件进行操作,这又分为对本地文件操作和服务器文件操作.对本地文件操作使用 ...

  7. 33_为应用添加多个Activity与参数传递

    1\ 2\ 3\ 4\ 2 3

  8. Linux通过Shell对文件自动进行远程拷贝备份

    在执行计划任务拷贝文件的时候,用scp命令需要输入密码,这里用公共密钥的方式实现密码的自动输入. 具体操作: 要求:把192.168.0.2机上的test.tar拷贝到192.168.0.3机器的上 ...

  9. c的详细学习(6)函数

        根据模块化程序设计的原则,一个较大的程序一般要分为若干个小模块,每个模块实现一个比较简单的功能.在c语言中,函数是一个基本的程序模块.     (1)函数的基本概念: 1)基本介绍: 任何一个 ...

  10. ubuntu14.04 安装pip vitualenv flask

    安装pip: $ apt-get install python-pip$ pip -V #查看版本 确认安装成功 安装完pip后,会发现下载的速度特别慢.按如下修改: $ vim ~/.pip/pip ...