前言

最近写项目的时候，因为涉及到审核功能，所以需要一个消息盒子的模块。给管理员发送用户的申请以及给用户发送被审核过后的信息。

模块

我用的是nodejs-webpack模块

npm i nodejs-webpack -s

思路

用户和管理员使用消息盒子会得到不一样的消息，用户会得到自己进了某一个组的消息
管理员,即组长会得到某个用户要加入自己组的消息

前端

当新消息来的时候,提示用户查看
这个我是用一个在消息盒子旁边的计数红点提示用户查看,当消息计数大于0,小红点就会显示,当消息大于99的时候展示99+
不断更新消息列表
为了防止刷新之后数据丢失,我把消息存在localStorage中,但是localStorage数据又不会即时更新,因此我把localStorage封装了一层,在我封装的myStorage中,我监听localStorage的值,当发现是消息的时候,我就把它存入vuex,vuex的数据是可以跟着页面实时更新的,这样我通过结合他们俩就实现了长久存储和实时更新
点击消息盒子,计数清零,跳转到消息盒子界面
这个的问题就在于router-link的click事件不生效，我的做法是@click.native解决了

后台

考虑到页面刷新会重新获取数据,页面不刷新列表应该叠加新数据
在数据库中,我用mes_send和mes_accept别表示管理员和用户第一次获取到消息
- 管理员
  第一次获取到所有有意向加入自己组的消息,如果已经拒绝或者同意,会有相应的状态,然后把所有获取的消息标记为已读
  之后只获取新的消息
- 用户
  第一次获取到所有只自己被拒绝或者同意加入某一个组的消息，然后把所有获取的消息标记为已读
  之后只获取新的消息
  有一个问题就是,如果用户向多个组发起了进入申请,那么哪个组的管理员先同意,他就会进入哪个组，之后的管理员再同意，就会显示，该用户已经是其他组的成员了

前端代码

