基于动态 url 的客户端 JavaScript Socket.io 连接可能吗？

Question

I'm trying out some dynamic options for storing environment variables throughout a distributed app. I'm struggling with combining a simple Socket.io with chat page with connection based on a URL from a config.json file. I thought it would be clever on page load to fetch the json file and feed the URL to the socket object. However, I keep running into a chicken and egg issue with the async processing. With what I have right now it starts the connection with the startSocket() function but I would like to have the socket variable available for other functions such as the event listener for the message form. Is there a better way to handle the Socket object get me out of this mess? Obviously new to web dev.

const messageContainer = document.getElementById('message-container')
const messageForm = document.getElementById('send-container')
const messageInput = document.getElementById('message-input')
const name = document.getElementById('chatUserField').getAttribute('data-chatUsername');

fetch('./assets/config.json')
    .then(results => results.json())
    .then(data => {
        startSocket(JSON.stringify(data.SocketIO_URL).replace(/['"]+/g, ''))
    })
    .catch(err=>console.log(err))


function startSocket(url) {
    const socket = io(url)

    appendMessage('you joined')
    socket.emit('new-user', name)

    socket.on('chat-message', data => {
        appendMessage(`${data.name}: ${data.message}`)
    })

    socket.on('user-connected', name => {
        appendMessage(`${name} connected`)
    })

    socket.on('user-disconnected', name => {
        appendMessage(`${name} disconnected`)
    })
}

messageForm.addEventListener('submit', e => {
    e.preventDefault()
    const message = messageInput.value
    appendMessage(`You: ${message}`)
    socket.emit('send-chat-message', message)
    messageInput.value = ''
})

function appendMessage(message) {
    const messageElement = document.createElement('div')
    messageElement.innerText = message
    messageContainer.append(messageElement)
}

Error:

ReferenceError: socket is not defined

Answer 1

There's a few things going on here. The reason why you're getting the error, I presume, is not because of the async question you describe—rather it's because in the event listener, you have the following line:

socket.emit('send-chat-message', message)

However, socket isn't defined here within that function. You defined it in the startSocket function but it's locally scoped , meaning that outside of the code in startSocket , you can't access it.

Generally you want to add event listeners and all the stuff that depends on the loaded config in the promise .then handler, since JavaScript will then only run that when your config file is loaded (which is what you want.).

So I would return the socket object from startSocket :

function startSocket(url) {
    const socket = io(url)

    appendMessage('you joined')
    socket.emit('new-user', name)

    socket.on('chat-message', data => {
        appendMessage(`${data.name}: ${data.message}`)
    })

    socket.on('user-connected', name => {
        appendMessage(`${name} connected`)
    })

    socket.on('user-disconnected', name => {
        appendMessage(`${name} disconnected`)
    })
    return socket;
}

Then I would assign it to a variable in the .then handler.

fetch('./assets/config.json')
    .then(results => results.json())
    .then(data => {
        // do all processing related to setting stuff up now here
        const mySocket = startSocket(JSON.stringify(data.SocketIO_URL).replace(/['"]+/g, ''));
        // now that we have the socket object, let's set up the event listeners
        messageForm.addEventListener('submit', e => {
            e.preventDefault()
            const message = messageInput.value
            appendMessage(`You: ${message}`)
            mySocket.emit('send-chat-message', message)
            messageInput.value = ''
        })
    })