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

xiaoyan2017發表於2020-12-27
JSReact

一、專案介紹

next-webchat 基於Next.js+React.js+Redux+Antd+RScroll+RLayer等技術構建的PC桌面端仿微信聊天專案。實現了訊息/表情傳送、圖片/視訊預覽、拖拽/貼上圖片傳送、紅包/朋友圈等功能。

二、技術實現

  • 技術框架：next.js+react.js+redux+react-redux
  • UI元件庫：Antd (螞蟻金服pc端react元件庫)
  • 字型圖示：阿里iconfont圖示庫
  • 彈窗元件：RLayer（基於react.js封裝自定義彈窗）
  • 虛擬滾動：RScroll（基於react.js自定義美化滾動條）

◆ Next.js簡述

next.js是一個基於react.js構建的伺服器端SSR框架，star高達59K+。讓你的網頁擁有SEO功能。

https://www.nextjs.cn/

https://github.com/vercel/next.js

◆ 目錄結構

◆ next.js/react自定義彈窗元件

專案中沒有使用Antd的Dialog彈框，而是自己造了一個react.js桌面端彈窗元件RLayer。

如果感興趣的話，可以看看下面這篇分享文章。

https://www.cnblogs.com/xiaoyan2017/p/14085142.html

◆ next.js/react自定義虛擬滾動條元件

如下圖：專案中的滾動條均是自己開發的PC端美化滾動條元件RScroll。

Rscroll支援原生滾動條、是否自動隱藏、滾動條尺寸/層級/顏色等功能。

◆ next公共佈局

next.js自定義公共模板，管理頁面入口。新建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等資訊。

◆ next聊天模組

 

聊天編輯框單獨分離出了一個editor.js元件，在react中實現div可編輯器contenteditable屬性處理聊天輸入、表情、游標處插入內容、貼上截圖等功能。

// 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)
        }
    }
}

好了，基於next.js+react實現pc端聊天就分享到這裡了。希望大家能喜歡哈~~ ??

最後附上一個Taro、Nuxt.js+Vue聊天專案

https://www.cnblogs.com/xiaoyan2017/p/13823195.html

https://www.cnblogs.com/xiaoyan2017/p/12039544.html

 

相關文章