react仿微信聊天室|react即时聊天IM系统|react群聊

react+redux仿微信聊天IM实战|react仿微信界面|react多人群聊天室

最近一直捣鼓react开发，就运用react开发了个仿微信聊天室reactChatRoom项目，基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+antdesign+wcPop等技术混合开发，实现了聊天记录界面下拉刷新、发送消息、表情(动图)，图片、视频预览，打赏、红包等功能。

vue聊天室：https://blog.csdn.net/yanxinyun1990/article/details/89038427

◆ react入口页面index.js 及package.json依赖注入

/**  @desc 入口页面index.js*/
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')
);

{"name": "react-chatroom","version": "0.1.0","private": true,"author": "andy","dependencies": {"react": "^16.8.6","react-dom": "^16.8.6","react-redux": "^7.0.3","react-router-dom": "^5.0.0","react-scripts": "0.9.x","redux": "^4.0.1"},"devDependencies": {"jquery": "^2.2.3","react-loadable": "^5.5.0","react-photoswipe": "^1.3.0","react-pullload": "^1.2.0","redux-thunk": "^2.3.0","swiper": "^4.5.0","webpack": "^1.13.1","webpack-dev-server": "^1.12.0"},"scripts": {"start": "set HOST=localhost&&set PORT=3003 && react-scripts start","build": "react-scripts build","test": "react-scripts test --env=jsdom","eject": "react-scripts eject"}
}

◆ react登录注册验证、拦截

import React, { Component } from 'react';
import { Link } from 'react-router-dom'
import { connect } from 'react-redux';import * as actions from '../../store/action'// 引入wcPop弹窗插件
import { wcPop } from '../../assets/js/wcPop/wcPop.js'class Login extends Component {constructor(props) {super(props)this.state = {tel: '',pwd: '',vcode: '',vcodeText: '获取验证码',disabled: false,time: 0}}componentDidMount(){if(this.props.token){this.props.history.push('/')}}render() {return (<div className="wcim__lgregWrapper flexbox flex__direction-column">......</div>)}// 提交表单handleSubmit = (e) => {e.preventDefault();var that = thisthis.state.tel = this.refs.tel.valuethis.state.pwd = this.refs.pwd.valuethis.state.vcode = this.refs.vcode.valueif (!this.state.tel) {wcPop({ content: '手机号不能为空！', style: 'background:#ff3b30;color:#fff;', time: 2 });} else if (!checkTel(this.state.tel)) {wcPop({ content: '手机号格式不正确！', style: 'background:#ff3b30;color:#fff;', time: 2 });} else if (!this.state.pwd) {wcPop({ content: '密码不能为空！', style: 'background:#ff3b30;color:#fff;', time: 2 });} else if (!this.state.vcode) {wcPop({ content: '验证码不能为空！', style: 'background:#ff3b30;color:#fff;', time: 2 });} else {// 获取登录之前的页面地址let redirectUrl = this.props.location.state ? this.props.location.state.from.pathname : '/'// 设置tokenthis.props.authToken(getToken())this.props.authUser(this.state.tel)wcPop({content: '注册成功！', style: 'background:#41b883;color:#fff;', time: 2,end: function () {that.props.history.push(redirectUrl)}});}}// 60s倒计时handleVcode = (e) => {e.preventDefault();this.state.tel = this.refs.tel.valueif (!this.state.tel) {wcPop({ content: '手机号不能为空！', style: 'background:#ff3b30;color:#fff;', time: 2 });} else if (!checkTel(this.state.tel)) {wcPop({ content: '手机号格式不正确！', style: 'background:#ff3b30;color:#fff;', time: 2 });} else {this.state.time = 60this.state.disabled = truethis.countDown();}}countDown = (e) => {if(this.state.time > 0){this.state.time--this.setState({vcodeText: '获取验证码(' + this.state.time + ')'})// setTimeout(this.countDown, 1000);setTimeout(() => {this.countDown()}, 1000);}else{this.setState({time: 0,vcodeText: '获取验证码',disabled: false})}}
}const mapStateToProps = (state) => {return {...state.auth}
}export default connect(mapStateToProps, {authToken: actions.setToken,authUser: actions.setUser
})(Login)

