react+redux聊天IM系统|react仿微信界面

简介: 之前有使用vue开发过一版vue聊天室,最近就捣鼓着用react技术尝试下。基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开发的手机端仿微信界面聊天室——reactChatRoom,实现了聊天记录下拉刷新、发送消息、表情(动图),图片、视频预览,打赏、红包等功能。

之前有使用vue开发过一版vue聊天室,最近就捣鼓着用react技术尝试下。
基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开发的手机端仿微信界面聊天室——reactChatRoom,实现了聊天记录下拉刷新、发送消息、表情(动图),图片、视频预览,打赏、红包等功能。

二、技术栈
MVVM框架:react / react-dom
状态管理:redux / react-redux
页面路由:react-router-dom
弹窗插件:wcPop
打包工具:webpack 2.0
环境配置:node.js + cnpm
图片预览:react-photoswipe
轮播滑动:swiper

001360_20190611172325806

002360_20190611172355117

003360_20190611172530005

005360_20190611172618453

006360_20190611174336949

007360_20190611174416117

009360_20190611174517469

011360_20190611174612277

012360_20190611174644541

014360_20190611174836214

015360_20190611174915357

016360_20190611175028869

017360_20190611175047013

/*
    引入公共及全局组件配置
    Q:282310962
    https://www.cnblogs.com/xiaoyan2017
*/
import React from 'react';
import ReactDOM from 'react-dom';
// import {HashRouter as Router, Route} from 'react-router-dom'
import App from './App';

// 引入状态管理
import {Provider} from 'react-redux'
import {store} from './store'

// 导入公共样式
import './assets/fonts/iconfont.css'
import './assets/css/reset.css'
import './assets/css/layout.css'
// 引入wcPop弹窗样式
import './assets/js/wcPop/skin/wcPop.css'

// 引入js
import './assets/js/fontSize'

ReactDOM.render(
  <Provider store={store}>
    {/* <Router>
      <Route path="/" component={App} />
    </Router> */}
    <App />
  </Provider>,
  document.getElementById('app')
);

react-router-dom地址路由配置:

/*
 *  @desc 页面地址路由js
 */

// 引入页面组件
import Login from '../views/auth/login'
import Register from '../views/auth/register'
import Index from '../views/index'
import Contact from '../views/contact'
import Uinfo from '../views/contact/uinfo'
import Ucenter from '../views/ucenter'
import Wallet from '../views/wallet'
import GroupChat from '../views/chat/group-chat'
import SingleChat from '../views/chat/single-chat'
import GroupInfo from '../views/chat/group-info'

// export default {Index, Contact, Ucenter};

export default [
    // 登录、注册
    {
        path: '/login', name: 'Login', component: Login,
    },
    {
        path: '/register', name: 'Register', component: Register,
    },

    // 首页、联系人、我
    {
        path: '/index', name: 'App', component: Index,
        meta: { showHeader: true, showTabBar: true, requireAuth: true },
    },
    {
        path: '/contact', name: 'Contact', component: Contact,
        meta: { showHeader: true, showTabBar: true, requireAuth: true },
    },
    {
        path: '/contact/uinfo', name: 'Uinfo', component: Uinfo,
    },
    {
        path: '/ucenter', name: 'Ucenter', component: Ucenter,
        meta: { showHeader: true, showTabBar: true, requireAuth: true },
    },

    // 聊天页面
    {
        path: '/chat/group-chat', name: 'GroupChat', component: GroupChat,
        meta: { requireAuth: true },
    },
    {
        path: '/chat/single-chat', name: 'SingleChat', component: SingleChat,
        meta: { requireAuth: true },
    },
    {
        path: '/chat/group-info', name: 'GroupInfo', component: GroupInfo,
        meta: { requireAuth: true },
    },

    // 钱包
    {
        path: '/wallet', name: 'Wallet', component: Wallet,
        meta: { requireAuth: true },
    }

    // ...
]

import React, { Component } from 'react';
import {HashRouter as Router, Route, Switch, Redirect} from 'react-router-dom'
import {connect} from 'react-redux'

