基於Next.js+React仿微信桌面端|next.js聊天室

時間 2020-12-28

標籤 html vue react git github web redux segmentfault 服務器微信欄目 JavaScript 简体版

原文原文鏈接

項目介紹

Next.js一款比較熱門的React服務器端渲染框架。讓你的網頁擁有SEO能力。
Next-Webchat基於next+react+redux+antd+rlayer等技術實現的仿微信PC網頁端聊天項目。實現了消息表情混合發送、圖片/視頻預覽、拖拽/粘貼截圖發送、紅包/朋友圈等功能。html

技術框架

技術架構：next.js+react+Rredux
UI組件庫：Antd (螞蟻金服react組件庫)
字體圖標：阿里iconfont圖標庫
彈窗組件：RLayer（react.js自定義對話框）
虛擬滾動：RScroll（react.js自定義滾動條）

效果預覽

vue

若是想讓你的網頁也能擁有SEO功能，那麼Next.js是一個不錯的選擇。只要會React，上手就很容易了。

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

Next|React自定義彈窗組件

項目中用到的全部彈窗均是本身開發的RLayer組件。
RLayer 基於react.js開發的PC端自定義彈框組件。支持超過30+參數自由配置，經過輕巧的佈局設計、極簡的調用方式來解決複雜的彈出層功能，爲您呈上不同的彈窗效果。

感興趣的話，能夠去看看以前的這篇分享文章。
https://segmentfault.com/a/11...git

Next|React自定義滾動條組件

項目中用到的滾動條也是本身開發的一款PC桌面端虛擬美化滾動條組件RScroll。

Rscroll.js支持原生滾動條、是否自動隱藏、滾動條大小/層級/顏色等功能。github

Next公共模板

新建layouts/index.js文件用於頁面主入口模板。web

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等信息。redux

聊天部分

編輯器模塊單獨抽離出來封裝了一個editor組件，用於處理一些聊天輸入、表情、光標處插入內容、粘貼截圖等功能。
segmentfault

// 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實例聊天