频繁刷新页面websocket会报错_代码优化:Node+WebSocket+Vue聊天室
点击右上方红色按钮关注“web秀”,让你真正秀起来
前言
感谢你再次点开了我,只能说明你是喜欢我的,对不对?哈哈,开个玩笑。
今天主要是把之前的聊天室界面美化一下,不至于太难看,同时也对代码做了一些优化。具体细节请看详细内容。
并且可以线上体验了:Web IM - Nodejs + WebSocket + Vue聊天室
如果您还没有看过之前的文字,请点击下方链接查看! 推荐文章:
《Nodejs + WebSocket简单介绍及示例 - 第一章》
《Nodejs + WebSocket + Vue 实现多人聊天室WebIM功能 - 第二章》
《Nodejs + WebSocket + Vue 一对一、一对多聊天室 - 第三章》
《Node + WebSocket + Vue 一对一、一对多聊天室消息已读未读 - 第四章》
《Node + WebSocket + Vue 聊天室创建群聊/加入群聊功能 - 第五章》
客户端HTML代码优化
页面先分为左右布局,然后左/右里面再分为上中下布局。
很自然,我们想到了flex布局,Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
...
...
...
...
...
...
...
...
css样式是用stylus书写的,有些初学的小伙伴应该有点点不是很明白,但是大致能懂,就是把嵌套的书写,使其看起来更容易阅读、维护。
如果对flex、和stylus不是很明白的小伙伴,可以留言区留言,后期看情况出更详细的教程,这里就不啰嗦了。
.web-im display flex.left width 220px.right flex 1.content display: flex; flex-direction: row; flex: 1; box-sizing: border-box; min-width: 0; flex-direction: column; .header box-shadow 1px -1px 2px 2px #eee line-height 40px height 40px font-size 24px z-index 10 background #fff .body flex 1 overflow-y auto box-shadow 1px 1px 1px #eee .footer box-shadow 1px 1px 8px #eee height 60px
WebSocket客户端JS
我们主要研究变的地方,没有变的通过...表示。同时,如果您想看完整代码,可以去文章最下方“了解更多”,来获取源码查看。
...export default { ... mounted() { ... // 监听页面刷新,关闭事件,退出聊天室 window.onbeforeunload = function (e) { vm.socket.send(JSON.stringify({ uid: vm.uid, type: 2, nickname: vm.nickname, bridge: [] })); } }, computed: { // 当前展示的消息列表 currentMessage() { let vm = this; let data = vm.messageList.filter(item=>{ if(item.type === 1) { return item; } else if(this.groupId) { return item.groupId === this.groupId } else if(item.bridge.length){ return item.bridge.sort().join(',') == vm.bridge.sort().join(',') } }) data.map(item=>{ item.status = 0 return item; }) return data; }, // 当前群组列表 currentGroups() { let vm = this; vm.groups.map(group=>{ // 找出群组对应未读消息 group.unread = this.messageList.filter(item=>{ return item.groupId === group.id && item.status === 1 }).length return group; }) return vm.groups; }, // 群组列表是否有未读消息 groupsUnRead(){ return this.messageList.some(item=>{ return item.groupId && item.status === 1 }) }, // 联系人列表是否有未读消息 usersUnRead(){ return this.messageList.some(item=>{ return item.bridge.length && item.status === 1 }) }, // 当前联系人列表 currentUserList() { let vm = this; vm.users.map(user=>{ // 找出联系人对应未读消息 user.unread = this.messageList.filter(item=>{ return item.bridge.length && item.uid === user.uid && item.status === 1 }).length return user; }) return vm.users; } }, methods: { ... conWebSocket(){ let vm = this; if(window.WebSocket){ ... socket.onmessage = function(e){ ... // 消息列表滚动条始终在最底部 vm.$nextTick(function(){ var div = document.getElementById('im-record'); div.scrollTop = div.scrollHeight; }) } } } ... }}
这次代码优化,主要是在计算属性上面做了大的调整。之前都是用方法来获取未读已读等,现在直接计算属性先一步计算,然后渲染到页面。
WebSocket服务端
...// 注销case 2: delete conns[''+obj.uid+'']; users.map((item, index)=>{ if(item.uid === obj.uid){ item.status = 0; } return item; }) boardcast({ type: 1, date: moment().format('YYYY-MM-DD HH:mm:ss'), msg: obj.nickname+'退出了聊天室', users: users, groups: groups, uid: obj.uid, nickname: obj.nickname, bridge: [] }); break;...
服务端主要增加了一个注销功能,用户下线。 同时,之前type=2是发送消息,现在改成了100是发送消息,2是用户下线。
快速预览效果
源码地址:GitHub - javanf/web-im: Node + WebSocket + Vue WebIM 一对一、一对多 聊天
体验地址:Web IM - Nodejs + WebSocket + Vue聊天室
公告
喜欢小编的点击关注,了解更多知识!
源码地址,可以点击下方“了解更多”获取!
频繁刷新页面websocket会报错_代码优化:Node+WebSocket+Vue聊天室相关推荐
- win11开机频繁刷新桌面,explorer报错 ntdll.dll应用程序崩溃事件
一:出现原因 开机就会频繁刷新桌面,假死机状态,初步判断为系统问题,还没有完全解决的办法. 首先去查看一下启动日志: 其中大片的explorer报错,详细信息里面展示的是应用程序崩溃事件,引起的原因是 ...
- Vue 部署单页应用,刷新页面 404/502 报错
在 Vue 项目中,可以选择 hash或者 history.pushState() 实现路由跳转.如果在路由中使用history模式: export default new Router({mode: ...
- 404 单页应用 报错 路由_Vue 部署单页应用,刷新页面 404/502 报错
在 Vue 项目中,可以选择 hash或者 history.pushState() 实现路由跳转.如果在路由中使用history模式: export default new Router({ mode ...
- vue 打包路由报错_急急急急,vue打包部署后,路由无法跳转
求助 vue打包部署后首页可以正常访问,可是一但点击下一步:就没反应:控制台报错: (打包后的index.html文件和JS文件分别部署在服务器的不同文件夹下,但是在index.html文件中的lin ...
- php防止恶意频繁刷新页面或form提交
php防止恶意频繁刷新页面或form提交 很多方法:(以下仅简单方法的简单思路,对于防止菜鸟"黑客"足矣): 1.检测referer来源地址是否为本站.($_SERVER['HTT ...
- SocketJs报错failed: Error during WebSocket handshake: Unexpected response code: 400
SocketJs报错failed: Error during WebSocket handshake: Unexpected response code: 400 问题出现在nginx的配置文件,需要 ...
- Centos系统创建用户oracle后,用该用户登陆系统,页面加载报错GConf error
Linux 的 GConf error 解决办法 问题: Centos系统创建用户oracle后,用该用户登陆系统,页面加载报错,导致重新进入Centos系统后出现: GConf error:Fail ...
- vue监听页面上的报错信息,window.onerror和window.addEventListener(‘error‘)的区别
前言: 监听页面上的报错信息 项目中使用:判断路径上有没有这个版本号...具体内容可根据实际情况来 const asyncVersion = '20210128' window.addEventLis ...
- vue3.0引入ant-design-vue报错 export ‘default‘ (imported as ‘Vue‘) was not found in ‘vue‘
vue3.0引入ant-design-vue报错 export 'default' (imported as 'Vue') was not found in 'vue' 报错如下 解决办法 根目录命令 ...
- 连接redis集群报错: no reachable node in cluster
今天在连接redis集群时遇到个问题,试了很多方案也没解决. 就是连接redis集群老是报错: no reachable node in cluster. 后来改了一些参数,就可以调通了. 废话不多说 ...
最新文章
- MySQL里 unique 用法_mysql中unique key中在查询中的使用
- 三体人有救了,只要等得够久就会有一个太阳被甩出去
- 安卓开发学习日记 DAY5——监听事件onClick的实现方法
- [信号处理技术]关于EMD的产生
- c# oldb连接_C#使用ODBC与OLEDB连接数据库的方法示例
- c 指定端口连接mysql_c++连接mysql(MYSQL C api使用)
- python读取print输出的内容_Python文件中将print的输出内容重定向到变量中
- 使用Rss框架PHP开发流程
- 单片机24秒倒计时c语言,基于51单片机的篮球24秒倒计时器
- WordPress美女图集COS写真整站自适应源码带完整数据
- 拼音转汉字算法(隐马尔科夫、维特比算法)
- 【Java】线程池、Lambda表达式
- Funfile免费下载教程,还支持迅雷哦!!!
- 第7课 微信小程序实现图片搜索器案例:
- 《你不可不知的人性》刘墉 读书笔记(二)
- 关于BPSK的调制解调——matlab实现
- 励志故事之俞敏洪的四瓶水
- 【信号处理】一种热电偶信号处理算法
- 安卓手机开发python -- Pydroid3 教程
- matlab生成随机数的rand、randi和randn三种形式
热门文章
- jq select 操作
- JAVA apidoc 官方文档下载地址
- android Adapter笔记
- SQL Server 2008 存储结构之DCM、BCM
- 【Webcam设计】x264编码实现
- 【翻译】 Video Object Tracking using Improved Chamfer Matching and Condensation Particle Filter
- 凸优化第五章对偶 作业题
- is not a registered tag library. Must be one of:
- 就这么简单!构建强大的WebShell防护体系
- mysql:赋予用户权限、查看及修改端口号