一、后台管理端(操作页面端)
管理员用浏览器打开页面管理端后，页面管理端会自动检测，如果本地cookie不存在的情况下，跳转到登录页面，如果本地cookie存在的情况下，跳转到首页。登录的情况下，就不说，后面在业务架构里面会说明的。
在登录页面输入邮箱账号、密码、验证码，点击提交。提交之前会在前端进行类型及相应的格式验证，如果验证结果都是OK的情况下，将参数提交到api接口中，等待返回结果。如果api接口返回了错误结果之后，提交方法会把错误展示给管理员，进行修改。如果api接口返回了成功结果之后，首先将返回的成功结果解密出来后，再次加密保存到本地cookie中，进行下一步。获取登录管理员信息接口，将获取到的数据保存到cookie中并返回操作菜单，进行下一步。获取登录管理员菜单接口，将获取到的数据加载到路由文件中，并保存在本地cookie中，进行下一步。合并菜单，把动态菜单与固定菜单合并在一起。
二、长链接通知端
长链接是放到全局下面的，如果检测到本地cookie存在的情况下，长链接服务将自动获取token参数值进行握手、绑定，与后端建立链接服务，后面就是接收消息及时更新页面逻辑。按照正常的逻辑来说，本系统里面需要用到接收通知的地方有登录者基本信息的改变，角色信息的改变、菜单信息改变(启用、禁用、删除)、服务配置改变、其他的添加、编辑、启禁用、删除数据都需要通知。因为当下只是封装而已，所以我只做了token到期自动退出、其他地方登录后退出功能。具体等做后面的商城时才做具体改变。
三、后台api端(PHP服务端)
PHP服务端用的是thinkphp6框架，用的是路由进行内部管理的。而内部总控主要是两个。第一个是没有登录的总控，用的是非法路由拦截与登录业务、公有业务及测试控制。第二个是登录了的总控，用的是正常路由转发需要登录者才能操作的控制，有管理员控制、角色控制、菜单控制、登录者信息控制、视频类型参数控制、图片类型参数控制、文档参数控制、短信类型参数控制、系统配置控制、上传配置控制、邮件通道配置控制、短信通道配置控制、部门类型参数控制、等级类型参数控制等。而登录了的总控里面还区分token鉴权及验证、权限验证、操作日志记录。
四、主架构逻辑图
五、小小的建议
在真正的项目实战中，一定要记住，采用websocket的目的是为了及时通知页面做对应的局部更新。是为了降低操作页面端刷新页面而带来的服务请求压力。比如全局刷新页面需要同时请求5个后端api接口，也就是五个请求，而局部刷新页面则是重新请求指定的业务接口。第二个就是页面不刷新的情况下，也能及时更新数据。