专栏首页那些年我们学过的前端react全家桶 NodeJS MongoDB搭建实时聊天的app

react全家桶 NodeJS MongoDB搭建实时聊天的app

? GitHub: https://github.com/majunchang/reachChatApp

基于==React(16.x)== 全家桶制作的一款实时聊天app,采用组件化,模块化的开发方式,用到了==react-redux==等插件,使用==antd-mobile==的ui框架。

技术栈

【前端】
  • React: 用于搭建用户界面的javascript库,特点是声明式渲染和组件化开发
  • Redux: Redux 是 JavaScript 状态容器,提供可预测化的状态管理。让你构建一致化的应用,运行与不同的环境,并且易于测试。
  • React-redux: 核心在于provieder,connect和中间件机制。
  • React-router:是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步。
【后端】
  • NodeJs:使用 express 构建一个本地 HTTP server 来调试 React 项目
  • MongoDB: 存储用户数据和聊天数据的非关系型数据库
  • Express: Node的基于 Node.js 平台,快速、开放、极简的 web 开发框架。
【自动化构建】
  • create-react-app: 官网提供的react脚手架工具,快速初始化项目代码
  • eslint: 代码风格检查工具,规范代码书写

技术详解

react中注意的地点 绑定事件,state和actions的映射,路由包含的switch等

登录和注册部分(以登录举例)

  1. 首先发送一个接口请求后端,检测是否有用户信息。没有的话 直接跳转到登录页
  2. 登录这里 对输入的用户名和密码做一下校验 然后存储到本地一个用户id
  3. 登录返回成功之后dispatch返回数据 触发reducer 将数据存储到state中

主页以及切换部分

  1. 头部和底部使用共有部分,中间的内容使用数组中循环渲染不同的Route
  2. 登录成功之后,有了redirect选项,并且我们在Login中,设置了路由的跳转
{this.props.redirectTo && this.props.redirectTo !== '/login' ?
                    <Redirect to={this.props.redirectTo}></Redirect> : null}
  1. 我们在这些子组件中 使用@connect方法, 将redux中的state和action传递进来

聊天数据的展示

  1. 主要是使用socket.io 实现数据通信原理
  2. 后端使用express+socketio的结合,前端监听端口号9000以后,进行了数据的交互和接收
  3. 我们在每条数据上 加上了其他的一些值 形成一个对象。根据发收方的用户id 进行辨别和数组的循环渲染

未读消息的更新

  1. 默认每条数据的read字段 都是false,筛选聊天数据的发送对象是正在使用这个软件的用的时候,筛选出来的结果就是未读消息的数量
  2. socket 使用emit触发 on来接受 当接受到一个消息的时候 未读消息加1
  3. 当我们从聊天页面退出的时候 把这个聊天界面的对方的id发送给后端进行处理 将总体未读消息数量 减去这个id的维度消息数量

预览效果

mark

mark

mark

mark

mark

快速开始

开发版
//  开启mongodb数据库服务
//  将项目地址完整的clone下来 
    git clone https://github.com/majunchang/reachChatApp
//  进入到项目文件夹  安装相关依赖
    cd reatChatApp 
    npm install
//  进行本地编译
    npm start
//  进入到server文件夹里面 启动nodejs服务  建议使用nodemon启动
    node(ndoemon) server
生产版
//  开启mongodb数据库服务
//  将项目地址完整的clone下来 
    git clone https://github.com/majunchang/reachChatApp
//  进入到项目文件夹  安装相关依赖
    cd reatChatApp 
    npm install
//  首先将项目进行打包 然后启动打包的端口(server.js)中已经配置
    npm run build
//  完成之后
    npm run server 

<div align=center> <img width="300" height="300" src="http://oneg19f80.bkt.clouddn.com/18-3-16/36877665.jpg"> </div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • react 创建组件以及组件通信

    关于React.createClass方法与class App extends Component方法的区别

    念念不忘
  • 前端构造桌面级应用(QQ音乐)

    https://blog.csdn.net/weichuang_1/article/details/48849335

    念念不忘
  • 移动端 局部dom实现滚动

    https://github.com/surmon-china/vue-awesome-swiper/issues/423

    念念不忘
  • SNMPv3

    SNMP是Simple Network Manger Protocol(简单网络管理协议)的缩写,利用SNMP协议,网络管理员可以对网络上的节点进行信息查询、...

    py3study
  • TLS握手的简单介绍

    主要做了两件事:确定协议版本和加密套件、生成加密密钥。TLS的握手主要由3个阶段来完成这两件事。

    用户1454152
  • shiro教程3(加密)

      加密,是以某种特殊的算法改变原有的信息数据,使得未授权的用户即使获得了已加密的信息,但因不知解密的方法,仍然无法了解信息的内容

    用户4919348
  • 006.Nginx访问控制

    HTTP是建立在TCP, 一次HTTP请求需要先建立TCP三次握手(称为TCP连接),在连接的基础上再进行HTTP请求。

    木二
  • 破解之美:利用ECB加密缺陷突破cookie加密

    密码学诞生于古人类社会,例如古希腊斯巴达的密码棒、欧洲中世纪时期的密码栏、阿伯提发明的密码盘等。古代的密码学是一门加密隐蔽的学科,而现代密码学定义为加密与解密,...

    FB客服
  • 禁止server 2008域端口的脚本

    netsh advfirewall firewall set rule name=all protocol=TCP dir=in localport=9389 ...

    力哥聊运维与云计算
  • 旷视科技产品总监李晨光:详解人脸识别的应用场景(含PPT)

    雷锋网按:本文根据旷视科技商业产品总监李晨光在高交会《读脸·对话——AI 技术风暴沙龙》的演讲内容整理而来,主要谈论人工智能如何商业化的问题。 人工智能如何商业...

    AI科技评论

扫码关注云+社区

领取腾讯云代金券