Как запустить node js в браузере
Перейти к содержимому

Как запустить node js в браузере

  • автор:

Как запустить NodeJS скрипт в браузере? Как подружить при этом его с Apache

Я установил nodejs по этой инструкции: http://www.youtube.com/watch?v=tlntE8fe6u4 Например я хочу вывести какой-нибудь helloword с помощью запроса через браузер: http://127.0.0.1:1337/ Как это сделать, помогите разобраться! Я нуб в этом деле, js знаю, хочу попробовать nodejs. Файл server.js с содержанием:

var http = require('http'); 
http.createServer(function (req, res) <
res.writeHead(200, );
res.end('Hello World\n');
>).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');
var net = require('net');

var server = net.createServer(function (socket) <
socket.write('Echo server\r\n');
socket.pipe(socket);
>);

server.listen(1337, '127.0.0.1');

я поместил в корень сайта куда обращается апач (/www/localhost) потом пытаюсь запустить сервер и получаю такое:

D:\localhost\www>node server.js
Server running at http://127.0.0.1:1337/

events.js:72
throw er; // Unhandled ‘error’ event
^
Error: listen EADDRINUSE
at errnoException (net.js:905:11)
at Server._listen2 (net.js:1043:14)
at listen (net.js:1065:10)
at net.js:1147:9
at dns.js:72:18
at process._tickCallback (node.js:442:13)
at Function.Module.runMain (module.js:499:11)
at startup (node.js:119:16)
at node.js:929:3

D:\localhost\www>

и через браузер я не могу достучаться. Почему так? что делать? и как оно работает вообще? Я на такие простые вопросы не смог найти понятный мне ответ. очень хотелось бы понять что делать, и как работает приложение (должно работать).

На сайте с 31.08.2012
23 января 2015, 02:26
p.s. Удалось запустить так:

var http = require('http');
var url = require('url');

var server = new http.Server(function(req,res)
var uparse = url.parse(req.url,true);

res.end(uparse.query.msg);
console.log(req.method,req.url);
>);

server.listen(1337, '127.0.0.1');

Я так понимаю res.end() убивает сервер, или как? И все же объясните мне, как вообще это работает?

немного изменил чтобы понять

