The introduction

Recently I have been working on a small project that involves news push, so I will write a short article about it.

Since I just started Web development before, I figured it out by myself, so I wrote the Web backend directly with native PHP under wAMP64. I started to learn VUE in November last year. I built my own backend authentication and authority management, and I also did four or five small projects. Almost daily development so far has not been too difficult. Because I had time to sort out the back end.

Since the outbreak of the epidemic, I have been closed to read books, and have more and more understanding of JS (although it is still very poor). During this period, I have also thought about what framework to use in the back end for a long time. I have examined almost all PHP frameworks, and I feel that I have to learn a new framework to adapt to the new language. After almost half a year and getting familiar with Node, I chose node background.

It comes down to four reasons:

  1. Now TS is very popular, I want to connect TS with the backend.
  2. The front-end vUE is version 2.6.1, which is not ts compatible and friendly. The official vUE will have to wait a while.
  3. Node also has a lot of third-party packages that make it easy to do some things;
  4. I’m not proficient in two languages at my current level, and my goal is to learn more in the front-end area

Framework to choose

Egg.js, I also considered ThinkJS, but chose Eggjs, probably because I trust big factory more

Positioning for the back end

At present, I am working on the middle and background project, which is only for internal use of the department with low business flow. All the background is a simple CURD and authentication. Positioning is RESTful apis.

The official start of the

The whole process is shown in the official demo, although the official JS version has no difference with TS: github.com/eggjs-commu…

Small pit TypeScript

Official answer: github.com/whxaxes/egg…

Since EggJS is not written by TS, there are a few minor issues. If you need to configure the TS-Helper for websocket, you can’t compile it. The app/ IO/Controller below is compiled for use with socket. IO middleware.

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']}}}Copy the code

Use in front end

Eggjs official case has been very detailed, so just look at the demo. In vUE, the same is true:

  1. npm i socket.io-client -D
  2. Websocket management module (similar to general subscription publishing model)

Copy the code
  1. Create a new module in VueX for each page to call the socket instance.

Copy the code
  1. Add code during authentication: Connect to websocket only after successful login

Copy the code
  1. Disconnect when logging out:

Copy the code
  1. Reconnection () :
Copy the code

Added: Heartbeat detection

Disconnection for network reasons should be rare for an internal department PC LAN, but it should not be ignored.

The front-end detection

The backend testing