基于NodeJS的秘室聊天室
借着放假期间将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的秘室聊天室的更多相关文章
- 基于 NodeJs 打造 Web 在线聊天室
Socket.IO 简介与基础环境搭建 任务时间:10min ~ 20min 关于 Socket.IO Socket.IO 可以实现在浏览器和服务器之间实时双向通信,本节课程将详细介绍 Socket. ...
- 基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。
基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍.最后我们将会实现一个基于S ...
- 基于LINUX的多功能聊天室
原文:基于LINUX的多功能聊天室 基于LINUX的多功能聊天室 其实这个项目在我电脑已经躺了多时,最初写完项目规划后,我就认认真真地去实现了它,后来拿着这个项目区参加了面试,同样面试官也拿这个项目来 ...
- 基于 OpenResty 实现一个 WS 聊天室
基于 OpenResty 实现一个 WS 聊天室 WebSocket WebSocket 协议分析 WebSocket 协议解决了浏览器和服务器之间的全双工通信问题.在WebSocket出现之前,浏览 ...
- 基于EPOLL模型的局域网聊天室和Echo服务器
一.EPOLL的优点 在Linux中,select/poll/epoll是I/O多路复用的三种方式,epoll是Linux系统上独有的高效率I/O多路复用方式,区别于select/poll.先说sel ...
- 基于Linux的TCP网络聊天室
1.实验项目名称:基于Linux的TCP网络聊天室 2.实验目的:通过TCP完成多用户群聊和私聊功能. 3.实验过程: 通过socket建立用户连接并传送用户输入的信息,分别来写客户端和服务器端,利用 ...
- JAVA基础知识之网络编程——-基于TCP通信的简单聊天室
下面将基于TCP协议用JAVA写一个非常简单的聊天室程序, 聊天室具有以下功能, 在服务器端,可以接受客户端注册(用户名),可以显示注册成功的账户 在客户端,可以注册一个账号,并用这个账号发送信息 发 ...
- 《基于Node.js实现简易聊天室系列之详细设计》
一个完整的项目基本分为三个部分:前端.后台和数据库.依照软件工程的理论知识,应该依次按照以下几个步骤:需求分析.概要设计.详细设计.编码.测试等.由于缺乏相关知识的储备,导致这个Demo系列的文章层次 ...
- 通信——基于Xmpp协议实现的聊天室
前段时间写了个自定义通信协议的聊天室(即用\r\n标记字符串,作为一句话),总感觉自己弄的那个协议实现虽然简单,但是拓展性就太差了,只适合于发送聊天的内容,难以包含更多的信息.基于上述几点,于是就开始 ...
随机推荐
- css中line-height行高的深入学习
之前对css中行高line-height的理解还是有些肤浅,深入后才发觉里面包罗万象.学习行高line-height,首先从基本原理开始 (标注该文章转载 http://www.cnblogs.com ...
- css样式之border
border用法详解: 1.border-width 属性设置边框的宽度 可能的值:像素 2.border-style 属性设置边框的样式 可能的值:solid(直线),dashed(虚线),dott ...
- iOS之App Store上架被拒Legal - 5.1.5问题
今天在看到App Store 上架过程中,苹果公司反馈的拒绝原因发现了这么一个问题: Legal - 5.1.5 Your app uses background location services ...
- Hadoop 2.x 生态系统及技术架构图
一.负责收集数据的工具:Sqoop(关系型数据导入Hadoop)Flume(日志数据导入Hadoop,支持数据源广泛)Kafka(支持数据源有限,但吞吐大) 二.负责存储数据的工具:HBaseMong ...
- Android连接网络打印机进行打印
首先这是网络打印工具类,通过Socket实现,多说一句,网络打印机端口号一般默认的是9100 package com.Ieasy.Tool; import android.annotation.Sup ...
- height:100% 布局
常常会碰到需要填满整个浏览器,并且自适应高度的需求.首先肯定会想到给容器设定height:100%,但是会没有效果.原因是body没有高度,所以百分比无法生效. 解决方案:给html,body,标签都 ...
- 模仿EF,我们用JS开发的HTML5 SQLite 访问库
今天终于有空把demo放到了RunJS上面去.请使用google chrome观看在线演示: http://sandbox.runjs.cn/show/pekbd9zb 这个库本来是我们开发的phon ...
- 同步与异步 & 阻塞与非阻塞
在进行网络编程时,我们常常见到同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调用方式: 一.同步 所谓同步,就是在发出一个功能调用时,在没有得到结果之前,该调用 ...
- mysql交互协议解析——mysql包基础数据、mysql包基本格式
mysql交互协议是开发mysql周边组件常用的协议,如JDBC,libmysql等等. 在此我们要认识到mysql交互协议其实是半双工的交互协议,至于为什么,这里就先挖个小坑,以后再填. 在探讨my ...
- JS原生第三篇 (帅哥)
1.1 数 组 1. 数组 看电影 电影院 座位 大的变量 里面可以放很多的值 var arr = [1,3,57]; var ar = new Array(); ...