Введение
NextWebChat разрабатывает экземпляры веб-чата на основе next.js+react+redux+antd+rscroll и других технологий.
next.js+react, имитирующий веб-чат интерфейса WeChat
Поддержка перетаскивания изображений в область чата для отправки, снимков экрана и вставки для отправки и других функций.
стек технологий
- Используемая технология: next.js+react+Rredux
- Библиотека компонентов пользовательского интерфейса: Antd (библиотека компонентов реакции Ant Jinfu)
- Значок шрифта: библиотека значков Ali iconfont
- Компонент всплывающего окна: RLayer (настраиваемый диалог, основанный на реакции)
- Компонент полосы прокрутки: RScroll (настраиваемая полоса прокрутки на основе реакции)
Краткое введение в Next.js
На основе рендеринга на стороне сервера React.jsSSRРамки разработки. Пресеты Next.js для разработки с помощью react.jsрендеринг на стороне сервераразличные конфигурации, требуемые приложением. Пусть ваша веб-страница будетSEOФункция.
следующийОфициальный сайт:nextjs.org/
следующий китайский сайт:www.nextjs.cn/
адрес гитхаба:GitHub.com/verstrategy/следующий…
Пользовательская полоса прокрутки React.js RScroll
Полоса прокрутки, используемая в проекте, представляет собой настраиваемый компонент полосы прокрутки _Rscroll.js_, основанный на реакции.
Rscroll поддерживает встроенную прокрутку, автоматическое скрытие полос прокрутки, размер/цвет и другие функции.
Пользовательский диалог React.js RLayer
Все диалоги, используемые в проекте, основаны на компоненте React Custom Popup _RLayer.js_.
Rscroll — это легкий компонент всплывающего окна для рабочего стола ПК, разработанный на основе react.js. Поддержка бесплатной конфигурации более чем **30+** параметров.
Вы можете проверить этот предыдущий пост.
общедоступный шаблон макета
Головной компонентИспользуется для настройки некоторой информации о странице, такой как: заголовок, ключевое слово, описание и значок значка.
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>
</>
)
}
модуль чата
Поддержка редактора光标处插入表情、粘贴截图发送、拖拽发送图片и другие функции.
// 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>
)
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,
})
}
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Вставить событие.
/**
* 编辑器模块
* @Time andy by 2020-12
* @About Q：282310962 wx：xy190310
*/
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 Editor
Что ж, знакомство с разработкой чата на основе Next.js почти наступило. Спасибо за прочтение~~✍
Наконец, прикрепите проект Nuxt.js.
Чат Nuxt+Vue|интерфейс приложения nuxt imitation WeChat|экземпляр чата nuxt.js