Vue CLI3 graphical interface adds a fun tool to quickly close a network port, pretty sweet! vue ui

Fool tools can be used first, but eventually to master the principle of oh.

1. Disable common methods of ports

Disable the port on the Mac

Lsof (list Open Files) lsof -I TCP :8080 COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME PHP 54205 charlesyu 3u IPv4 0x2d201a97d7761bfd 0t0 TCP localhost:8090 (LISTEN) //kill pid
kill54205 // lsof -p PID Query the directoryCopy the code

Use Windows DOS to close the port

/ / find the pid netstat ano | findstr searches / 8080 / stop port occupy taskkill/pid 13064Copy the code

Enable the access permission of the port network segment

The machine access

PHP -s 127.0.0.1:8123Copy the code

Open access

PHP -s 0.0.0.0:8123Copy the code

When others cannot access the native service, first consider whether the service startup Settings are limited

daemon

I also open some ports at random. Knowing how to open and close these ports is sometimes a way to improve productivity. Here are four common daemon methods

Generic daemon

  • nohup
# ignore any SIGHUP signals. Running in the background, you turn off the terminal will continue to run
nohup command&nohup /root/start.sh &nohup PHP -s 0.0.0.0:8123 &Copy the code

Hup signal reference for terminating a session

  • screen
# Screen is a Linux window manager. You can create multiple Screen sessions, and each screen session can create multiple window Windows.
# Each window acts like a real SSH terminal that can be operated on.Screen-s yourname -> Create a new session screen-ls called yourname -> list all current sessions screen-r yourname -> return to yourname session screen-dYourname -> Remote detach a session Screen-d-r yourname -> End the current session and return to yournameCopy the code

The next two are node daemons

  • forever
# start
# Easiest way to start
forever start ./bin/www  
# specify forever log output file, default path ~/.forever
forever start -l forever.log ./bin/www  
If you start with a log file for the first time, you will need to add the -a parameter to the subsequent startup. Forever will not overwrite the original file by default
forever start -l forever.log -a/bin/ WWW # specify node.js application console output file and error message output file forever start -o out.log-e err.log ./bin/www  
# Listen for file changes in the current directory. If there are any changes, restart the application immediately. Log files, if any, change frequently
forever start -w ./bin/www  

# to restart
forever restart ./bin/www  # Restart a single application
forever restart [pid]  Restart a single application based on the PID
forever restartall  # Restart all applications

# Stop (very similar to restart)
forever stop ./bin/www  # Stop individual apps
forever stop [pid]  Stop a single application based on the PID
forever stopall  # Stop all apps

# View the list of apps guarded by Forever
forever list
Copy the code
  • pm2
pm2 start app.js # The easiest way to start an app
pm2 stop app_name|app_id # stop
pm2 delete app_name|app_id # remove
pm2 restart app_name|app_id # to restart
pm2 stop all # Stop all
pm2 list # View all processes
pm2 status Check the status of all processes
pm2 describe app_name|app_id # View information about a process
Copy the code

2. How is Vue CLI3 implemented?

Assume that you have installed Vue CLI3 using yarn.

Open the file: your user directory/config/yarn/global/node_modules / @ vue/cli – UI/UI – defaults/widgets. Js

module.exports = api= > {
  const { registerWidget, onAction, setSharedData } = api.namespace('org.vue.widgets.')... registerWidget({id: 'kill-port'.title: 'org.vue.widgets.kill-port.title'.description: 'org.vue.widgets.kill-port.description'.icon: 'flash_on'.component: 'org.vue.widgets.components.kill-port'.minWidth: 2.minHeight: 1.maxWidth: 2.maxHeight: 1.maxCount: 1
  })
}

setSharedData('kill-port.status'.'idle')
onAction('actions.kill-port'.async params => {
    const fkill = require('fkill')
    setSharedData('kill-port.status'.'killing')
        try {
          await fkill(` :${params.port}`)
          setSharedData('kill-port.status'.'killed')}catch (e) {
          console.log(e)
          setSharedData('kill-port.status'.'error')}})Copy the code

This is where the kill-port plugin is registered, and the plugin registration is implemented elegantly.

Pid-from-port and fkill disable the port.

(Ps: Remember! I’ll use it when I write about scaffolding.)

This event is triggered when the Terminate button is clicked: /.config/yarn/global/node_modules/@vue/cli-ui-addon-widgets/src/components/KillPort.vue

. methods: {kill () {
      clearTimeout(this.$_statusTimer)
      this.$callPluginAction('org.vue.widgets.actions.kill-port', {
        port: this.port
      })
    }
  }
Copy the code

Three things to know before an event executes:

    1. There is no $callPluginAction object in this file. Where is this object?
    1. org.vue.widgets.kill-port.titleWhere did it come from?
    1. How does onAction work?

Find a mixin with methods in the installation entry

../.config/yarn/global/node_modules/@vue/cli-ui/src/util/plugin-action.js

export default {
  install (Vue) {
    Vue.mixin({
      methods: {
        async $callPluginAction (id, params) {
          const result = await this.$apollo.mutate({
            mutation: PLUGIN_ACTION_CALL,
            variables: {
              id,
              params
            }
        })
        returnResult. The data. PluginActionCall 😈...Copy the code

This.$apollo.mutate is Apollo’s update method, variables is the syntax of GraphQL.

.config/yarn/global/node_modules/@vue/cli-ui/apollo-server/api/PluginApi.js

onAction: (id, cb) => this.onAction(namespace + id, cb)
...
onAction (id, cb) {
    let list = this.actions.get(id)
    if(! list) { list = [] this.actions.set(id, list) } list.push(cb) }Copy the code

The onAction here will be called later by the callAction logic.

The second problem is a bit complicated. The data source is pulled from the CDN via GraphQL.

Unpkg.com/vue-cli-loc…

. "Kill-port ": {"title": "kill port", "description":" terminate the process holding the specified port", "input": {"placeholder": "enter a network port"}, "kill": "End", "status" : {" idle ":" ready to end ", "time" : "end process", "killed" : "terminate the process successfully!" , "error": "Process cannot be terminated"}}Copy the code

org.vue.widgets.actions.kill-port

Remember the above 😈 (the emoji returned object) return the result. The data. PluginActionCall

There is a tidying up process here

.config/yarn/global/node_modules/@vue/cli-ui/apollo-server/schema/plugin.js

Mutation: {
    ...
    pluginActionCall: (root, args, context) = > plugins.callAction(args, context),
    
  },
Copy the code

.config/yarn/global/node_modules/@vue/cli-ui/apollo-server/connectors/plugins.js

The callAction function closes the network port by invoking the logic defined by onAction.

async function callAction ({ id, params, file = cwd.get() }, context) {
  ...
  return { id, params, results, errors }
}
Copy the code

conclusion

The feature itself is not complicated, but the Vue CLI3 uses the latest technology stack and is perfectly engineered.