import $ from 'jquery'
// 引入wcPop弹窗插件
import { wcPop } from './assets/js/wcPop/wcPop'

// 引入地址路由
import routers from './router'

// 导入顶部、底部tabbar
import HeaderBar from './components/header'
import TabBar from './components/tabbar'

class App extends Component {
  constructor(props){
    super(props)
    console.log('App主页面参数:\n' + JSON.stringify(props, null, 2))
  }
  render() {
    let token = this.props.token
    return (
      <Router>
        <div className="weChatIM__panel clearfix">
          <div className="we__chatIM-wrapper flexbox flex__direction-column">
            {/* 顶部 */}
            <Switch>
              <HeaderBar />
            </Switch>
            
            {/* 主页面 */}
            <div className="wcim__container flex1">
              {/* 路由容器 */}
              {/* <Route path="/" component={routers.Index} exact />
              <Route path="/contact" component={routers.Contact} />
              <Route path="/ucenter" component={routers.Ucenter} /> */}
              <Switch>
                {
                  routers.map((item, index) => {
                    return <Route key={index} path={item.path} exact render={props => (
                      !item.meta || !item.meta.requireAuth ? (<item.component {...props} />) : (
                        token ? <item.component {...props} /> : <Redirect to={{pathname: '/login', state: {from: props.location}}} />
                      )
                    )} />
                  })
                }
                {/* 初始化页面跳转 */}
                <Redirect push to="/index" />
              </Switch>
            </div>

            {/* 底部tabbar */}
            <Switch>
              <TabBar />
            </Switch>
          </div>
        </div>
      </Router>
    );
  }
}

const mapStateToProps = (state) =>{
  return {
    ...state.auth
  }
}

export default connect(mapStateToProps)(App);
目录
相关文章
|
1月前
|
自然语言处理 监控 数据可视化
海拍客与瓴羊达成合作,通过智能客服系统提升员工内部服务体验
海拍客与瓴羊达成合作,通过智能客服系统提升员工内部服务体验
|
1月前
|
自然语言处理 监控 机器人
中国联通济南分公司与瓴羊达成合作,以智能客服系统提升员工内部服务体验
中国联通济南分公司与瓴羊达成合作,以智能客服系统提升员工内部服务体验
|
4月前
|
JSON 小程序 开发工具
微信小程序进阶——会议OA其他界面
微信小程序进阶——会议OA其他界面
33 0
|
1月前
|
JavaScript 前端开发
React结合Redux实现Todolist
React结合Redux实现Todolist
12 0
|
2月前
|
消息中间件 缓存 开发工具
一套分布式IM即时通讯系统的技术选型和架构设计
为了更好的理解分布式IM即时通讯系统的设计,我站在架构师的角度,在充分了解系统需求、业务流程和技术流程后,从全局视角为系统设定方案目标,对技术方案进行选型,对系统进行总体架构设计和分层架构设计,并梳理清楚发送消息的交互链路、单聊和群聊的交互链路。希望对你有帮助。
88 0
|
2月前
|
自然语言处理 算法 数据库
【JavaScript+自然语言处理+HTML+CSS】实现Web端的智能聊天问答客服实战(附源码 超详细必看)
【JavaScript+自然语言处理+HTML+CSS】实现Web端的智能聊天问答客服实战(附源码 超详细必看)
37 0
|
2月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
38 0
|
2月前
|
移动开发 前端开发 HTML5
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)
31 0
|
2月前
|
机器学习/深度学习 自然语言处理 机器人
【Tensorflow+自然语言处理+LSTM】搭建智能聊天客服机器人实战(附源码、数据集和演示 超详细)
【Tensorflow+自然语言处理+LSTM】搭建智能聊天客服机器人实战(附源码、数据集和演示 超详细)
49 0
|
2月前
|
JSON 算法 Dubbo
Netty入门实践-模拟IM聊天
本文以入门实践为主,通过原理+代码的方式,实现一个简易IM聊天功能。分为2个部分:Netty的核心概念、IM聊天简易实现。