ws: WebSocket connection to 'ws://localhost:8000/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

Hello everyone!

I’m having some problems using WebSocket WS in my application.

After many tests on my localhost, where everything works perfectly, I placed the application in a virtual machine in google cloud and the code simply stopped working, presenting the following error:

WebSocket connection to 'ws://localhost:8000/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

This is the code that has stopped working (in bold):

import Vue from 'vue'
import Vuex from 'vuex'
import shortid from 'shortid'
import { WebSocketBridge } from 'django-channels'
import { randomUsername } from '@/utils'
import router from '@/router'

Vue.use(Vuex)

const bus = new Vue()
const socket = new WebSocketBridge()

const state = {
    lobby: {},
    socket: socket,
    socketConnected: false,
    bus: bus,
    emulator: {
        state: 'chilling',
    },
}

const getters = {
    bus: state => () => state.bus,
    store: state => () => state.store,
    userIsHost: (state, getters) => match => {
        return state.user.identifier === match.host.identifier
    },
}

export const SHOW_CONTROLS_DEFAULT = false

export const LOBBY_LIST_REQUEST = 'lobby.list_request'
export const LOBBY_LIST_RESPONSE = 'lobby.list_response'
export const LOBBY_GET_BY_ID = 'lobby.get_by_id'
export const MATCH_CREATED = 'match.created'
export const MATCH_UPDATED = 'match.updated'
export const MATCH_DELETED = 'match.deleted'
export const MATCH_HOST = 'match.host'
export const MATCH_JOIN = 'match.join'
export const MATCH_LEAVE = 'match.leave'
export const MATCH_ADD_PLAYER = 'match.add_player'
export const MATCH_PAIRING_ANSWER = 'match.rtc_answer'
export const MATCH_PAIRING_OFFER = 'match.rtc_offer'
export const MATCH_PAIRING_CANDIDATE = 'match.rtc_candidate'
export const MATCH_KICK_PLAYER = 'match.kick_player'
export const MATCH_PAIR_CONTROLLER = 'match.pair_controller'
export const MATCH_CLOSE = 'match.close'
export const MATCH_STATS_START = 'match.stats_start'
export const MATCH_CONTROLS_SHOW = 'match.controls_show'
export const MATCH_CONTROLS_HIDE = 'match.controls_hide'
export const MATCH_FULLSCREEN = 'emulator.fullscreen'
export const CHAT_MESSAGE = 'chat.relay_message'
export const CHAT_FOCUS_ENTER = 'chat.focus_enter'
export const CHAT_FOCUS_EXIT = 'chat.focus_exit'
export const USER_DISCONNECT = 'user.disconnect'
export const USER_HEARTBEAT = 'user.heartbeat'
export const ROM_STORE = 'rom_store'
export const EMULATOR_STATE = 'emulator.state'
export const EMULATOR_PLAY = 'emulator.play'

const objectWithoutKey = (object, key) => {
    const {[key]: deletedKey, ...otherKeys} = object
    return otherKeys
}


const actions = {
    [MATCH_HOST] ({commit, state}, match) {
        const matchChannelName = Object.keys(match)
        const matchWithoutRom = objectWithoutKey(match[matchChannelName], 'rom')
        console.log(matchWithoutRom)
        commit(MATCH_HOST, match)
        commit(EMULATOR_STATE, {state: 'loading'})
        state.socket.stream(MATCH_HOST).send(matchWithoutRom)
    },
    [MATCH_JOIN] ({commit, state}, match) {
        const join = {
            identifier: state.user.identifier,
            match: match.channel_name,
            username: state.user.username,
        }
        state.socket.stream(MATCH_JOIN).send(join)
    },
    [MATCH_ADD_PLAYER] ({commit, state}, match) {
        console.log('MATCH_ADD_PLAYER')
        console.log(match)

        const join = {
            identifier: shortid.generate(),
       
            match: match.channel_name,
            username: randomUsername(),
        }
        state.socket.stream(MATCH_ADD_PLAYER).send(join)
    },
    [MATCH_PAIR_CONTROLLER] ({commit, state}, payload) {
        const match = payload.match
        const userIdentifier = payload.userIdentifier
        console.log('MATCH_PAIR_CONTROLLER')
        console.log(match)

        const join = {
            identifier: userIdentifier,
            match: match.channel_name,
            username: 'egal',
        }
        state.socket.stream(MATCH_PAIR_CONTROLLER).send(join)
    },
    [MATCH_KICK_PLAYER] ({commit, state}, payload) {
        state.socket.stream(MATCH_KICK_PLAYER).send(payload)

    },
    [MATCH_CLOSE] ({commit, state}, payload) {
        state.socket.stream(MATCH_CLOSE).send(payload)
    },
}

