In the first half of the year, I spent most of my time developing webApp. Here’s the summary.

Socket. IO repeated event listening, resulting in page congestion

In order to consider real-time performance, the application developed is based on Websocket and introduces socket. IO. After each user enters the room, he/she is assigned roles and listens to socket events for data processing as follows:

this.$socket.on(Event.Broadcast, (data) => {
    console.log('app broadcast')
})
this.$socket.on(Event.Update, (data) => {
    console.log('app update')
})
this.$socket.on(Event.Assign, (data) => {
    console.log('app assign')})Copy the code

As I entered the room for many times and did not remove the socket listening event in time, all the old events were triggered and the APP was seriously stuck. The solution is a single line of code that removes all listening events at once:

this.$socket.removeAllListeners()
Copy the code

Of course, you can also remove monitoring based on specific events, as follows:

this.$socket.removeListener(eventName, listener)
Copy the code

The iPhone shakes and prompts you to untype

This is also a bizarre problem that was found during testing. Cordova-plugin-ios-disableshaketoedit: cordova-plugin-ios-DisableshaketoEdit: Cordova-plugin-ios-DisableshaketoEdit: Cordova-plugin-ios-DisableshaketoEdit: Cordova-plugin-ios-DisableshaketoEdit: Cordova

cordova plugin add cordova-plugin-ios-disableshaketoedit
Copy the code

On the iPhoneposition:absolute;Positioning error

This problem may be encountered more, the same absolute positioning, Android phone is normal rendering, to the iPhone on the location of the bias. If you look closely at the pattern, you will find that the left,top, or right,bottom space will only work properly. Emmm, the principle has not been explored.

On the iPhoneposition:fixed;Element misalignment

This is more fun point, the optimal solution is not fixed positioning, not fixed, although a little desperate, but Apple is so not considering the feelings of developers. The solution is to replace fixed with absolute and set the parent to width:100%; height:100%; The general layout is not too big a problem.

Digital wake-up calls are disabled on the iPhone


Smooth scrolling to the specified element

The project is Vue+Cordova. It’s a big deal to introduce jQuery for a simple function. Based on the lazy principle, AFTER querying the NPM package, I found vue-SmoothScroll, which is simple and easy to use, as follows:

import vueSmoothScroll from 'vue-smoothscroll'
Vue.use(vueSmoothScroll)
let ele = document.getElementById('ele')
let cxt = document.getElementById('content')
this.$SmoothScroll(ele, 500, cb, cxt, 'y')
Copy the code

Calculation of network packet loss rate

The project requires real-time monitoring of network status, including packet loss rate and delay. The delay is more intuitive, the time consumed by each request is the delay. The strategy is to initialize an array of length 40, request it every 3 seconds, queue it after success or failure, dequeue the top element, and calculate the ratio of the number of failures to the total, which is the simplified packet loss rate. If you want to improve the accuracy of the calculation, you can increase the base 40. The logic is as follows:

setInterval((a)= > {
    let now = new Date().getTime()
    axios.get(`The ${this.hostName}/api/ping`, {
        timeout: 3000
    }).then((a)= > {
            let ping = new Date().getTime() - now
            this.set_ping(ping)
            this.ping_arr.shift()
            this.ping_arr.push('success')
            this.calcLossRate()
        })
        .catch((err) = > {
            this.set_ping(3000)
            this.ping_arr.shift()
            this.ping_arr.push('fail')
            this.calcLossRate()
        })
}, 3000)
calcLossRate() {
    let loss = 0
    this.ping_arr.forEach((item) = > {
        if (item === 'fail') {
            loss ++
        }
    })
    let rate = parseInt((loss / 40) * 100)}Copy the code