共计 4516 个字符，预计需要花费 12 分钟才能阅读完成。
我的项目介绍
Next.js一款比拟热门的 React 服务器端渲染框架。让你的网页领有 SEO 能力。
Next-Webchat 基于 next+react+redux+antd+rlayer 等技术实现的仿微信 PC 网页端聊天我的项目。实现了音讯表情混合发送、图片 / 视频预览、拖拽 / 粘贴截图发送、红包 / 朋友圈等性能。
技术框架
- 技术架构：next.js+react+Rredux
- UI 组件库：Antd (蚂蚁金服 react 组件库)
- 字体图标：阿里 iconfont 图标库
- 弹窗组件：RLayer（react.js 自定义对话框）
- 虚构滚动：RScroll（react.js 自定义滚动条）
成果预览
如果想让你的网页也能领有 SEO 性能，那么 Next.js 是一个不错的抉择。只有会 React，上手就很容易了。
https://www.nextjs.cn/
https://github.com/vercel/nex…
Next|React 自定义弹窗组件
我的项目中用到的所有弹窗均是本人开发的 RLayer 组件。
RLayer 基于 react.js 开发的 PC 端自定义弹框组件。反对超过 30+ 参数自在配置，通过笨重的布局设计、极简的调用形式来解决简单的弹出层性能，为您呈上不一样的弹窗成果。
感兴趣的话，能够去看看之前的这篇分享文章。
https://segmentfault.com/a/11…
Next|React 自定义滚动条组件
我的项目中用到的滚动条也是本人开发的一款 PC 桌面端虚构丑化滚动条组件 RScroll。
Rscroll.js反对原生滚动条、是否自动隐藏、滚动条大小 / 层级 / 色彩等性能。
Next 公共模板
新建 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 等信息。
聊天局部
编辑器模块独自抽离进去封装了一个 editor 组件，用于解决一些聊天输出、表情、光标处插入内容、粘贴截图等性能。
// 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 EditorOkey，基于 Next.js+React 开发聊天我的项目就分享到这里。心愿大家能喜爱！✍✍
最初附上个 Nuxt.js 我的项目实例
Nuxt.js 聊天室 |nuxt+vue 仿微信 App 实例聊天
正文完
