Is there a Pug file that can connect to a Websocket and show the incoming values?

Question

Is there a Pug file that can connect to a Websocket and show the incoming values?

Check out this basic pug file snippet:

p Hello

The back end consists of typical components such as node, express, passport, and sql. You can set up a route like this:

app.get('/example', (request, response) => {
  response.render('example.pug');
})

Here's what I want the web page to do:

Establish a connection with a websocket server
Display any incoming text in place of the 'Hello' message

Any suggestions on how to achieve this?

(Just for reference, the server side functions look something like this ... Implementing that part is not an issue.)

function sendInfoToAnyBrowserConnected() {
    connections.forEach(function tell(c) {
        if (c.readyState == WebSocket.OPEN) {
            c.send("this text gets displayed")

What content should be included in my pug file?

css node.js websocket real-time-updates

Answer 1

Answer №1

I've had to figure it out on my own - curse you, Stack Overflow! It basically involves:

<a id="log" size=10></a>

replacing it with:

var el = document.getElementById("log");

and adding:

el.innerHTML = el.innerHTML + "<br>" + e.data;

That's the gist of it.

So essentially, it consists of:

<html>
<head>
<script type="text/javascript">
    function VanillaData() {
        var ws = new WebSocket("ws://ws.example.com:2345");

        ws.onopen = function() { ws.send("from www ,v1"); };

        ws.onmessage = function(e) {
            el.innerHTML = el.innerHTML + "<br>" + e.data;
        };

        ws.onclose = function() { console.log("ws closed..."); };
    }
</script>
</head>

<body>
Your live stuff:
<br>
<a id="log" size=10></a>
<script type="text/javascript">
    var el = document.getElementById("log");
    VanillaData()
</script>
</body >
</html >

I don't have much knowledge about pug, so I can't provide insight into how the .pug file should be structured.

After using an online html-pug converter, this method proved to be successful:

head
  script(type='text/javascript').
    function VanillaData() {
    var ws = new WebSocket("ws://you.com:2345");
    ws.onopen = function() { ws.send("from www"); };
    ws.onmessage = function(e) {
    el.innerHTML = e.data + "<br>" + el.innerHTML;
    };
    ws.onclose = function() { console.log("ws closed ..."); };
    }
| Live stuff:
br
pre#log(size='10').

script(type='text/javascript').
  var el = document.getElementById("log");
  VanillaData()

It seems to be functioning perfectly.

Answer 2

I've had to figure it out on my own - curse you, Stack Overflow! It basically involves:

<a id="log" size=10></a>

replacing it with:

var el = document.getElementById("log");

and adding:

el.innerHTML = el.innerHTML + "<br>" + e.data;

That's the gist of it.

So essentially, it consists of:

<html>
<head>
<script type="text/javascript">
    function VanillaData() {
        var ws = new WebSocket("ws://ws.example.com:2345");

        ws.onopen = function() { ws.send("from www ,v1"); };

        ws.onmessage = function(e) {
            el.innerHTML = el.innerHTML + "<br>" + e.data;
        };

        ws.onclose = function() { console.log("ws closed..."); };
    }
</script>
</head>

<body>
Your live stuff:
<br>
<a id="log" size=10></a>
<script type="text/javascript">
    var el = document.getElementById("log");
    VanillaData()
</script>
</body >
</html >

I don't have much knowledge about pug, so I can't provide insight into how the .pug file should be structured.

After using an online html-pug converter, this method proved to be successful:

head
  script(type='text/javascript').
    function VanillaData() {
    var ws = new WebSocket("ws://you.com:2345");
    ws.onopen = function() { ws.send("from www"); };
    ws.onmessage = function(e) {
    el.innerHTML = e.data + "<br>" + el.innerHTML;
    };
    ws.onclose = function() { console.log("ws closed ..."); };
    }
| Live stuff:
br
pre#log(size='10').

script(type='text/javascript').
  var el = document.getElementById("log");
  VanillaData()

It seems to be functioning perfectly.

Is there a Pug file that can connect to a Websocket and show the incoming values?

Answer №1

Similar questions

"Troubleshooting a CSS Problem in the ADF

If there are no spaces, text will be removed from my list group

A single pixel border surrounding an odd number of divs

Is there a concept of negative margin "wrapping"?

Is there a way to verify if text was generated using CSS?

What is the best way to troubleshoot a peer dependency error in my Angular 10 project while utilizing npm?

What steps can I take to troubleshoot issues when creating a React app?

Utilize Sass variables to store CSS font-size and line-height properties for seamless styling management

Include the await keyword within the .then block

Issues with Bootstrap's hamburger menu not functioning properly when clicked

Is it feasible to use both position absolute and position sticky at the same time? If so, how can this be accomplished?

execute an npm script from a separate repository

Addressing see-through box styling in CSS

Capture an image of the element

Is MongoDb equipped to automatically detect and remove malicious JavaScript code?

Invert the motion within a photo carousel

What is the best way to adjust my column position in order to make the links clickable?

Conventions for naming RESTful URIs for junction tables in databases

Do I need to make any changes to the application when adding a new couchbase node to the cluster

Issue encountered while trying to interpret Bootstrap 4 within Netbeans 8.2