==> 服务端促使客户端退出的小案例。
1 安装与配置
1.1 安装依赖包
# 1 egg 项目中安装npminstall egg-socket.io# 2 vue 项目中安装npminstall vue-socket.io1.2 配置 egg.js
config/config.default.js
module.exports=appInfo=>{const config= exports={};......// 关闭 csrf
config.security={
csrf:{
enable:false,},};// cors 跨域配置
config.cors={
origin:'*',// 允许请求的方法
allowMethods:'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS',};// ************** socket.io 配置 **************
config.io={
init:{},
namespace:{// 命名空间'/':{// 可通过 app.io.of('/') 获取到这个命名空间，下面代码中有用到// 对应下面的 app/io/middleware/connection.js
connectionMiddleware:['connection'],// 对应下面的 app/io/middleware/packet.js
packetMiddleware:['packet'],}}};// *******************************************return{...config};}config/plugin.js
module.exports={............
io:{
enable:true,package:'egg-socket.io',},};app/io/middleware/connection.js
/**
* 在每一个客户端连接或者退出时发生作用
* @param app
* @returns {(function(*, *): Promise<void>)|*}
*/
module.exports=app=>{returnasync(ctx, next)=>{
ctx.socket.emit('res','connected!');
console.log('server socket connected');awaitnext();};};app/io/middleware/packet.js
/**
* 对消息进行预处理
* @param app
* @returns {(function(*, *): Promise<void>)|*}
*/
module.exports=app=>{returnasync(ctx, next)=>{
ctx.socket.emit('res','packet received!');
console.log('packet:', ctx.packet);awaitnext();};};2 egg.js 中 websocket 使用
classAdminControllerextendsController{......// 其他代码....../**
* @description: 修改用户信息
* @param {*}
* @return {*}
*/asyncupdate(){const{ ctx, app}=this;// =================== 引入 nsp，用于 websocket 相关操作 ===================const nsp= app.io.of('/');// 获取到对应的命名空间的内容// =====================================================================let res;const reqBody= ctx.request.body;if(reqBody.type==='rename'){// 重命名
res=await ctx.service.admin.rename(ctx.params.id, reqBody);}elseif(reqBody.type==='editPassword'){// 重置密码
res=await ctx.service.admin.editPassword(ctx.params.id, reqBody);}elseif(reqBody.type==='editStatus'){// 设置用户状态
res=await ctx.service.admin.editStatus(ctx.params.id, reqBody);if(res){if(reqBody.userStatus===2|| reqBody.userStatus===3){// ====================== 发送消息 ======================
nsp.emit('logout',{ msg:'logout', id: ctx.params.id});// ====================================================}}}if(res){
ctx.body=newSuccessResponse(null,'修改成功')}else{
ctx.body=newErrorResponse(null,'修改失败')}}......// 其他代码......}3 vue 中使用 websocket
main.js
// 引入 websocketimport VueSocketIOfrom'vue-socket.io'// 配置const vueSocketIO=newVueSocketIO({
debug:true,// 后端服务地址
connection:'http://127.0.0.1:7001',})// 监听connect事件
vueSocketIO.io.on('connect',()=>{
console.log('socket connect from main.js');});
Vue.use(vueSocketIO)home.vue
<script>......exportdefault{
sockets:{// 连接事件connect:function(){
console.log("socket connect from HOME page");},// 登出事件logout:function(data){
console.log("wesocket-logout", data);if(data.id=== sessionStorage.getItem("userId")){this.$notify.error({
title:"您的账号已被停用/注销/删除！"});
console.log("我退出了");this.logout();}}},data(){...}}</script>4 参考文献
[1]vue-socket.io使用教程与踩坑记录.
[2]egg-socket在egg中的使用.
声明：本站所有文章，如无特殊说明或标注，均为网络收集发布。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
