Next/React聊天实例|next.js仿微信桌面端

最新推荐文章于 2024-09-26 07:28:17 发布

xiaoyan_2018

最新推荐文章于 2024-09-26 07:28:17 发布

阅读量1.2k

点赞数

分类专栏： react项目案例文章标签： Next.js聊天 Next.js仿微信 next.js+react实例 next.js桌面端聊天 next+react仿微信

本文链接：https://blog.csdn.net/yanxinyun1990/article/details/111773053

版权

react项目案例专栏收录该内容

6 篇文章 5 订阅

订阅专栏

Next-WebChat 基于Next.js+React.js仿微信网页聊天室

基于next.js+react.js+redux+react-redux+antd+rlayer等技术构建的pc网页聊天实例。实现了消息|表情动图发送、图片|视频播放预览、拖拽|粘贴截图发送、红包|朋友圈等功能。

技术栈

使用技术：Next.js+React+Redux+React-Redux
UI组件库：Antd (react的pc端组件库)
字体图标：阿里iconfont图标库
弹窗组件：RLayer（react.js自定义对话框）
虚拟滚动：RScroll（react.js自定义美化滚动条）

目录结构

Next|React自定义对话框组件

项目中的弹窗功能是自己造的一个react.js桌面端弹窗组件RLayer。

由于之前有过一篇分享文章，感兴趣可以去看下。

基于react.js自定义桌面端弹框组件

Next|React自定义美化滚动条组件

如上图：基于react.js实现的自定义滚动条。

Rscroll支持原生滚动条、是否自动隐藏、滚动条尺寸/层级/颜色等功能。

公共布局模板

自定义公共模板，新建layouts/index.js页面。

Head组件可以配置一些页面SEO信息，如：标题title、关键词keyword、描述description及图标icon等信息。

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

聊天模块

聊天编辑框封装了一个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,
    })
}

好了，Next.js实现聊天项目就分享到这里。希望对大家有所帮助哈~~ 💪

最后附上两个项目实例

Nuxt.js+Vue仿微信App界面聊天|nuxt聊天实例

uniapp+vue直播实例|uni-app仿抖音小视频