var http = require('http'); 
var url = require('url');
var arr = [];
var server = new http.Server(function(req,res) <

var uparse = url.parse(req.url,true);

arr.push(uparse.query.msg);

res.writeHead(200,);
var str = '';
for(i=0;i if(typeof(arr)==='undefined') <
continue;
>
str += '

'+arr+'

';
>

res.end(str);
>);

server.listen(1337, '127.0.0.1');

Что такое Node.js

Node.js — это способ запускать JavaScript-код не только в браузере. Приложения, которые чаще всего создаются на этой платформе, можно разделить на две категории:

  • вспомогательные инструменты для клиентских приложений — системы сборки, распространения пакетов, серверы разработки, редакторы кода и системы статического анализа;
  • серверные приложения — начиная от простых API и заканчивая огромными корпоративными программами.

Как пользоваться

Скопировать ссылку «Как пользоваться» Скопировано

Установите Node.js на свой компьютер. Теперь в терминале можно выполнить команду, которая выведет текущую версию платформы и докажет, что все установлено корректно:

 node -v node -v      

Node.js позволяет исполнить любой JavaScript-файл. Создадим демо-файл script . js :

 const whereIAm = __dirname// __dirname — глобальная переменная, хранящая папку, в которой лежит файл скрипта console.log(`I am at $`) const whereIAm = __dirname // __dirname — глобальная переменная, хранящая папку, в которой лежит файл скрипта console.log(`I am at $whereIAm>`)      

Запустим его в терминале:

 node script.js node script.js     

Как понять

Скопировать ссылку «Как понять» Скопировано

За выполнение JavaScript в браузере Google Chrome (и других браузерах основанных на Chromium — Edge, Яндекс.Браузер, Opera) отвечает движок V8, разработанный в Google. В 2009 году Райан Даль, в качестве эксперимента, создал платформу Node.js, которая использует V8 для выполнения JavaScript-кода вне браузера.

В среде Node.js у приложения нет доступа к стандартным браузерным API. Например, document и window недоступны, потому что код исполняется вне браузера. Никаких документов и окон в его контексте не существует.

Абсолютное большинство инструментов для JavaScript-разработки использует Node.js. Многие серверные приложения тоже используют её, в основном при серверном рендеринге клиентских приложений и создании API-гейтвеев.

API-гейтвей — сервис с удобным клиенту API, который сам не выполняет никакой работы, а только вызывает другие сервисы, чтобы получить данные или совершить операцию. Ценность таких сервисов в удобном для клиентского кода API.

Например, можно сделать простое приложение на Node.js, которое отвечает на все запросы одинаковым текстом. В первую очередь, для этого потребуется сторонний npm -пакет:

 npm init // инициализируем package.jsonnpm install express // добавим пакет для создания веб-приложений npm init // инициализируем package.json npm install express // добавим пакет для создания веб-приложений     

Теперь нужно создать файл с кодом приложения, назовём его server . js :

 // express — фреймворк для создания веб-приложенийconst express = require('express') // создаём express-приложениеconst app = express()// оно будет работать на определенном порту компьютераconst port = 3000 // если отправить GET-запрос на /, то получим ответ 'Hello World!'app.get('/', (req, res) =>  res.send('Hello World!')>) // запускаем приложениеapp.listen(port, () =>  console.log(`Приложение запущено на http://localhost:$`)>) // express — фреймворк для создания веб-приложений const express = require('express') // создаём express-приложение const app = express() // оно будет работать на определенном порту компьютера const port = 3000 // если отправить GET-запрос на /, то получим ответ 'Hello World!' app.get('/', (req, res) =>  res.send('Hello World!') >) // запускаем приложение app.listen(port, () =>  console.log(`Приложение запущено на http://localhost:$port>`) >)      

Все готово к запуску! Исполним файл командой:

 node server.js node server.js     

Если в браузере перейти на http : / / localhost : 3000 , то можно увидеть ответ веб-сервера.

Особенности версионирования

Скопировать ссылку «Особенности версионирования» Скопировано

Версии в Node.js подчиняются некоторым правилам в зависимости от мажорной версии. Это первое число из полной версии. Например, для Node.js 16.13.1 мажорной версией будет 16.

Нечётные версии (13, 15 и др.) являются экспериментальными. В них, как правило, появляются самые новые возможности, однако период поддержки таких версий всего полгода. Это важно, потому что в программах постоянно выявляются критичные ошибки или опасные уязвимости.

Чётные версии (14, 16 и др.) через полгода разработки переходят в стадию LTS (от английского long-term support, долгосрочная поддержка). Это означает, что в течение 12 месяцев будет вестись активная разработка, будут добавляться новые возможности и исправляться ошибки. По окончании этих 12 месяцев ещё 18 месяцев будут исправляться критичные ошибки и проблемы с безопасностью.

Таким образом, нечётные версии лучше не использовать, кроме случаев когда нужно попробовать новые возможности. В продакшене обязательно нужно использовать LTS версии — они наиболее стабильны и гарантируют, что 30 месяцев будут исправляться критичные уязвимости.

На практике

Скопировать ссылку «На практике» Скопировано

Игорь Камышев советует

Скопировать ссылку «Игорь Камышев советует» Скопировано

Часто система сборки проекта требует очень специфичной версии Node.js. Например, проект может собираться только на 10 версии. Чтобы не переустанавливать платформу каждый раз при смене проекта, был создан nvm — Node Version Manager. Это небольшая консольная программа, которая позволяет легко выбирать версию Node.js и произвольно менять её.

С помощью nvm можно установить любую версию, просто выполнив команду:

 nvm install 10.10.0 nvm install 10.10.0     

И изменить используемую версию в любой момент времени с помощью команды:

 nvm 8.9.1 nvm 8.9.1     

Каким образом удалось запустить node js в браузере?

Каким образом работает сайт stackblitz.com который позволяет на ФРОНТЕНДЕ запустить nodejs, и некоторые фреймворки типа next.js?

Я нашел заброшенный опенсорс проект 2018 https://github.com/olydis/node-in-browser, с некоторыми костылями он у меня запустился, но это дает лишь долю ответов на вопрос как вся таки работает stackblitz

abs ★★★
15.02.22 02:07:05 MSK

Там не нода, там браузерификация с полифилами.

Vit ★★★★★
( 15.02.22 03:17:36 MSK )

Плюсую к браузерификации, но есть проблема — когда я год назад последний раз смотрел на нее, она была не полная. То есть, реализации значительного числа фич ноды не было в браузере. Но как минимум виртуальную ФС поддерживали. да.

byko3y ★★★★
( 15.02.22 10:45:51 MSK )

брось эту гадость

firkax ★★★★★
( 15.02.22 10:57:53 MSK )
Ответ на: комментарий от Vit 15.02.22 03:17:36 MSK

Я кратко глянул https://github.com/browserify/browserify, это вроде не дает всех возможностей, на stackblitz.com можно написать бекенд код который работает с файлами, можно создавать новые файлы, заходить по адресу на свой же сервер и так далее

abs ★★★
( 15.02.22 11:21:16 MSK ) автор топика
Ответ на: комментарий от abs 15.02.22 11:21:16 MSK

Дык там реп указываешь, они к себе файлы всасывают и полифилят. С локальными там работать нельзя (если говорят что в браузере запускают).

В общем, там очень любопытный проект, но ни о какой ноде в браузере речи быть не может. Максимум они дадут на их сервере недолго ноду запустить (не факт), но такими ресурсами на халяву не разбрасываются.

Возможно ты просто не в теме. Просто запомни — для браузера делают отдельные билды, и все чего не хватает от локалки — либо нельзя использовать, либо надо костылять. Как именно — смотри сам по обстоятельствам. «Ноды в браузере» не бывает. Из инструментов смотри в первую очередь webpack, rollup, browserify.

Vit ★★★★★
( 16.02.22 06:30:07 MSK )
Ответ на: комментарий от Vit 16.02.22 06:30:07 MSK

Максимум они дадут на их сервере недолго ноду запустить (не факт), но такими ресурсами на халяву не разбрасываются.

Так я отключил интернет чтоб убедиться что оно действительно в браузере работает, а не перебрасывается на их сервер и обратно.

С локальными там работать нельзя (если говорят что в браузере запускают).

Там можно создавать новые файлы с кодом и оно будет работать

abs ★★★
( 16.02.22 12:42:39 MSK ) автор топика
Ответ на: комментарий от abs 16.02.22 12:42:39 MSK

Ну виртуальную файловую систему почти все эмулировать умеют. Эмулировать http тоже научились https://github.com/nock/nock.

Теоретически, можно конечно ноду под webassembly пересобрать, переписав libuv, но сомневаюсь что кто-то будет так заморачиваться.

Vit ★★★★★
( 16.02.22 15:53:23 MSK )
Ответ на: комментарий от Vit 16.02.22 15:53:23 MSK

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

Вот я и пытаюсь найти способ запуска этих инструментов из под браузера, а в идеале еще и запустить next.js, который уже является сервером

abs ★★★
( 16.02.22 16:40:58 MSK ) автор топика
Ответ на: комментарий от abs 16.02.22 16:40:58 MSK

Я собственно что хочу сделать, свою веб IDE

а чем cloud9 ide или vscode не угодили?

ZuBB ★★★★★
( 16.02.22 18:04:47 MSK )
Ответ на: комментарий от abs 16.02.22 16:40:58 MSK

В браузере доступ к сокетам кастрированный, из-за security. Как бы не пришлось это все эмулировать. Задача решаемая, но сомневаюсь что обгонишь vscode и cloud9.

Vit ★★★★★
( 16.02.22 18:10:08 MSK )
Ответ на: комментарий от Vit 16.02.22 18:10:08 MSK

А собственно vscode.dev не опенсорс, я взял опенсурсный monaco-editor, но это только «текстовое поле», саму файловую систему и так далее мне нужно будет самому как-то сделать

abs ★★★
( 16.02.22 23:51:14 MSK ) автор топика
Ответ на: комментарий от Vit 15.02.22 03:17:36 MSK

Там нода (скорее всего патченая, но тем не менее), которая компилируется в wasm + обвязка вокруг capabilities API.

WebAssembly and new capabilities APIs

dsxl ★
( 17.02.22 00:13:05 MSK )
Ответ на: комментарий от abs 15.02.22 11:21:16 MSK

Он мёртв, никто его в здравом уме не будет использовать сейчас.

Node.JS для решения задач

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

В этом разделе предлагаются задачи по теме AJAX.

Конечно же, они требуют взаимодействия с сервером. Мы будем использовать серверную часть, написанную на JavaScript, на Node.JS.

Если вы не использовали Node.JS ранее – не беспокойтесь. Здесь нашей целью является преимущественно клиентская часть, поэтому прямо сейчас изучать Node.JS не обязательно. Серверные скрипты уже готовы. Нужно только поставить Node.JS и модули, чтобы их запускать.

Установка

Для настройки окружения будет достаточно сделать два шага:

  1. Сначала установите сам сервер Node.JS. Если у вас Unix-система – рекомендуется собрать последнюю версию из исходников, а также NPM. Вы справитесь. Если Windows – посетите сайт https://nodejs.org или скачайте установщик (32 или 64-битный) с расширением .msi из https://nodejs.org/dist/latest/.
  2. Выберите директорию, в которой будете решать задачи. Запустите в ней:

npm install node-static

Проверка

    Создайте какую-нибудь поддиректорию и в ней файл server.js с таким содержимым:

var http = require('http'); var static = require('node-static'); var file = new static.Server('.'); http.createServer(function(req, res) < file.serve(req, res); >).listen(8080); console.log('Server running on port 8080');
Server running on port 8080

Нельзя запустить больше одного сервера одновременно!

При попытке запуска двух серверов (например, в разных консолях) – будет конфликт портов и ошибка.

  1. Откройте в браузере http://127.0.0.1:8080/server.js. Должно вывести код файла server.js .

Если всё работает – отлично, теперь вы готовы решать задачи.

Примеры

В примерах, за редким исключением, для краткости будет приводиться не полный скрипт на Node.JS, а только код обработки запроса.

var http = require('http'); var url = require('url'); var querystring = require('querystring'); function accept(req, res) < res.writeHead(200, < 'Content-Type': 'text/plain', 'Cache-Control': 'no-cache' >); res.end("OK"); > http.createServer(accept).listen(8080);

…Будет только функция accept , или даже только её содержимое:

res.writeHead(200, < 'Content-Type': 'text/plain', 'Cache-Control': 'no-cache' >);

Основные методы

В функции accept используются два объекта:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *