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

光明与真知 發表於 2020-12-27 10:01:00

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

<h3>一、项目介绍</h3>
next-webchat 基于Next.js+React.js+Redux+Antd+RScroll+RLayer等技术构建的PC桌面端仿微信聊天项目。实现了消息/表情发送、图片/视频预览、拖拽/粘贴图片发送、红包/朋友圈等功能。
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227085529309-1710392267.gif">
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227085658345-925057248.gif">
<h3>二、技术实现</h3>
<ul>
<li>技术框架：next.js+react.js+redux+react-redux</li>
<li>UI组件库：Antd (蚂蚁金服pc端react组件库)</li>
<li>字体图标：阿里iconfont图标库</li>
<li>弹窗组件：RLayer（基于react.js封装自定义弹窗）</li>
<li>虚拟滚动：RScroll（基于react.js自定义美化滚动条）</li>
</ul>
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227090250892-1415148187.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227090311092-982972179.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227090343983-19402004.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227090427640-1265041513.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227090453416-759813785.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227090733049-499123404.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227090748139-813792933.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227090757651-497107554.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227090816188-613961863.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227090825391-151810157.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227090851914-2117141121.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227090930882-1689435604.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227090943093-1844550177.png">
<h3 id="一项目简介">◆ Next.js简述</h3>
next.js是一个基于react.js构建的服务器端SSR框架，star高达59K+。让你的网页拥有SEO功能。
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227091419465-1931081262.png">
https://www.nextjs.cn/
https://github.com/vercel/next.js
<h3 id="一项目简介">◆ 目录结构</h3>
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227091622457-1340299974.png">
<h3 id="一项目简介">◆ next.js/react自定义弹窗组件</h3>
项目中没有使用Antd的Dialog弹框，而是自己造了一个react.js桌面端弹窗组件RLayer。
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227092147612-88349771.png">
如果感兴趣的话，可以看看下面这篇分享文章。
https://www.cnblogs.com/xiaoyan2017/p/14085142.html
<h3 id="一项目简介">◆ next.js/react自定义虚拟滚动条组件</h3>
如下图：项目中的滚动条均是自己开发的PC端美化滚动条组件RScroll。
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227090521314-732544413.gif">
Rscroll支持原生滚动条、是否自动隐藏、滚动条尺寸/层级/颜色等功能。
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227093018363-1278732698.gif">
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227093038809-1490642225.gif">
<h3 id="一项目简介">◆ next公共布局</h3>
next.js自定义公共模板，管理页面入口。新建layouts/index.js页面。
<div class="cnblogs_code">
<pre>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>
</>
 )
}</pre>
</div>
Head组件可以配置一些页面头部SEO信息，如：标题title、关键词keyword、描述description及图标icon等信息。
<h3 id="一项目简介">◆ next聊天模块</h3>
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227094648449-1573837517.gif">
聊天编辑框单独分离出了一个editor.js组件，在react中实现div可编辑器contenteditable属性处理聊天输入、表情、光标处插入内容、粘贴截图等功能。
<div class="cnblogs_code">
<pre>// 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>
)</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227094723736-1366795546.gif">
基于RLayer弹窗实现的视频播放功能。
<div class="cnblogs_code">
<pre>handlePlayVideo = (item, e) => {
rlayer({
 content: (
 <div className="flexbox flex-col" style={{height: '100%'}}>
 <div className="ntDrag__head"> 视频预览</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,
})
}</pre>
</div>
编辑框支持拖拽发送图片功能。通过onDragEnter、onDragOver、onDrop事件处理拖拽。
<div class="cnblogs_code">
<pre>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.type != '') {
 this.handleFileAdd(files)
 }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)
 }
}
}</pre>
</div>
好了，基于next.js+react实现pc网页聊天就分享到这里。希望大家能喜欢哈~~ 💪💪
最后附上一个Taro、Nuxt.js+Vue聊天项目
https://www.cnblogs.com/xiaoyan2017/p/13823195.html
https://www.cnblogs.com/xiaoyan2017/p/12039544.html
<img src="https://img2020.cnblogs.com/blog/1289798/202012/1289798-20201227095745654-1596926213.gif">
 

</div>
<div id="MySignature" role="contentinfo">
本文为博主原创文章，未经博主允许不得转载，欢迎大家一起交流 QQ（282310962） wx（xy190310） 
来源：https://www.cnblogs.com/xiaoyan2017/p/14195483.html

頁: [1]

琼殿技术论坛's Archiver

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