constructor(props){super(props)console.log('群聊页面参数：\n' + JSON.stringify(props, null, 2))
}// ******react-photoswipe配置选项
state = {images: [{// src: 'http://lorempixel.com/1200/900/sports/1',src: require('../../assets/img/placeholder/wchat__img03.jpg'),w: 345,h: 700,// title: 'Image 1'},{// src: 'http://lorempixel.com/1200/900/sports/2',src: require('../../assets/img/placeholder/wchat__img01.jpg'),w: 405,h: 275,// title: 'Image 2'},{src: require('../../assets/img/placeholder/wchat__img02.jpg'),w: 865,h: 265,}],isOpen: false,// 配置参数options: {// index: 1, //显示图片索引loop: false, //循环显示fullscreenEl: false, //全屏按钮shareEl: false, //分享按钮arrowEl: false, //左右箭头captionEl: false, //标题描述}
}
photoSwipeClose = () => {this.setState({isOpen: false})
}
photoSwipeOpen(index){this.setState({isOpen: true})this.state.options.index = index
}

◆ react地址路由管理

/**  @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 },}// ...
]

欢迎关注我的技术博客：https://www.cnblogs.com/xiaoyan2017

一起学习，一起进步，有问题随时联系，一起解决！！！

react仿微信聊天室|react即时聊天IM系统|react群聊相关推荐

ASP.NET SignalR 与LayIM配合，轻松实现网站客服聊天室（四）添加表情、群聊功能...
休息了两天,还是决定把这个尾巴给收了.本篇是最后一篇,也算是草草收尾吧.今天要加上表情功能和群聊.基本上就差不多了,其他功能,读者可以自行扩展或者优化.至于我写的代码方面,自己也没去重构.好的,我们开 ...
网络编程基础_5.3聊天室-多人聊天室
聊天室-多人聊天室 #include <stdio.h>// 1. 包含必要的头文件和库, 必须位于 windows之前 #include <WinSock2.h> #prag ...
基于JavaSwing开发聊天室（QQ聊天群聊）系统+论文+PPT 大作业毕业设计项目源码
基于JavaSwing开发聊天室(QQ聊天群聊)系统+论文+PPT(毕业设计/大作业) 开发环境: Windows操作系统开发工具: Eclipse/Myeclipse+Jdk 演示视频: jav ...
react仿微信web版聊天室|仿微信客户端react版
基于react+react-dom+react-router-dom+redux+react-redux+webpack+nodeJs等技术混合开发的手机端仿微信界面聊天室--reactChatRoo ...
vue整合uniapp_uni-app仿微信App界面|vue+uniapp聊天室|仿微信朋友圈
项目简介基于uni-app+vue+vuex+uniPop+swiper等技术开发的仿微信聊天室uniapp-chatroom项目,类似vue及小程序api语法使开发更加方便,实现了发送图文消息.表 ...
flutter图片聊天泡泡_flutter即时聊天IM仿微信|flutter聊天界面
鉴于Flutter最近比较火,今天给大家分享的是基于flutter+dart全家桶技术开发的仿微信界面聊天FlutterChat项目实例.实现了消息+表情.图片预览.红包.长按菜单.视频/仿朋友圈等功 ...
h5语音聊天audio实战|仿微信语音效果|h5即时聊天系统
最近一段时间不是那么忙,就抽空整理了下之前的项目,因为之前有开发过H5聊天项目,只是觉得好些功能都没有特别的完善,所以就把之前项目重新开发了下,如是就有了这个html5版实时聊天语音项目weChatI ...
第一篇，用Uniapp仿微信的语音电话，视频聊天IM聊天APP开发，支持各类消息收发，音视频通话等
前言基于uni-app技术开发的仿微信项目,实现了文本消息.图文消息.表情(gif动画),图片预览,图片编辑,视频预览,视频编辑,仿微信的图片选择.编辑.长按菜单等功能一.项目意义作为一个企业或 ...
html仿微信语音功能案例,html5聊天案例|趣聊h5|仿微信界面聊天|红包|语音聊天|地图...
之前有开发过一个h5微直播项目,当时里面也用到过聊天模块部分,今天就在之前聊天部分的基础上重新抽离模块,开发了这个h5趣聊项目,功能效果比较类似微信聊天界面.采用html5+css3+Zepto+sw ...