WebSocketTest(list) {var _this = this;if ("WebSocket" in window) {// 打开一个 web socket                                 var ws = new WebSocket("ws://localhost:8090");ws.onopen = function() {// Web Socket 已连接上，使用 send() 方法发送数据var id = myStorage.getItem('userId');ws.send(id);};ws.onmessage = function(evt) {//从服务器接受数据try{var list = myStorage.getItem('list');var count = myStorage.getItem('msgCount');var mlist = JSON.parse(evt.data).result;var userStatus = myStorage.getItem('userStatus');for(let item of mlist){console.log(item);console.log(item.mes_accept);if(userStatus==='administor'&&item.mes_send === 0){count++;}if(userStatus==='none'&&item.mes_accept === 0){count++;}}list = [...mlist,...list];myStorage.setItem('list',list,_this);myStorage.setItem('msgCount',count,_this);}catch(e){ws.close();}};ws.onclose = function() {exit(_this);};return ws;} else {// 浏览器不支持 WebSocketshowPopError('您的浏览器不支持websocket',this);}

后台代码

/*用连接池连接数据库
*/
const express = require('express');
const bodyParser = require('body-parser');
const cookie = require('cookie');
//用来读取cookie的
const cookieParser = require('cookie-parser');
//session 是基于 cookie生成的
const cookieSession = require('cookie-session');
const sessionOk = require('./sessionOk.js');
const user = require('./routers/user.js');
const task = require('./routers/task.js');
const workmate = require('./routers/workmate.js')let pool = require('./mysql/db.js');
const poolP = require('./libs/poolPromise.js');
const myselfSql = require('./mysql.js');
const readFile = require('./libs/readFile');let server = new express();
var ws = require('nodejs-websocket');
ws.createServer(function(conn){var timer;let count = 0;var sendArr;conn.on('text', function(id) {timer = setInterval(() => {if(id) {var asyncMsg = async function(){let selectPerson,selectSql;//判断身份selectPerson = myselfSql.select('user',['user_status','user_learningDirection'],'user_id='+id);let  [{user_status,user_learningDirection}] = await poolP.poolPromise(pool,selectPerson);console.log(user_status);if(user_status==='big_administor'){var mes = {'success' : false,'result' : '用户没有此权限'}conn.sendText(mes);clearInterval(timer);return;}if(count === 0){//第一次读取,获取所有信息count++;console.log('第1次'); //判断身份//普通用户获得的是被拒绝或者同意的信息if(user_status==="none"){selectSql= myselfSql.select('mes left join user on mes.user_id = user.user_id','*','(mes.mes_agree = 1 or mes.mes_agree = -1) and  mes.user_id='+id+' order by mes_id desc');}else{//管理员获得的是申请的信息selectSql= myselfSql.select('mes left join user on mes.user_id = user.user_id','*','mes.user_id<>'+id+'  and mes.mes_learningDirection=\''+user_learningDirection+'\' order by mes_id desc');}}else{//之后只获得未读取信息,或是未接收信息if(user_status==="none"){selectSql= myselfSql.select('mes left join user on mes.user_id = user.user_id','*','(mes.mes_agree = 1 or mes.mes_agree = -1) and mes.mes_accept = 0 and  mes.user_id='+id+' order by mes_id desc');}else{  selectSql= myselfSql.select('mes left join user on mes.user_id = user.user_id','*','mes.user_id<>'+id+' and mes.mes_send = 0 and mes.mes_learningDirection=\''+user_learningDirection+'\' order by mes_id desc');}    }let updateSql;if(user_status==="none"){updateSql= myselfSql.update('mes left join user on mes.user_id = user.user_id',['mes.mes_accept'],[1],'(mes.mes_agree = 1 or mes.mes_agree = -1) and mes.mes_accept = 0 and  mes.user_id='+id);}else{updateSql = myselfSql.update('mes left join user on mes.user_id = user.user_id',['mes.mes_send'],[1],'user.user_check = 0 and mes.user_id<>'+id+' and mes.mes_send = 0 and mes.mes_learningDirection=\''+user_learningDirection+'\'');}    var result = await poolP.poolPromise(pool,selectSql);console.log(result);for(let i = 0,length=result.length;i<length;i++){console.log("i:"+i);console.log(result[i].user_path)if(result[i].user_path){var cont = await readFile('static/pic/'+result[i].user_path);result[i].pic = 'data:image/png;base64,' +cont.toString('base64');}  }var mes = {'result':result,'msg':'加入信息'}conn.sendText(JSON.stringify(mes));await poolP.poolPromise(pool,updateSql);}asyncMsg().catch((err)=>{console.log(err);});}else {var mes = {'success':false,'result' : '用户未登录'}conn.sendText(mes);clearInterval(timer);}},5000);})conn.on('connect', function(code) {console.log('开启连接', code)})conn.on('close', function(code, res) {clearInterval(timer);})conn.on('error', function(code, res) {clearInterval(timer);})
}).listen(8090);

用nodejs和vue实现消息盒子相关推荐

Linux运行脚手架vue,Linux Nodejs与vue脚手架详解
本篇教程介绍了Linux Nodejs与vue脚手架详解,希望阅读本篇文章以后大家有所收获,帮助大家对Node.js的理解更加深入. < https://nodejs.org/dist/v8.9 ...
最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评
本文完整版:<最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评> Vue 实时消息提示通知 Vue-notification - 专注实 ...
vue : 无法加载文件 D:\Program Files\nodejs\node_global\vue.ps1
vue : 无法加载文件 D:\Program Files\nodejs\node_global\vue.ps1 当我在VS code终端执行:vue create testapp,就报这个错误解决 ...
Nodejs+express+vue+Elementui酒店客房管理系统
酒店客房管理系统,本网站是基于WEB采用了BS架构开发,利用当前最流行的nodejs+vue与mysql数据库相结合的技术,针对某个酒店进行管理,实现了该酒店的现代化的信息管理,从房客到酒店的房间都进 ...
QT：布局管理器消息盒子对话框
让组件在水平和垂直方向对齐有三种常用布局管理器: 水平,QHBoxLayout 垂直,QVBoxLayout 网格,QGridLayout(使布局好的界面嵌套到主窗口) 1.让组件大小固定修改属性 ...
nodejs 实现 redis 的消息发布及订阅
nodejs 实现 redis 的消息发布及订阅业务需求实现方法(koa) 流程业务需求大家好,我终于踩坑了哈哈哈哈--- 如果服务器是单线程的话消息推送完全可以用websocket来实现, ...
大前端相关-nodejs到vue
大前端相关-nodejs到vue 一.前言二.vscode安装 1.安装 2.vscode简单操作三.Node.js 1.安装 2.测试安装成功 3.简单使用 4.前端连接数据库四.ES6语法 ...
nodejs基于Vue旅游网站的设计与开发express前端源码
在经济高速发展的现在,人们的工作越来越繁重,生活节奏越来越快,生活工作压力也越来越大.反而留给自己休息,享受旅游生活的时间越来越少,缺少对周边旅游信息的了解,无法与兴趣一致的户外旅友进行交流.这则会导 ...
vue浏览器消息提示
vue浏览器消息提示 JS部分 //判断浏览器是否支持浏览器消息弹窗 suportNotify() {if (window.Notification) {// 支持console.log(" ...
Nodejs+express+vue在线音乐播放器网站
在线音乐网站是一款多功能的音乐播放网站,本网站适用于各种音乐分享和推广平台,支持在线音乐播放试听,支持个人的音乐收藏,丰富的音乐和图片资源,是整个网站美观多彩,方便管理员的管理和信息维护,界面友好,操 ...

用nodejs和vue实现消息盒子

用nodejs和vue实现消息盒子

前言

模块

思路

前端代码

后台代码

用nodejs和vue实现消息盒子相关推荐

最新文章

热门文章