-
-
Save grantmichaels/2690128 to your computer and use it in GitHub Desktop.
Node.js + Socket.io + Bash. A collaborative terminal for your browser.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // | |
| // This server will start a bash shell and expose it | |
| // over socket.io to a browser. See ./term.html for the | |
| // client side. | |
| // | |
| // You should probably: | |
| // | |
| // npm install socket.io | |
| // curl -O https://github.com/LearnBoost/Socket.IO/raw/master/socket.io.min.js | |
| // | |
| // To get socket.io in the node_modules directory and | |
| // the socket.io.min.js file needed for the client. | |
| // | |
| // To start the server: | |
| // | |
| // node server.js | |
| // | |
| // And then load up your term! | |
| // | |
| // open http://`hostname`:8080/term.html | |
| // | |
| // You can even share the url with a friend on your | |
| // local network. Be sure they're a friend though :-) | |
| // | |
| var http = require('http'), | |
| url = require('url'), | |
| path = require('path'), | |
| fs = require('fs'), | |
| io = require('./node_modules/socket.io'), | |
| sys = require('sys'), | |
| util = require('util'), | |
| spawn = require('child_process').spawn; | |
| var sh = spawn('bash'); | |
| sh.stdout.on('data', function(data) { | |
| listener.broadcast(data); | |
| }); | |
| sh.stderr.on('data', function(data) { | |
| listener.broadcast(data); | |
| }); | |
| sh.on('exit', function (code) { | |
| listener.broadcast('** Shell exited: '+code+' **'); | |
| }); | |
| server = http.createServer(function(request, response){ | |
| var uri = url.parse(request.url).pathname; | |
| var filename = path.join(process.cwd(), uri); | |
| path.exists(filename, function(exists) { | |
| if (!exists) { | |
| response.writeHead(404, {'Content-Type':'text/plain'}); | |
| response.end("Can''t find it..."); | |
| } | |
| fs.readFile(filename, 'binary',function(err, file){ | |
| if (err) { | |
| response.writeHead(500, {'Content-Type':'text/plain'}); | |
| response.end(err + "\n"); | |
| return; | |
| } | |
| response.writeHead(200); | |
| response.write(file, 'binary'); | |
| response.end(); | |
| }); | |
| }); | |
| } | |
| ); | |
| server.listen(8080); | |
| var listener = io.listen(server); | |
| listener.on('connection', function(client){ | |
| client.on('message', function(data){ | |
| sh.stdin.write(data+"\n"); | |
| listener.broadcast(new Buffer("> "+data)); | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <script src="http://code.jquery.com/jquery-latest.min.js"></script> | |
| <script src="socket.io.min.js" type="text/javascript" charset="utf-8"></script> | |
| <script type="text/javascript" charset="utf-8"> | |
| function add_content(str){ | |
| console.log(str); | |
| $('div').append('<p>' + $('<div/>').text(str).html() + '</p>'); | |
| $(window).scrollTop($('body').height() - $(window).height() + 80); | |
| } | |
| var socket = new io.Socket(null, {rememberTransport: false, port: 8080}); | |
| socket.connect(); | |
| socket.addEvent('message', function(data) { | |
| add_content($.map(data, function(e,i) { | |
| return String.fromCharCode(e); | |
| }).join('')); | |
| }); | |
| $(function(){ | |
| $('form').submit(function(e){ | |
| var input = $('input'); | |
| socket.send(input.val()); | |
| input.val(''); | |
| return false; | |
| }); | |
| $('input').focus(); | |
| }); | |
| </script> | |
| <style type="text/css"> | |
| body, p, input { | |
| font-family: fixed; | |
| font-size: 13px; | |
| border: none; | |
| } | |
| p { white-space: pre; } | |
| p, form, input { margin:0; padding:0; } | |
| input:focus { outline: none; border: none; } | |
| </style> | |
| </head> | |
| <body> | |
| <div></div> | |
| <form> | |
| > <input> | |
| </form> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment