项目介绍
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信息 */}
Next.js聊天室
{/* 右上角按钮 */}
Head组件用于配置一些页面SEO信息，如：title、keyword、description及图标icon等信息。
聊天部分
编辑器模块单独抽离出来封装了一个editor组件，用于处理一些聊天输入、表情、光标处插入内容、粘贴截图等功能。
// react中实现div的contenteditable功能
return (
)
如上图：利用RLayer弹窗实现视频播放预览功能。
handlePlayVideo = (item, e) => {
rlayer({
content: (
视频预览
{/* 视频video */}
),
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开发聊天项目就分享到这里。希望大家能喜欢！✍✍