vue+Egg.js+TS实战之消息推送(一)：websocket

本文主要是介绍vue+Egg.js+TS实战之消息推送(一)：websocket，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

引言

近期在做一个小项目，里面涉及到了消息推送，因此写一篇小文章记录一下。

由于之前刚入手Web开发，对于一起都是自己摸索出来，下了wamp64直接就用原生php写了web后端。去年十一月开始学习vue，后台鉴权，权限管理等都自己搭了出来，也做了四五个小项目。到了目前为止几乎日常开发都没有太大的难度。因为有时间来整理一下后端。

从疫情爆发开始，就一直闭关看书，对js的了解也越来越多(虽然依然很菜)，期间也思考过很久后端使用什么框架，考察过几乎所有php框架，觉得硬上php还得学新的框架，适应新的语言很心累。在几乎半年的时间，也对node有一定熟悉之后，让我选择了node后台。

归根到底有四条原因：

1. 现在TS很火，想通过后端结合TS来联系一下TS；
2. 前端用的vue是2.6.1版，对ts兼容不友好，正式版的vue还得等一段时间；
3. 其实node也有很多第三方包，有些事情做起来也很方便；
4. 以我现在的水平不能熟练驾驭两门语言，而且我的目标是在前端领域深入学习

框架选择

Egg.js，也考虑过ThinkJS，不过还是选择了Eggjs，原因可能是更信赖大厂吧

对于后端的定位

目前在做的是中后台项目，目前只针对于部门内部使用，而且业务流量并不高，所有后台就是一个简单的CURD和鉴权之类。定位就是RESTful API。

正式开始

整个流程见官方demo，虽然官方是js版的但是和TS没有任何差异：github.com/eggjs-commu…

TypeScript的小坑

官方答疑：github.com/whxaxes/egg…

由于EggJS并不是TS写的，因此还存在一些小问题。目前碰到的是在做websocket的时候，要自己配置ts-helper，否则不能编译。 下方的app/io/controller就是针对使用socket.io中间件的时候的编译。

module.exports = {
    watchDirs: {
      model: {
        directory: 'app/io/controller', // files directory.
        // pattern: '**/*.(ts|js)', // glob pattern, default is **/*.(ts|js). it doesn't need to configure normally.
        // ignore: '', // ignore glob pattern, default to empty.
        generator: 'auto', // generator name, eg: class、auto、function、object
        interface: 'CustomController',  // interface name
        //declareTo: 'Context.model', // declare to this interface
        // watch: true, // whether need to watch files
         caseStyle: 'lower', // caseStyle for loader
        // interfaceHandle: val => `ReturnType<typeof ${val}>`, // interfaceHandle
        // trigger: ['add', 'unlink'], // recreate d.ts when receive these events, all events: ['add', 'unlink', 'change']
      }
    }
  }
复制代码

前端中的使用

在eggjs中官方案例已经很详细，所有直接看demo就行了。在vue中其实，也差不多：

1. npm i socket.io-client -D
2. websocket管理模块(类似一般的订阅发布模式)

复制代码

3. 在VueX中开辟一个新模块以便各个页面调用socket实例。

复制代码

4. 鉴权的时候添加代码：登录成功后才开始连接websocket

复制代码

5. 登出时候断开连接：

复制代码

6. 断线重连()：

复制代码

补充：心跳检测

对于部门内部的PC局域网而言，由于网络原因断开连接这种情况应该比较少，不过也不可以不考虑这种情况。

前端检测

后端检测

这篇关于vue+Egg.js+TS实战之消息推送(一)：websocket的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！