开发基于NodeJS的秘室聊天室
2016-05-02 09:06
351 查看
借着放假期间将NodeJS重新回顾了一下并玩了一下sketch来进行设计界面,很不错。(注:代码整理后会放到github上,请关注。)
本次聊天室我给它定义了一个名称叫“秘密聊天室”。
需求:
技术选型:
后端:NodeJs,Socket.io,中间件(express,body-parser,multer,ejs),mongoose
express:是NodeJs Web应用框架,主要是要理解它的router
body-parser:用于获取req中的参数值
multer:用于上传文件
ejs:用于模板渲染
mongoose:连接mongoose数据库
数据库:mongodb
前端:bootstrap布局,vuejs进行双向绑定,请求还是使用的jquery的ajax,未使用fetch(主要是bootstrap是基于jquery的,所以没用使用webpack或browerify等打包工具进行处理fetch)。
实现:
1、创建web服务器
2、进行身份认证,哪些路由要进行身份处理。
4、数据库配置
5、定义数据模型
6、用户注册,登录
7、建立socket.io
8、前端代码就比较简单了,无否是一些请求而已,下面只截取前端socke.io部分。
运行效果:
1、登录
2、主界面
3、创建房间(创建自己感兴趣的话题)
3、模拟两个用户
4、每个房间鼠标移入会显示房间内容
5、加入房间,会提示谁加入
6、退出房间,同样会有提示,房间之间互不影响。
7、消息
在现阶段还有未完成部分。如消息的保存,人员头像,收藏等。
后续,希望可以将nodejs消息处理做成一个通用组件,安装消息中心后,任何系统中可以很方便调用。
最后来一张sketch的设计稿
本次聊天室我给它定义了一个名称叫“秘密聊天室”。
需求:
技术选型:
后端:NodeJs,Socket.io,中间件(express,body-parser,multer,ejs),mongoose
express:是NodeJs Web应用框架,主要是要理解它的router
body-parser:用于获取req中的参数值
multer:用于上传文件
ejs:用于模板渲染
mongoose:连接mongoose数据库
数据库:mongodb
前端:bootstrap布局,vuejs进行双向绑定,请求还是使用的jquery的ajax,未使用fetch(主要是bootstrap是基于jquery的,所以没用使用webpack或browerify等打包工具进行处理fetch)。
实现:
1、创建web服务器
2、进行身份认证,哪些路由要进行身份处理。
4、数据库配置
5、定义数据模型
6、用户注册,登录
7、建立socket.io
8、前端代码就比较简单了,无否是一些请求而已,下面只截取前端socke.io部分。
运行效果:
1、登录
2、主界面
3、创建房间(创建自己感兴趣的话题)
3、模拟两个用户
4、每个房间鼠标移入会显示房间内容
5、加入房间,会提示谁加入
6、退出房间,同样会有提示,房间之间互不影响。
7、消息
在现阶段还有未完成部分。如消息的保存,人员头像,收藏等。
后续,希望可以将nodejs消息处理做成一个通用组件,安装消息中心后,任何系统中可以很方便调用。
最后来一张sketch的设计稿
相关文章推荐
- leetcode-116. Populating Next Right Pointers in Each Node
- 43-Reverse Nodes in k-Group
- Light OJ 1094 - Farthest Nodes in a Tree【树的直径 两次bfs】
- leetcode:25. Reverse Nodes in k-Group
- 【LeetCode】Swap Nodes in Pairs 解题报告
- [LeetCode#2][C]Add Two Numbers
- NodeJS学习笔记
- nodejs 生产环境配置
- nodejs项目mysql使用sequelize支持存储emoji
- 深入浅出Nodejs
- leetcode——117——Populating Next Right Pointers in Each Node II
- nodejs笔记之:事件驱动,线程池,非阻塞,异常处理等
- [git]ssh: Could not resolve hostname github.com: nodename nor servname provided, or not known
- leetcode——116—— Populating Next Right Pointers in Each Node
- nodejs 核心模块crypto
- 42-Remove Nth Node From End of List
- win10下安装nodejs
- nodejs原生模块简介
- HtmlAgilityPack 之 HtmlNode类
- node.js的一些知识