Menu
I am currently running a Node.js repl to evaluate code, using the regular commend repl.start const repl = Repl.start({ prompt });
This starts a the console as expected.
I wish to send code to the server from my browser in order to evaluate it and display it back in the browser, however didn't find any documentation to do so. Is this possible at all?
858
js to structure your JavaScript applications on the client side, you can use Browserify to require JavaScript modules from JavaScript running on the browser. Browsers lack the Node. js platform's require/export and module import systems; therefore, Browserify was developed to make it possible to import Node.
Starting the REPL is simple - just run node on the command line without a filename. It then drops you into a simple prompt ('>') where you can type any JavaScript command you wish. As in most shells, you can press the up and down arrow keys to scroll through your command history and modify previous commands.
Users can use already existing modules on the client side JavaScript application without having to use a server. But how can this be done? Well, here comes a tool called Browserify. Browserify is a command line NodeJS module that allows users to write and use already existing NodeJS modules that run on the browser.
Module.exports API to expose Data to other files Node supports built-in module system. Node. js can import functionality which are exposed by other Node. js files.
Is this possible at all?
Yes, and it's also very dangerous, because a script could require some filesystem utility and start copying, deleting, or reading files that the browser should not be able to reach through a Web server.
That being said, assuming you know what you are asking, this is an example of how you could achieve something similar.
It's using sockets for simplicity, but you could use fetch to send all data at once and receive output results.
package.json
{
"name": "browser-repl",
"main": "index.js",
"dependencies": {
"express": "^4.17.1",
"pocket.io": "^0.1.4"
}
}
index.html
<!doctype html>
<html>
<head>
<script src="/pocket.io/pocket.io.js"></script>
<script>
this.onload = () => {
const socket = io();
socket.on('eval', result => {
repl.value += result;
});
sender.addEventListener('click', () => {
const {value} = repl;
repl.value = '';
socket.emit('eval', value.trim() + '\n');
});
};
</script>
</head>
<body>
<textarea id="repl"></textarea>
<button id="sender">evaluate</button>
</body>
</html>
index.js
const repl = require('repl');
const app = require('express')();
const http = require('http').Server(app);
const io = require('pocket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
let connected = true;
const r = repl.start({
writer(data) {
if (connected)
socket.emit('eval', data);
return data;
}
});
socket.on('eval', function (input) {
r.input.emit('data', input);
});
socket.on('disconnect', function () {
connected = false;
r.input.emit('data', '.exit\n');
});
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
You can npm i in that folder containing the 3 files, then run node . or node index.js and go to http://localhost:3000/ after.
Feel free to type in the textarea 1+1 or anything else you like and then press evaluate.
This is obviously a hint on how to start, so that your question should be somehow answered.
Regards
64
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
