码迷,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
迷上了代码!