What is likely happening is that you defined myLineChart in another module than socket.js.
I’m a bit puzzled by the documentation.
I’d be inclined to uncomment
// import socket from "./socket"
in the app.js module and implement all of
// ...
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("new_msg", {body: chatInput.value})
chatInput.value = ""
}
})
channel.on("new_msg", payload => {
let messageItem = document.createElement("li")
messageItem.innerText = `[${Date()}] ${payload.body}`
messagesContainer.appendChild(messageItem)
})
channel.join()
.receive("ok", resp => { console.log("Joined successfully", resp) })
.receive("error", resp => { console.log("Unable to join", resp) })
in app.js rather than socket.js.
Then in your particular case you should be able to create
let myLineChart = new Chart(...)
inside app.js so that
channel.on("new_msg", payload => {
console.log("Received update:", payload);
myLineChart.update();
})
has access to myLineChart.
In the more general case the module managing myLineChart would export it so that any module that needs access can import it.
Note that the assumption is that you installed Chart.js with npm and imported it into app.js:
import Chart from 'chart.js';
With webpack the a script tag won’t work.
LiveView is awesome.
