react实战开发|react+web版聊天室

一、项目介绍

基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开发的web版聊天室reactWebChat项目,实现了发送消息、表情(动图),图片、视频预览等功能。

二、技术选型

  • MVVM框架:react / react-dom
  • 状态管理:redux / react-redux
  • 页面路由:react-router-dom
  • 弹窗插件:wcPop
  • 打包工具:webpack 2.0
  • 环境配置:node.js + cnpm
  • 图片预览:react-photoswipe
  • 轮播滑动:swiper
/*
 *  @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 NewFriend from '../views/contact/new-friends'
import Ucenter from '../views/ucenter'
import News from '../views/news'
import NewsDetail from '../views/news/detail';

export default [
    {
        path: '/login', name: 'Login', component: Login,
        meta: { hideSideBar: true },
    },
    {
        path: '/register', name: 'Register', component: Register,
        meta: { hideSideBar: true },
    },
    {
        path: '/index', name: 'App', component: Index,
        meta: { requireAuth: true },
    },
    {
        path: '/contact', name: 'Contact', component: Contact,
        meta: { requireAuth: true },
    },
    {
        path: '/contact/uinfo', name: 'Uinfo', component: Uinfo,
    },
    {
        path: '/contact/new-friends', name: 'NewFriend', component: NewFriend,
        meta: { requireAuth: true },
    },
    {
        path: '/news', name: 'News', component: News,
    },
    {
        path: '/news/detail', name: 'NewsDetail', component: NewsDetail,
    },
    {
        path: '/ucenter', name: 'Ucenter', component: Ucenter,
        meta: { requireAuth: true },
    },

    // ...
]
{
  "name": "react-webchat",
  "version": "0.1.0",
  "QQ": "282310962",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.1.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "0.9.x",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "jquery": "^2.2.3",
    "react-custom-scrollbars": "^4.2.1",
    "react-photoswipe": "^1.3.0",
    "swiper": "^4.5.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"
  }
}
render() {
    let token = this.props.token
    return (
      <Router>
        <div className="vChat-wrapper flexbox flex-alignc">
          <div className="vChat-panel" /*style={{ backgroundImage: `url(${require("./assets/img/placeholder/vchat__panel-bg02.jpg")})` }}*/ >
            <div className="vChat-inner flexbox">
              {/* //顶部(最大、最小、关闭) */}
              <Switch>
                <WinBar />
              </Switch>

              {/* //侧边栏 */}
              <Switch>
                <SideBar />
              </Switch>

              {/* //主页面 */}
              <div className="flex1 flexbox">
                {/* 路由容器 */}
                <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>
            </div>
          </div>
        </div>
      </Router>
    );
  }
// >>> 【编辑器+表情处理模块】------------------------------------------
// ...处理编辑器信息
function surrounds() {
    setTimeout(function () { //chrome
        var sel = window.getSelection();
        var anchorNode = sel.anchorNode;
        if (!anchorNode) return;
        if (sel.anchorNode === $(".J__wcEditor")[0] ||
            (sel.anchorNode.nodeType === 3 && sel.anchorNode.parentNode === $(".J__wcEditor")[0])) {

            var range = sel.getRangeAt(0);
            var p = document.createElement("p");
            range.surroundContents(p);
            range.selectNodeContents(p);
            range.insertNode(document.createElement("br")); //chrome
            sel.collapse(p, 0);

            (function clearBr() {
                var elems = [].slice.call($(".J__wcEditor")[0].children);
                for (var i = 0, len = elems.length; i < len; i++) {
                    var el = elems[i];
                    if (el.tagName.toLowerCase() == "br") {
                        $(".J__wcEditor")[0].removeChild(el);
                    }
                }
                elems.length = 0;
            })();
        }
    }, 10);
}

// 定义最后光标位置
var _lastRange = null, _sel = window.getSelection && window.getSelection();
var _rng = {
    getRange: function () {
        if (_sel && _sel.rangeCount > 0) {
            return _sel.getRangeAt(0);
        }
    },
    addRange: function () {
        if (_lastRange) {
            _sel.removeAllRanges();
            _sel.addRange(_lastRange);
        }
    }
}

// 格式化编辑器包含标签
$("body").on("click", ".J__wcEditor", function(){
    $(".wc__choose-panel").hide();
    _lastRange = _rng.getRange();
});
$("body").on("focus", ".J__wcEditor", function(){
    surrounds();
    _lastRange = _rng.getRange();
});
$("body").on("input", ".J__wcEditor", function(){
    surrounds();
    _lastRange = _rng.getRange();
});

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏谈补锅

原来你是这样的---原型和原型链

  把JS的原型和原型链重新梳理了一遍,然后动手绘制了一张流程图,原型和原型链的秘密就藏在这张图上。绘制流程图的好处就是在绘制的过程中,既检验自己对这个知识点的...

12110
来自专栏Fundebug

Clean Code之JavaScript代码示例

作为一个开发者,如果你关心代码质量,除了需要认真测试代码能否正确执行以外,还要注重代码的整洁(clean code)。一个专业的开发者会从将来自己或则他人方便维...

14370
来自专栏Android进阶之路

是继续Rxjava还是该试试Kotlin的协程?

协程以前一直是Kotlin作为实验性的一个库,前些日子发现1.3版本的kotlin relese了协程,所以就找时间研究了一下,本来早就想写这篇文章了,但是因为...

57900
来自专栏log

vue-cli@2.x项目迁移日志

虽然 vue-cli@3 早就已经巨普及了,新项目应该已经很少有人还有使用 vue-cli@2.x 。 但是对于一些稍微早些时候的 vue 项目,如果当时没有做...

6200
来自专栏前端技术总结

五个特性,让你升级React

本系列文章主要将总结React从15.x升级到v16.x所需要注意的内容,本文则主要总结为什么要升级到v16.x,v16.x的一些新特性,主要内容包括:

62790
来自专栏欧阳大哥的轮子

用AutoLayout实现分页滚动

UIScrollView的pagingEnabled属性用于控制是否按分页进行滚动。在一些应用中会应用到这一个特性,最典型的就是手机桌面的应用图标列表。这些界面...

15940
来自专栏C++开源框架源码分析

腾讯开源框架TarsCpp-rpc设计分析-client(一)

Tars是腾讯开源的微服务平台,包含了一个高性能的rpc框架和服务治理平台,TarsCpp是其C++版本。对于以C++为主要开发语言,同时还想深入了解rpc和微...

752100
来自专栏华章科技

地球程序员之神:没上过大学,曾拒盖茨的Offer,4代码农靠他吃饭

导读:很多人认为程序员应该供的神里面排名第一的应该是Linus Torvalds,因为他是Linux和Git之父。

19040
来自专栏前端人人

前端自己动手使用nodejs上传打包文件到aliyun oss

然后在根目录下新建 ali-oss.js 文件,并复制上面的代码到该文件中,并填写上各种配置信息,如图所示:

97640
来自专栏云扬四海

网站跨域的五种解决方式

等带有src属性的标签可以从不同的域加载和执行资源。其他插件的同源策略:flash、java applet、silverlight、googlegears等浏览...

14540

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励