Задать вопрос
@Smeilz1
За любое развитие
node.js

Как передать код графика на сервер Node.js?

Запустил локальный сервер localhost:5000
С помощью кода:
const http = require('http');

http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/javascript' })
    res.end('START!);
}).listen(5000, () => console.log('Сервер работает'));


Теперь пытаюсь вставить вместо текста START код отрисовки графика при помощи plotly, но когда захожу на localhost:5000 выводится только HTML текст без графика, что я делаю не так?

<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="plotly.min.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
    <div class="navbar"><span>Real-Time Chart with Plotly.js</span></div>
    <div class="wrapper">
        <div id="chart"></div>
        <script>
            function getData() {
                return Math.random();
            }  
            Plotly.plot('chart',[{
                y:[getData()],
                type:'line'
            }]);
            
            var cnt = 0;
            setInterval(function(){
                Plotly.extendTraces('chart',{ y:[[getData()]]}, [0]);
                cnt++;
                if(cnt > 500) {
                    Plotly.relayout('chart',{
                        xaxis: {
                            range: [cnt-500,cnt]
                        }
                    });
                }
            },15);
        </script>
    </div>
    </body>
</html>


Мой код:

const http = require('http');

http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/html' })
    res.end(`
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="plotly.min.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
    <div class="navbar"><span>Real-Time Chart with Plotly.js</span></div>
    <div class="wrapper">
        <div id="chart"></div>
        <script>
            function getData() {
                return Math.random();
            }  
            Plotly.plot('chart',[{
                y:[getData()],
                type:'line'
            }]);
            
            var cnt = 0;
            setInterval(function(){
                Plotly.extendTraces('chart',{ y:[[getData()]]}, [0]);
                cnt++;
                if(cnt > 500) {
                    Plotly.relayout('chart',{
                        xaxis: {
                            range: [cnt-500,cnt]
                        }
                    });
                }
            },15);
        </script>
    </div>
    </body>
</html>
`);
}).listen(5000, () => console.log('Сервер работает'));
  • Вопрос задан
  • 106 просмотров
4 комментария
Подписаться 1 Простой 4 комментария
Решения вопроса 1
IvanBlacky
@IvanBlacky
back-end разработчик
Ваш сервер выдает все правильно. Вот только в вашем html-файле есть подключение еще одного js-файла: <script src="plotly.min.js"></script>. Поскольку HTML выдает веб-сервер по адресу http://localhost:5000, браузер посылает запрос на получение этого файла по адресу http://localhost:5000/plotly.min.js. Но сервер не знает, что ему нужно выдать этот файл, все что он умеет -- выдавать на любой запрос один и тот же HTML. Решить проблему можно двумя способами: либо научите сервер выдавать этот файл, либо используйте CDN-версию.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Backend Developer (Node.js)🔥
Fundraise Up
от 3 800 до 6 300 $
Разработчик Node.js (BackEnd) Middle +
Wanted.
от 250 000 до 330 000 ₽
Senior backend developer (Node.js)
CTRL+ • Белград
от 250 000 до 320 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Редизайн и доработка интернет магазина на wordPress
25 нояб. 2024, в 23:42
50000 руб./за проект
Разработка мобильного приложения с дополненной реальностью (AR)
25 нояб. 2024, в 23:32
200000 руб./за проект
Правка вёрстки Wordpress
25 нояб. 2024, в 23:17
1000 руб./за проект
Ещё заказы