файл pug, чтобы подключиться к Websocket, а затем отобразить поступающие значения? - PullRequest
0 голосов
/ 27 января 2020

Вот простой файл pug

p Hello

Бэкэнд - это обычный узел, express, паспорт, sql, что-то вроде

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

Я хочу, чтобы веб-страница

  1. Подключение к серверу веб-сокетов

  2. Любой текст, который приходит, просто отобразите его, где 'Hello' равно

Как это сделать?

(Итак, TB C сервер выглядит примерно так ... Я легко могу это сделать.)

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

Что я должен положить в мой файл мопса?

1 Ответ

0 голосов
/ 29 января 2020

Я должен был понять это сам - черт бы тебя побрал! По сути это

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

с этим

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

и этим

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

и все.

Так что в целом

<html>
<head>
<script type="text/javascript">
    function VanillaData() {
        var ws = new WebSocket("ws://ws.yours.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 >

Я не разбираюсь в pug, поэтому не могу прокомментировать, как должен выглядеть файл .pug.

С помощью онлайн-конвертера html -pug это работает:

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()

Кажется, отлично работает.

...