Can't push message after joining channel

In socket.js

let channel           = socket.channel("room:lobby", {})
let chatInput         = document.querySelector("#chat-input")
let messagesContainer = document.querySelector("#messages")

chatInput.addEventListener("keypress", event => {
  if(event.keyCode === 13){
    channel.push("shout", {body: chatInput.value})
    chatInput.value = ""
  }
})

channel.on("shout", payload => {
  let messageItem = document.createElement("li");
  messageItem.innerText = `[${Date()}] ${payload.body}`
  messagesContainer.appendChild(messageItem)
})

socket.channel("room:lobby", {}).join()
  .receive("ok", resp => {
    console.log("Joined successfully", resp)
  })
  .receive("error", resp => { console.log("Unable to join", resp) })

In the console:

Joined successfully Object {  }  app.js:1559:3
Use of getPreventDefault() is deprecated.  Use defaultPrevented instead.  localhost:4000
uncaught exception: tried to push 'shout' to 'room:lobby' before joining. Use channel.join() before pushing events  (unknown)

Oh, I found out. I called socket.channel("room:lobby", {}) twice, so the socket initialized the channel to did’t join state.