码迷,mamicode.com
首页 > Web开发 > 详细

基于NodeJS的秘室聊天室

时间:2016-04-04 19:26:34      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:

借着放假期间将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的秘室聊天室

标签:

原文地址:http://www.cnblogs.com/tom-zhu/p/5352474.html

踩
(0)
赞
(0)
   
举报
评论 一句话评论(0)
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!