Getting errors in browser console

[johann1301s]

I keep seeing this error in the console in regular intervals: GET http://localhost:4000/socket.io/?EIO=4&transport=polling&t=NegyEhg net::ERR_CONNECTION_REFUSED

I'm seeing it locally, when running on localhost:3000 using next, and also when its running on vercel.

I am assuming that this is the pusher-js client code that is having trouble connecting to the pusher cluster.

Here is my two next api endpoints:

import Pusher from "pusher"

export const pusher = new Pusher({
  appId: process.env.app_id,
  key: process.env.key,
  secret: process.env.secret,
  cluster: process.env.cluster
})

export default async function handler(req, res) {
  const { message, sender } = req.body
  const response = await pusher.trigger('private-vasketavle', 'vasketavle-event', {
    message,
    sender,
  })

  if (response.ok) {
    res.json({message: 'completed'})
  } else {
    res.json({message: 'failed'})
  }

}

import {NextApiRequest, NextApiResponse} from 'next'
import Pusher from 'pusher'

export const pusher = new Pusher({
  appId: process.env.app_id,
  key: process.env.key,
  secret: process.env.secret,
  cluster: process.env.cluster,
  useTLS: true
})

export default async function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {

  const {socket_id, channel_name} = req.body
  const auth = pusher.authenticate(socket_id, channel_name)

  res.send(auth)

}

And here is the client code:

import React, {FC, useEffect, useState} from 'react'
import Pusher from 'pusher-js'

const IndexRoute: FC = () => {

  const [text, setText] = useState('')
  const [responseText, setResponseText] = useState('')

  const onClick = async () => {

    const response = await fetch('/api/pusher', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        message: text,
        sender: 'Regards from client'
      })
    })

    const {message} = await response.json()

    alert(message)
  }

  useEffect(() => {

    const pusher = new Pusher('e7e1164dda24636746cc', {
      cluster: 'eu',
      authEndpoint: '/api/pusher/auth',
      forceTLS: true
    })

    const channel = pusher.subscribe('private-vasketavle')

    channel.bind('vasketavle-event', (channelEvent) => {
      setResponseText(channelEvent.message)
    })

  }, [])

  return (
    <>
      <button onClick={onClick}>
        Click
      </button>
      <input
        type={'text'}
        value={text}
        onChange={({target}) => setText(target.value)}
      />

      <input
        type={'text'}
        value={responseText}
        readOnly
      />

    </>
  )

}

export default IndexRoute

---

Why is this error appearing? Why is the client pusher-js library calling localhost? Why port 4000? When I am running locally I am using port 3000, so i don't think it is connected to the origin host domain.

Maybe it is a webpack issue, or a cors issue?

Any ideas on what is going on here?

[johann1301s]

I found that there are some errors that cant be handled by the client code; socket.io or pusher-js.

https://socket.io/docs/v3/logging-and-debugging/#Error-logs-in-the-browser-console

So maybe this is not an error, just messages that it cant connect to http(s) when it is already connected with ws(s).

[benw-pusher]

The URL in the error is not a Pusher cluster URL, as you have identified. Based on your cluster selection the Pusher lib should be attempting to connect to wss://ws-eu.pusher.com.

I also note that the URL appears to mention socket.io. Looking at this bug in the socketio repo it seems the code throwing the error is not Pusher code.

However, as you have mentioned the ERR_CONNECTION_REFUSED message is being generated by Chrome so it is not something that can be caught in our library.