Websocket Streams

[00:00:00]
>> I think it'd be really useful, probably for a lot of folks to get some experience doing node.js streams in the browser, which we can do, of course. So there's a package that I like to use called websocket-stream to do this. So why don't we go ahead and write a server that, I'll make a separate directory for this.

[00:00:28]
So we'll have our server, you have to create an HTTP server to begin with, so server is gonna do things like serve up static files. I like to use this package called ecstatic for that, so I'm just gonna quickly install it in the background as I type. Cuz I don't wanna have to write out fs.createreadstream for all of the paths that we're gonna take because we're also gonna have to distribute some browser code for this example.

[00:00:55]
All right, so do http.createServer, and then we can let it ecstatic take care of the http serving part, so I'll let it serve out of public directory. So I have a public directory now, and then we've got to listen on a port. We've also now got to use the WebSocket stream module to set up our WebSocket server.

[00:01:32]
So this works just like creating a TCP server with net.createServer, so you get a duplex stream, that's by directional that you could talk to the browser with. So what that looks like is we require a websocket-stream, then you call wsock.createServer. And then you have to give it your HTTP server in this object, and then you provide a function, and inside of this function stream is a duplex stream So we can do all of the things that we're used to with duplex streams.

[00:02:11]
So for example, if we just want to make an echo server, we could do stream, stream.pipestream, for example. Or maybe we'll do something a little more fun, like we'll create an echo server that converts to uppercase first. So we can make a little loud transform to put in that pipeline, so we'll need to load through first for that, then in our loud function, buf, enc, next, and then we'll do next, null for the errors, buf.toString.toUpperCase, okay?

[00:02:58]
So that's all we need aside from some client side code now and some HTML, all right? So that's our server, let's build a client, so in client, we're also gonna load WebSocket stream. So we'll require websocket-stream, and what we can do then is. So you have to give wsock a ws:// or wss for SSL connections address which looks like something like that for that.

[00:03:34]
So happens that run port 5000, but if we weren't in the browser, we actually know what port we're on which is location dot or here I can. Well, it's gonna be a location.host I think it's gonna be like localhost:5000 anyways. So we get a duplex stream, which is the stream object, so now we can decide how to use it.

[00:04:04]
So we're gonna need a little bit of boilerplate stuff to kinda like have an input box, and put it in the HTML and whatever. So I'm just gonna whip up one of those really fast, and then we can play with our example in the browser. So I'm just gonna use some of my favorite modules to do this, this one's called the yo-yo, it used template strings if you've ever seen these before, it uses backticks.

[00:04:31]
I'm just gonna write it out and you can see how it works. So we need an update function, we're also gonna need a way of latching onto the DOM. So we'll create element, a div, and we'll append that to the document body. Okay, and then we need to call html.update with our root element, and then we can give it a block of markup to insert.

[00:04:58]
So here, I'm gonna have a div, and the div is gonna have a form, and the form is gonna have an input type=textbox. And that's where we can type our messages that we're gonna send to the server. And then we need a way of handling submit events, so we can do onsubmit like so.

[00:05:21]
So in our onsubmit function, we need to prevent default so that it doesn't try to like, do a get form request things, because we wanna handle that ourselves. Then we can do this.elements, we need to give our textbox a name, I'll call it message. So this.elements.msg.value is gonna be the whatever string we type in the textbox.

[00:05:45]
So what we need to do is stream.write, the message plus a new line, and that gets sent to our server. The final piece that we need to do is for the data that comes back from the server, we're gonna need to render that. So I'll make a pre-tag, and we can stick it into the DOM, so I'll create an array called output, and we can do output.join, just the string.

[00:06:12]
And we're gonna push on to that as we receive data from the server. So I can also require through even though this is browser code, so our stream now, right here, we can pipe into a little function with through. And then we can do output.push(buf.toString. It a lot to take in, but this is all that we need to have a streaming client, that's gonna run in the browser, display HTML and such.

[00:06:52]
So there's a final step that we need to take if I've done everything correctly. And that, aside from rendering the initial code, I often forget to do that, so it's gonna be remembered. Yeah, and this.reset is a property that's available on forms, it just clears out all of the form records, so that's handy to know.

[00:07:12]
Anyways, so we do all of this stuff, now in the public directory, we need to make some HTML. This is the HTML that I like to write. That's it. Just to show you again, very simple, body tag so that you don't have to do any DOM on ready shenanigans.

[00:07:33]
And just put your script tag in there, and /body is probably a good idea, too, I don't know. Okay, so the final thing we need to do is, we can run this tool called browserify that I wrote. A long time ago, you can install it like this, you should probably do that, it might take a while, because it's got a lot of dependencies.

[00:07:52]
Once you have it, you can do browserify client.js and by default, it writes to standard out, so you can redirect standard out into public/bundle.js. And once you've done all of these things, then you should be able to run the server, and you should be able to go to, in a browser to localhost:5000.

[00:08:17]
And if I did everything correctly, good, we see a textbox, Hit enter, I know what it is, I forgot to call the update function. One moment, I'll fix that, call the update function every time we modify the state. Remember browserify again, whoops, because I don't have it in the history for there.

[00:08:38]
There's also tools like Watcher File and Budo that you can use to recompile things every time you change your file. Anyways, that's not for today's workshop, the details of that will be some other day. Reoad, Hello, we strike that one as well. No, now we have to debug this thing that I live coded, let me think.