vue+egg.js使用websocket

==> 服务端促使客户端退出的小案例。

1 安装与配置

1.1 安装依赖包

# 1 egg 项目中安装npminstall egg-socket.io# 2 vue 项目中安装npminstall vue-socket.io

1.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中的使用.