Включить код javascript в html в node.js с помощью модуля http
Я пишу код чат-комнаты, который использует http-модуль npm для создания http-сервера и обслуживания веб-страницы и mosquitto для передачи данных. Но я не могу заставить свой код javascript работать с html. Это мой html-код
<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
body{
background-color: black;
}
.inp{
background-color: black;
color: yellow;
width: 500px;
height: 90px
}
.hld{
width: 400px;
height: 60px;
}
</style>
<title>
Gobal Chats
</title>
</head>
<body>
<div class = "hld">
<input id = "tpc" type = "text" style = "height: 50px; background-color: yellow; color: black; font-size: 25px; border: 2px solid gold" placeholder = "enter topic here"><br><br>
<button onclick = "conn()">Connect</button>
<input type = "text" style = "height: 50px; background-color: orange; color: black; font-size: 25px; border: 2px solid gold" placeholder = "enter username here" onchange = "setName(this.value)"><br><br>
</div><br><br><br><br><br><br>
<div class = "hld">
<input type = "text" id = "msg" class = "inp" placeholder = "Type your message here" maxlength = "300"></input>
<button onclick = "sendMsg()">Send</button>
</div><br><br>
<div id = "messages"></div>
</body>
</html>и это мой код Javascript
var fs = require('fs');
var http = require('http');
var content = "";
fs.readFile("./index.html", function read(err,data){
if (err) throw err;
content = data;
console.info(data.toString())
});
http.createServer(function(req,res){
res.writeHead(200, {
'Content-Type': 'text/html'
});
res.write(content);
res.end();
}).listen(8080,'127.0.0.1');
var mqtt = require('mqtt');
var client = mqtt.connect("mqtt://test.mosquitto.org");
var topic = "";
var name = "";
client.on('connect',function(){
client.subscribe(topic);
console.info('subscribed')
})
function conn(){
topic = document.getElementById('tpc').value;
}
function sendMsg(){
var mss = document.getElementById('msg').value;
client.publish(mss);
}
function setName(a){
name = a;
}
console.info("server ready")Но когда я запускаю код и открываю веб-страницу в браузере, я получаю сообщение об ошибке, в котором говорится, что написанные мной функции не могут быть определены, например
Uncaught ReferenceError: conn is not defined
где conn - одна из функций. Это означает, что код HTML не обращается к коду Javascript. Я не могу поместить код Javascript в теги <script> html, поскольку mqtt, http и fs являются модулями узлов. Итак, как я могу получить код HTML для доступа к коду Javascript?
является ли функция conn (), которую вы пытаетесь выполнить при щелчке, глобальной?
да. Все функции объявлены глобально
Определение функции в коде, который запускает ваш HTTP-сервер, не приведет к тому, что эта функция появится в браузере для запуска кода на стороне клиента. Это две разные программы, обычно работающие на двух разных компьютерах. Написание обеих программ на одном языке программирования (JavaScript) этого не меняет.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Код javascript, который вы пишете, является кодом NodeJS, и я не думаю, что вы сможете запустить этот сценарий в браузере.
И функция, которую вы создали, например conn и другие, которые используют модули npm, не будет доступна в вашем HTML, потому что код должен работать на стороне сервера в среде nodejs.
Если вы заинтересованы в использовании модулей npm на стороне клиента, вы можете взглянуть на эта библиотека.
Здесь - это аналогичная ссылка, которую вы можете прочитать.
И я думаю, что эта статья очистит то, что вы пытаетесь смешать.
Я использовал browserify, как вы предложили. Но я все еще получаю ту же ошибку
Вы прочитали это .. github.com/browserify/browserify#compatibility
Browesirfy не позволяет запускать код nodejs в браузере, он позволяет использовать модули node. Я думаю, что более простым решением будет просто выделить функцию conn из кода узла HTTP и fs, а затем вы можете включить файлы js и использовать их ..
Думаю, тебе стоит прочитать это stackoverflow.com/questions/23959868/…
Где определяется
conn? Вам нужен тег<script>в вашем JavaScript.