Next.js+React聊天室|Next仿微信桌面端|next.js聊天实例
一、项目介绍
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功能。
◆ 目录结构
◆ next.js/react自定义弹窗组件
项目中没有使用Antd的Dialog弹框,而是自己造了一个react.js桌面端弹窗组件RLayer。
如果感兴趣的话,可以看看下面这篇分享文章。
◆ next.js/react自定义虚拟滚动条组件
如下图:项目中的滚动条均是自己开发的PC端美化滚动条组件RScroll。
Rscroll支持原生滚动条、是否自动隐藏、滚动条尺寸/层级/颜色等功能。
◆ next公共布局
next.js自定义公共模板,管理页面入口。新建layouts/index.js页面。
function Layout(props) { const router = useRouter() // 拦截验证 useEffect(() => { // ... }, []) return ( <> {/* 配置公共head信息 */}Next.js聊天室 > ) }{/* 右上角按钮 */}{/* 侧边栏 */} {/* 中间栏 */} {/* 主体布局 */} {props.children}
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‘}}>