NodeJS在线聊天室(NodeJS & SocketIO & Express & EJS & MongoDB & Gulp)
项目背景
这个项目主要是为了玩玩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)的更多相关文章
- 用NodeJS打造多人在线聊天室(NodeJS & SocketIO & Express & EJS & MongoDB & Gulp)
项目背景 这个项目主要是为了玩玩NodeJS,项目的方向大概是做出类似QQ的在线聊天系统.想要在线体验可以点击在线演示. 项目使用PM2进行部署和管理,功能在不断的迭代开发中.如果你觉得这个项目比较有 ...
- AngularJS+Node.js+socket.io 开发在线聊天室
所有文章搬运自我的个人主页:sheilasun.me 不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍 ...
- Asp.NET MVC 使用 SignalR 实现推送功能二(Hubs 在线聊天室 获取保存用户信息)
简单介绍 关于SignalR的简单实用 请参考 Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室) 在上一篇中,我们只是介绍了简单的消息推送,今天我们来修改一下,实现 ...
- 基于Server-Sent Event的简单在线聊天室
Web即时通信 所谓Web即时通信,就是说我们可以通过一种机制在网页上立即通知用户一件事情的发生,是不需要用户刷新网页的.Web即时通信的用途有很多,比如实时聊天,即时推送等.如当我们在登陆浏览知乎时 ...
- 三、jQuery--jQuery基础--jQuery基础课程--第12章 jQuery在线聊天室
在线聊天室案例 一.功能简介: 1.用户需要登录后才能进入聊天室交流 2.已无刷新的方式,动态展示交流后的内容和在线人员的基本信息 3.登录后的用户可以提交文字和表情图标 技术重点:利用ajax的无刷 ...
- 在线聊天室的实现(1)--websocket协议和javascript版的api
前言: 大家刚学socket编程的时候, 往往以聊天室作为学习DEMO, 实现简单且上手容易. 该Demo被不同语言实现和演绎, 网上相关资料亦不胜枚举. 以至于很多技术书籍在讲解网络相关的编程时, ...
- 基于JQuery+JSP的无数据库无刷新多人在线聊天室
JQuery是一款非常强大的javascript插件,本文就针对Ajax前台和JSP后台来实现一个无刷新的多人在线聊天室,该实现的数据全部存储在服务端内存里,没有用到数据库,本文会提供所有源程序,需要 ...
- 基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。
基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍.最后我们将会实现一个基于S ...
- 百度前端面试题-类似slack的在线聊天室
别人国庆出去玩,我在家写代码的感觉也是很不错哒. 首先介绍一下技术架构吧! 使用了js框架:FFF,zepto,jquery,md5.min.js 前端框架:Bootstrap 后端:野狗,部分PHP ...
随机推荐
- 连接greenvpn 公司内网连接
查看计算机路由表 Route print 跟踪路由表 Tracert ip or dnsname 本次需求,连接greenvpn之后,公司10.130.41.** 网段的机器无法使用.本机ip 10. ...
- 配置WampServer以及搭建WordPress的一些问题,持续总结。
这里用的版本是Wampserver2.4-x64. Wamp的安装就不赘述了,一路点通过就可以了. #注意:(最好别改,省的麻烦) 80端口是Apache 的默认端口,在httpd.conf文件中配置 ...
- Apache+mod_encoding解决URL中文编码问题
我们经常在论坛上看到这样的求救贴: 为什么我看不了网站上中文文件名的文件?这时一定会有好心的大侠告诉说,到IE6的工具,Internet选项, 高级里,把"总是以UTF-8发送URL&qu ...
- css常用的属性方法 上篇
自己是从java后台自学转前端的,所以平时一些简单的css+html就不写了,列出的都是新手常用的一些属性,会持续更新,大神勿喷,留给新手做个参考! 尤其是跟我一样自学前端的. 背景关联 ba ...
- 在C#中使用类golang信道编程(一)
BusterWood.Channels是一个在C#上实现的信道的开源库.通过使用这个类库,我们可以在C#语言中实现类似golang和goroutine的信道编程方式.在这里我们介绍3个简单的信道的例子 ...
- J2EE struts2MVC应用在线书签1
序:之前花了一天研究了一下filter,虽然是实现了MVC模式开发了 WebBookmark,但是代码过于冗长,集中在filter中使用if语句不易阅读,为了体现两份作业的不同点,我决定学习 Java ...
- 详解Session分布式共享(.NET CORE版)
一.前言&回顾 在上篇文章Session分布式共享 = Session + Redis + Nginx中,好多同学留言问了我好多问题,其中印象深刻的有:nginx挂了怎么办?采用Redis的S ...
- 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)
1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...
- python 基础之pickle 与json 报错问题解决方案
Python 基础之pickle与json 有没有在搞pickle与json在进行数据储存的时候老是报错,这个有些让人烦恼,在之前有一篇介绍过它们的基本用法以及在使用过长中避免一些坑,但是今天在把对象 ...
- Day2 Python的运算符及三大语句控制结构
Python的运算符 Python语言支持以下类型的运算符: 算术运算符 比较(关系)运算符 赋值运算符 逻辑运算符 位运算符 成员运算符 身份运算符 运算符优先级 Python的三大语句控制结构: ...