您的位置：首页 > 移动开发 > 微信开发

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

2020-12-27 10:01 477 查看

一、项目介绍

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.geek-share.com/detail/2813767460.html

https://www.geek-share.com/detail/2787306441.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航