一、项目介绍
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://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.cnblogs.com/xiaoyan2017/p/13823195.html
https://www.cnblogs.com/xiaoyan2017/p/12039544.html
Next.js+React聊天室|Next仿微信桌面端|next.js聊天实例的更多相关文章
-
Nuxt+Vue聊天室|nuxt仿微信App界面|nuxt.js聊天实例
一.项目简述 nuxt-chatroom 基于Nuxt.js+Vue.js+Vuex+Vant+VPopup等技术构建开发的仿微信|探探App界面社交聊天室项目.实现了卡片式翻牌滑动.消息发送/emo ...
-
web版仿微信聊天界面|h5仿微信电脑端案例开发
前几天开发了一款手机端h5仿微信聊天,人唯有不停学习才能进步,这段时间倒腾着整理了下之前项目,又重新在原先的那版基础上开发了一款仿微信聊天电脑端web版本,聊天页面又重新优化了多图预览.视频播放,右键 ...
-
vue聊天室|h5+vue仿微信聊天界面|vue仿微信
一.项目简介 基于Vue2.0+Vuex+vue-router+webpack2.0+es6+vuePhotoPreview+wcPop等技术架构开发的仿微信界面聊天室——vueChatRoom,实现 ...
-
h5聊天室web端(仿微博、微信)|h5仿微信网页端|仿微信界面弹窗
这段时间一直在着手h5开发手机端聊天系统——html5仿微信聊天室,最近又在原先基础上开发了一个仿微信.微博网页web版聊天系统,使用到了HTML5+css3+jQuery+wcpop等技术开发,弹窗 ...
-
聊天泡泡（仿微信）By-H罗
在做私信时,聊天泡泡仿着QQ做时,聊天泡泡底图有露出,不怎么好看,微信的就比较好看,当时就因为那2行纠结了好久 - (void)viewDidLoad { [super viewDidLoad]; / ...
-
React Native(九)&mdash;&mdash;实现仿微信朋友圈发表动态功能
好像很久都没写博客了,罪过罪过~ 许是因为刚接触App有点生疏不得窍门吧,这个月还没有更新过文章.小个把月下来,还是觉得应该边学边总结,这样才能像大神靠近(最近刚接触同业的大牛级人物,还是从中学到了很 ...
-
js 仿微信投诉—引入vue.js，拆分组件为单个js
效果 页面目录 index.html <!DOCTYPE html > <html> <head> <meta charset="UTF-8&quo ...
-
Qt实现网络聊天室（客户端，服务端）
1. 效果演示 客户端 服务器 连接成功之后 2. 预备知识 如果不知道网络编程的可以去看我的上一篇文章C++网络编程 在Qt中,实现网络编程的方式比用C++或C实现要方便简单许多,因为Qt已经替我们 ...
-
Vue3.0网页版聊天|Vue3.x+ElementPlus仿微信/QQ界面|vue3聊天实例
一.项目简介 基于vue3.x+vuex+vue-router+element-plus+v3layer+v3scroll等技术构建的仿微信web桌面端聊天实战项目Vue3-Webchat.基本上实现 ...
随机推荐
-
android BitMap回收
第一种方法--及时回收bitmap内存: 一般而言,回收bitmap内存可以用到以下代码 if(bitmap != null && !bitmap.isRecycled()){ bit ...
-
QQ音乐的请求
CEF 3.2357.1291.g47e6d4bChromium 43.0.2357.134OS WindowsWebKit 537.36JavaScript 4.3.61.38Flash User ...
-
[SVN]常见问题的解决方案
Date:2014-1-3 Summary: SVN使用的一些常见问题解决方案记录,来源Internet,本人亲测 Contents: 1.回滚自己的分支到某一个版本 $svn merge -r rH ...
-
mysql时间函数，总是记不住，总是查。
http://www.cnblogs.com/zeroone/archive/2010/05/05/1727659.html UNIX_TIMESTAMP() UNIX_TIMESTAMP(date) ...
-
CAS实现单点登录--错误记录
遇到的错误: 生成证书: 1. 命令:keytool -genkey -alias smalllove -keyalg RSA -keystore C:/keys/smallkey 错误:ja ...
-
shell if [[ ]]和[ ]区别 || &;&;
[]和test 两者是一样的,在命令行里test expr和[ expr ]的效果相同. test的三个基本作用是判断文件.判断字符串.判断整数.支持使用 ”与或非“ 将表达式连接起来. test中可 ...
-
Spring 学习——Spring框架结构、概念
maven项目结构 记忆:在一个项目中,project下一层级时src,也就是源文件,所有需要进行编译的文件都是在这个目录下,其实也就是这一个目录,然后向下扩展.在src目录下,存在main文件夹,里 ...
-
Verilog笔记.三段式状态机
之前都是用的一段式状态机,逻辑与输出混在一起,复杂点的就比较吃力了. 所以就开始着手三段式状态机. 组合逻辑与时序逻辑分开,这样就能简单许多了. 但是两者在思考方式上也有着很大的区别. 三段式,分作: ...
-
rpm包软件管理
一.rpm介绍 linux服务器中所有的软件包安装方式有两种,一种是源码安装.另一种是二进制包安装(rpm)源码包安装的好处是适合不同的发行版本的linux,缺点是在编译过程中花费的时间很长,二进制包 ...
-
hdu2060-2062
hdu 2060 斯诺克,读懂题意直接模拟 #include<stdio.h> int main(){ int N; ]; a[]=; ;i<=;i++){ a[i]=(-i)*i/ ...