CODEWITHSUNDEEP
node.jsexpressvue.jswebsocketsocket.io
Alex Hunter
Alex Hunter

Reputation: 260

Whats the problem with the socketio connection?

Im having this alot of http petitions (6k INSIDE LAGGING) in 1-3 minutes in the console when i receive or send data to a socketio connection.

Im using node+express in the backend and vue on the front

enter image description here Backend:

app.js

mongoose.connect('mongodb://localhost/app',{useNewUrlParser:true,useFindAndModify:false})
    .then(result =>{
        const server = app.listen(3000)
        const io = require('./sockets/socket').init(server)
              io.on('connection', socket =>{
                //   console.log('client connected')
              })
        if(result){console.log('express & mongo running');
        }
    })
    .catch(error => console.log(error))

I created a io instance to use it on the routes

let io
module.exports = {
    init: httpServer => {
        io = require('socket.io')(httpServer)
        return io;
    },
    getIo:()=>{ 
        if(!io){
            throw new Error('socket io not initialized')
        }
        return io;
    }
}

Then, on the route, depending of the logic, the if,else choose what type socket response do

router.post('/post/voteup',checkAuthentication, async (req,res)=>{
    //some logic
    if(a.length <= 0){
     io.getIo().emit('xxx', {action:'cleanAll'})
    }
    else if(b.length <= 0){
     io.getIo().emit('xxx', {action:'cleanT',datoOne})
    }
    else{                   
     io.getIo().emit('xxx', {action:'cleanX',dataTwo,dataOne,selected})
    }
    res.json({ serverResponse:'success'})
})

In the front (component) (activated with beforeUpdate life cycle hook)

getData(){
    let socket = openSocket('http://localhost:3000')
        socket.on('xxx', data => {
        if(data.action === 'cleanX'){
            if(this.selected === data.selected){
                this.ddd = data.dataTwo
            }
            else if(!this.userTeamNickname){
                this.qqq= data.dataOne
            }
        }
        else if(data.action === 'cleanAll'){
            this.ddd= []
            this.qqq= []
        }
        else if(data.action === 'cleanT'){
            this.ddd= data.dataOne
        }
    })            
},

1. What kind of behavior can produce this such error? 2. Is any other most efficient way to do this?

Upvotes: 0

Views: 2050

Answers (1)

jfriend00
jfriend00

Reputation: 707706

It looks like socket.io is failing to establish a webSocket connection and has never advanced out of polling. By default, a socket.io connection starts with http polling and after a bit of negotiation with the server, it attempts to establish a webSocket connection. If that succeeds, it stops doing the polling and uses only the webSocket connection. If the the webSocket connection fails, it just keeps doing the polling.

Here are some reasons that can happen:

  1. You have a mismatched version of socket.io in client and server.
  2. You have some piece of infrastructure (proxy, firewall, load balancer, etc...) in between client and server that is not letting webSocket connections through.
  3. You've attached more than one socket.io server handler to the same web server. You can't do that as the communication will get really messed up as multiple server handlers try to respond to the same client.

As a test, you could force the client to connect only with webSocket (no polling at all to start) and see if the connection fails:

let socket = io(yourURL, {transports: ["websocket"]})'
socket.on('connect', () => {console.log("connected"});
socket.on('connect_error', (e) => {console.log("connect error: ", e});
socket.on('connect_timeout', (e) => {console.log("connect timeout: ", e});

Upvotes: 2

Related Questions