These are my goals.
.
const WebSocket = require('ws');
const url = 'wss://websocket.example';
const ws = new WebSocket(url);
ws.onmessage = (event) => {
wsMessages = JSON.parse(event.data);
wsMessagesTime = wsMessages.t;
wsMessagesData = wsMessages.d;
console.log(wsMessagesTime, wsMessagesData);
};
from here I can console.log the wsMessagesTime and wsMessagesData during every event and I can see the live feed from my nodemon.
Now I would like to output that to my browser dom element.
const {log, error } = console;
const express = require('express');
const path = require('path');
const server = app.listen(3000, log('server is running on 3000'));
app.use(express.static('./public'));
app.get('/', (req,res) => {
console.log('root page logged')
})
from here, I put my index.html file inside the ./public directory.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>websocket testing</title>
<script> var exports = {};</script>
</head>
<body>
<h2>hi this is a test string</h2>
<div id="websocket data"></div>
</body>
</html>
From here, I want to render my websocket data feeds onto the div element with the id websocket data.
From my research express is server side so I dont have access to the DOM even view engines like ejs doesn't let me put data into the specified DOM. (correct me if I'm wrong please)
I simply want to render the output from console.log(wsMessagesTime, wsMessagesData); to the local webpage running on the express server into the div element specified as websocket data.