我的项目介绍

Next.js一款比拟热门的React服务器端渲染框架。让你的网页领有SEO能力。
Next-Webchat基于next+react+redux+antd+rlayer等技术实现的仿微信PC网页端聊天我的项目。实现了音讯表情混合发送、图片/视频预览、拖拽/粘贴截图发送、红包/朋友圈等性能。


技术框架

  • 技术架构：next.js+react+Rredux
  • UI组件库：Antd (蚂蚁金服react组件库)
  • 字体图标：阿里iconfont图标库
  • 弹窗组件：RLayer（react.js自定义对话框）
  • 虚构滚动：RScroll（react.js自定义滚动条）

成果预览














如果想让你的网页也能领有SEO性能，那么Next.js是一个不错的抉择。只有会React，上手就很容易了。

https://www.nextjs.cn/
https://github.com/vercel/nex...

Next|React自定义弹窗组件

我的项目中用到的所有弹窗均是本人开发的RLayer组件。
RLayer 基于react.js开发的PC端自定义弹框组件。反对超过30+参数自在配置，通过笨重的布局设计、极简的调用形式来解决简单的弹出层性能，为您呈上不一样的弹窗成果。

感兴趣的话，能够去看看之前的这篇分享文章。
https://segmentfault.com/a/11...

Next|React自定义滚动条组件

我的项目中用到的滚动条也是本人开发的一款PC桌面端虚构丑化滚动条组件RScroll。

Rscroll.js反对原生滚动条、是否自动隐藏、滚动条大小/层级/色彩等性能。

Next公共模板

新建layouts/index.js文件用于页面主入口模板。

function Layout(props) {    const router = useRouter()    // 拦挡验证    useEffect(() => {        // ...    }, [])    return (    <>        {/* 配置公共head信息 */}        <Head>            <title>Next.js聊天室</title>            <link rel="icon" href="/favicon.ico" />            <meta name="keywords" content="Next.js|React.js|Next.js聊天室|Next.js仿微信|React聊天实例"></meta>            <meta name="description" content="Next-WebChat 基于Next.js+React+Redux构建的服务端渲染聊天应用程序"></meta>        </Head>        <div className="next__container flexbox flex-alignc flex-justifyc">            <div className={utils.classNames('next__wrapper')} style={{ backgroundImage: `url(${props.skin})` }}>                <div className="next__board flexbox">                    {/* 右上角按钮 */}                    <WinBar {...props} />                    {/* 侧边栏 */}                    <Sidebar {...props} />                    {/* 两头栏 */}                    <Middle />                    {/* 主体布局 */}                    <div className="nt__mainbox flex1 flexbox flex-col">                        {props.children}                    </div>                </div>            </div>        </div>    </>    )}

Head组件用于配置一些页面SEO信息，如：title、keyword、description及图标icon等信息。

聊天局部

编辑器模块独自抽离进去封装了一个editor组件，用于解决一些聊天输出、表情、光标处插入内容、粘贴截图等性能。

// react中实现div的contenteditable性能return (    <div         ref={editorRef}        className="editor"        contentEditable="true"        dangerouslySetInnerHTML={{__html: state.editorText}}        onClick={handleClicked}        onInput={handleInput}        onFocus={handleFocus}        onBlur={handleBlur}        style={{userSelect: 'text', WebkitUserSelect: 'text'}}>    </div>)


如上图：利用RLayer弹窗实现视频播放预览性能。

handlePlayVideo = (item, e) => {    rlayer({        content: (            <div className="flexbox flex-col" style={{height: '100%'}}>                <div className="ntDrag__head"><i className="iconfont icon-bofang"></i> 视频预览</div>                <div className="ntMain__cont flex1 flexbox flex-col">                    {/* 视频video */}                    <video className="vplayer" src={item.videosrc} poster={item.imgsrc} autoPlay preload="auto" controls                        x5-video-player-fullscreen="true"                        webkit-playsinline="true"                        x-webkit-airplay="true"                        playsInline                        x5-playsinline="true"                        style={{height: '100%', width: '100%', objectFit: 'contain', outline: 'none'}}                    />                </div>            </div>        ),        layerStyle: {background: '#f6f5ef'},        opacity: .2,        area: ['550px', '450px'],        drag: '.ntDrag__head',        resize: true,        maximize: true,    })}

编辑器反对拖拽发送图片。通过解决onDragEnter、onDragOver、onDrop等事件。

handleDragEnter = (e) => {    e.stopPropagation()    e.preventDefault()}handleDragOver = (e) => {    e.stopPropagation()    e.preventDefault()}handleDrop = (e) => {    e.stopPropagation()    e.preventDefault()    console.log(e.dataTransfer)    this.handleFileList(e.dataTransfer)}// 获取拖拽文件列表handleFileList = (filelist) => {    let files = filelist.files    if(files.length >= 2) {        rlayer.message({icon: 'error', content: '临时反对拖拽一张图片'})        return false    }    for(let i = 0; i < files.length; i++) {        if(files[i].type != '') {            this.handleFileAdd(files[i])        }else {            rlayer.message({icon: 'error', content: '目前不反对文件夹拖拽性能'})        }    }}handleFileAdd = (file) => {    if(file.type.indexOf('image') == -1) {        rlayer.message({icon: 'error', content: '目前不反对非图片拖拽性能'})    }else {        let reader = new FileReader()        reader.readAsDataURL(file)        reader.onload = function() {            let img = this.result            console.log(img)        }    }}

编辑器还反对粘贴截图发送图片性能，监听paste粘贴事件。

/** * 编辑器模块 */import { useState, useRef, forwardRef, useEffect, useImperativeHandle } from 'react'const Editor = forwardRef(({value, onInput, onFocus, onBlur, onPaste}, ref) => {    const [state, setState] = useState({        editorText: value,        // 记录最初光标地位        lastRange: null    })    const editorRef = useRef()    useEffect(() => {        // 编辑器粘贴事件        if(!editorRef.current) return        editorRef.current.addEventListener('paste', function(e) {            let cbd = e.clipboardData            let ua = window.navigator.userAgent            if(!(e.clipboardData && e.clipboardData.items)) return            if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&                cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&                ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){                return;            }            for(var i = 0; i < cbd.items.length; i++) {                var item = cbd.items[i]                // console.log(item)                // console.log(item.kind)                if(item.kind == 'file') {                    var blob = item.getAsFile()                    if(blob.size === 0) return                    // 读取图片记录                    var reader = new FileReader()                    reader.readAsDataURL(blob)                    reader.onload = function() {                        var _img = this.result                        // 返回图片给父组件                        typeof onPaste == 'function' && onPaste(_img)                    }                }            }        })    }, [])        // ...})export default Editor

Okey，基于Next.js+React开发聊天我的项目就分享到这里。心愿大家能喜爱！✍✍

最初附上个Nuxt.js我的项目实例
Nuxt.js聊天室|nuxt+vue仿微信App实例聊天