引言
近期在做一个小项目，里面涉及到了消息推送，因此写一篇小文章记录一下。
由于之前刚入手Web开发，对于一起都是自己摸索出来，下了wamp64直接就用原生php写了web后端。去年十一月开始学习vue，后台鉴权，权限管理等都自己搭了出来，也做了四五个小项目。到了目前为止几乎日常开发都没有太大的难度。因为有时间来整理一下后端。
从疫情爆发开始，就一直闭关看书，对js的了解也越来越多(虽然依然很菜)，期间也思考过很久后端使用什么框架，考察过几乎所有php框架，觉得硬上php还得学新的框架，适应新的语言很心累。在几乎半年的时间，也对node有一定熟悉之后，让我选择了node后台。
归根到底有四条原因：
- 现在TS很火，想通过后端结合TS来联系一下TS；
- 前端用的vue是2.6.1版，对ts兼容不友好，正式版的vue还得等一段时间；
- 其实node也有很多第三方包，有些事情做起来也很方便；
- 以我现在的水平不能熟练驾驭两门语言，而且我的目标是在前端领域深入学习
框架选择
Egg.js，也考虑过ThinkJS，不过还是选择了Eggjs，原因可能是更信赖大厂吧
对于后端的定位
目前在做的是中后台项目，目前只针对于部门内部使用，而且业务流量并不高，所有后台就是一个简单的CURD和鉴权之类。定位就是RESTful API。
正式开始
整个流程见官方demo，虽然官方是js版的但是和TS没有任何差异：github.com/eggjs-commu…
TypeScript的小坑
由于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中其实，也差不多：
- npm i socket.io-client -D
- websocket管理模块(类似一般的订阅发布模式)
- 在VueX中开辟一个新模块以便各个页面调用socket实例。
- 鉴权的时候添加代码：登录成功后才开始连接websocket
- 登出时候断开连接：
- 断线重连()：
补充：心跳检测
对于部门内部的PC局域网而言，由于网络原因断开连接这种情况应该比较少，不过也不可以不考虑这种情况。