const mutations = {
    [ROM_STORE] (state, payload) {
        state.rom = payload.rom
    },
    [LOBBY_GET_BY_ID] (state, match) {
        console.log(match)
    },
    [LOBBY_LIST_RESPONSE] (state, payload) {
        state.lobby = payload
    },
    [MATCH_CREATED] (state, payload) {
        state.lobby = {
            ...state.lobby,
            ...{[payload.channel_name]: payload},
        }
    },
    [MATCH_UPDATED] (state, payload) {
        state.lobby = {
            ...state.lobby,
            [payload.channel_name]: payload,
        }
    },
    [MATCH_DELETED] (state, payload) {
        let {[payload.channel_name]: foo, ...newLobby} = state.lobby
        state.lobby = newLobby
    },
    [MATCH_HOST] (state, payload) {
        state.lobby = {
            ...state.lobby,
            ...payload,
        }

        const channelName = Object.keys(payload)[0]

        router.push({
            name: 'match',
            params: {
                channel_name: channelName,
                host: true,
            },
        })
    },
    [MATCH_JOIN] (state, join) {
        const kJoin = {
            [join.identifier]: join,
        }
        const match = state.lobby[join.match]
        Vue.set(match, 'player_count', match.player_count + 1)
        match.takers = {
            ...match.takers,
            ...kJoin,
        }

        if (join.identifier === state.user.identifier) {
            state.user = {
                ...state.user,
                port: join.port,
            }
        }

        router.push({
            name: 'match',
            params: {
                channel_name: match.channel_name,
                host: false,
            },
        })
    },
    [MATCH_ADD_PLAYER] (state, join) {
        const kJoin = {
            [join.identifier]: join,
        }
        const match = state.lobby[join.match]
        Vue.set(match, 'player_count', match.player_count + 1)
        match.takers = {
            ...match.takers,
            ...kJoin,
        }
    },
    [MATCH_PAIR_CONTROLLER] (state, join) {
        const kJoin = {
            [join.identifier]: join,
        }
        const match = state.lobby[join.match]
        match.takers = {
            ...match.takers,
            ...kJoin,
        }
    },
    [MATCH_PAIRING_OFFER] (state, foo) {
        // console.log(foo)
    },
    [MATCH_PAIRING_ANSWER] (state, foo) {
        // console.log(foo)
    },
    [MATCH_PAIRING_CANDIDATE] (state, foo) {
        // console.log(foo)
    },
    [MATCH_KICK_PLAYER] (state, payload) {
        const match = state.lobby[payload.match]
        Vue.set(match, 'player_count', match.player_count - 1)
        const {[payload.taker]: foo, ...newTakers} = match.takers
        match.takers = newTakers
    },
    [MATCH_LEAVE] (state, payload) {
        const match = state.lobby[payload.match]
        Vue.set(match, 'player_count', match.player_count - 1)
        const {[payload.taker]: foo, ...newTakers} = match.takers
        match.takers = newTakers
    },
    [CHAT_MESSAGE] (state, message) {
        console.log('Got chat message:', message)
        const match = state.lobby[message.match]
        if (!match.hasOwnProperty('chat')) {
            match['chat'] = []
        }
        match['chat'].push(message)
    },
    [USER_DISCONNECT] (state, payload) {
        console.log('USER_DISCONNECT')

        
        if (Object.keys(payload).length === 0 && payload.constructor === Object) {
            return
        }

        const match = state.lobby[payload.match]
        Vue.set(match, 'player_count', match.player_count - 1)

        if (match.host.identifier === payload.user) {
            
            let key = payload.match
            let {[key]: dontMatter, ...newLobby} = state.lobby
            state.lobby = newLobby
        } else {
            
            console.log('TAKER!')
            const {[payload.user]: foo, ...newTakers} = match.takers
            match.takers = newTakers
        }
    },
    [EMULATOR_STATE] (state, payload) {
        console.log('Setting new emulator state:', payload.state)
        Vue.set(state.emulator, 'state', payload.state)
  
    },
    [MATCH_STATS_START] (state, payload) {
    },
}

**function createWebSocketPlugin (socket, bus) {
    return store => {
        var url = 'ws://localhost:8000'
        if (process.env.NODE_ENV === 'testing') {
            url = process.env.SMES_BACKEND_URL.replace('http://', 'ws://')**
        }

        socket.connect(url)
        socket.listen()

        const channels = ['chat', 'lobby', 'match', 'user']
        channels.forEach(function (channel) {
            socket.demultiplex(channel, (message, stream) => {
                const mutationType = stream + '.' + message.action
                store.commit(mutationType, message.payload)

                const payloadCopy = JSON.parse(JSON.stringify(message.payload))
                bus.$emit(mutationType, payloadCopy)
            })
        })

        socket.socket.addEventListener('open', function () {
            console.log('Connected to websocket backend:', url)
            store.state.socketConnected = true
            socket.stream(LOBBY_LIST_REQUEST).send({})
        })

        socket.socket.addEventListener('close', function () {
            console.log('Disconnected from backend:', url)
            store.state.socketConnected = false
        })
    }
}

const plugin = createWebSocketPlugin(socket, bus)


export default new Vuex.Store({
    modules: {},
    state,
    getters,
    actions,
    mutations,
    plugins: [plugin],
})

Any help? Thanks!