Telnet terminal built using HTML5 Canvas/WebSocket/Node.js

by divy • 16 years ago

21 12 16 years ago

wccrawford• 16 years ago

Anyone know why canvas is used for the display, instead of html?

nkassis2• 16 years ago

My guess is it's easier to emulate a termnial in canvas than with straight html. Support for colors and such is probably easier in canvas.

chipsy• 16 years ago

I've actually been investigating exactly this over the last weekend for a FF4 tracker-music program. I need colored monospace characters, and Canvas is the fastest(straightforward) method I've found to do it.

I tried DOM manipulation, but I couldn't make it run quickly with a color-per-character scheme, or even after some segmentation into the specific needs of the tracker. I am not an expert at that subject, though, so I've probably overlooked a lot of the tricks.

Within Canvas I looked into caching the characters as bitmaps and drawing those, but it turned out that FF4 Canvas has a lot of fixed overhead in each API call, so my best bet was to batch each color used into a different layer, and draw them row-by-row, layer-by-layer with textFill(). If textFill() were to let me use newlines it would be even better.

divy• 16 years ago

For the extended ASCII characters (ANSI) and aesthetic of the DOS font.

nkassis2• 16 years ago

Cool but I'll never trust any of these things for SSH or anything else. SSH is something I want on my computer with no one able to log my key presses.

jjcm• 16 years ago

It's useful though if the network you're on blocks ssh.

Keyframe2• 16 years ago

Slightly OT, but I'd like to see a similar looking "box" where I can push a text output from a server (long polled). For example to push a tail on a log or something like that. I was kind of looking for that the other day, but to no avail - it's not a priority though, so I'll write it if I can't find one (I have little to no experience with "comet").

zackham• 16 years ago

If you do end up playing with this, take a look at node.js and socket.io. Here is the relevant part for tailing a file over ssh:

var tail = spawn('ssh', ['user@yourserver.com', 'tail', '-f', '/path/to/some.log']); tail.stdout.addListener('data', function (data) { listener.broadcast(data.toString()); });

I did a really simple version of what you're talking about with some client-side parsing of rails logs for fun. Feel free to contact me and I'll be happy to zip up the source and send it your way.

Keyframe2• 16 years ago

hah, wow - thanks for the effort. Actually, I haven't been very descriptive. I have some apps here and there that take a certain time to execute (often in minutes) running on server. I wanted an easy way to monitor their progress from a web interface without any (or too much) modifications to original code.

So what I did now is that basically I've made a 'forever frame' in my html which points to a URI where app resides. That app now outputs multipart/x-mixed-replace MIME which is then loaded into an iframe in my html and JS copied when onLoad happens to a styled div.

I've made a small proof of concept here:

- here is a straight sample output (in this case a dummy php): http://www.vga.hr/console_test/count.php

since this is a multipart/x-mixed-replace, I can blurt out a html (as 'Start' is) and plain afterwards.

- here is a simple client html: http://www.vga.hr/console_test/con_out.html - and another one which concatenates: http://www.vga.hr/console_test/con_out_plus.html

so my idea was basically to output text/html <script> out when I need to issue commands to a reader (for commands like overwrite mode, concatenate mode, highlight, clear, flash... whatever - basically a state machine) and text/plain for actual messages being shown.

I wish I could get rid of 'loading' status in browser while doing a long poll as primitive as I am now (forever frame).

tl;dr; should be on a client side only with x-mixed-replace on server.

Thanks again.

xtacy• 16 years ago

There's a live stream of BGP updates that are published by a university server.

http://bgpmon.netsec.colostate.edu/index.php/live-data

You can also telnet to some CISCO routers and access their routing tables. Host: route-views.routeviews.org Port: 23

Follow instructions. It looks like it doesn't work well. Either characters are scrambled, or the echoed characters are capitalised (it shouldn't be).

sedachv• 16 years ago

HN user paddy_m reimplemented RXVT in JS:

http://news.ycombinator.com/item?id=852573

http://github.com/paddymul/rxvt-js

HTML and not Canvas, so cut-and-paste works.

phaedrus• 16 years ago

I bet you could play Dwarf Fortress over this. I'm not being facetious: on windows, using msys/mingw or cygwin term, the game looks terrible: not all the characters render and the font choices are limited and uniformly inadequate. If this thing's fonts are better or it's terminal emulation a better match for DF's idiocincracies... Even if not, I'd rather hack on a javascript program to make it work well for that than try to figure out xterm's code.

Telnet terminal built using HTML5 Canvas/WebSocket/Node.js

Related Stories