Node websocket simple vanilla javaScript example
So you want to get break ground with a node websocket project, and so you want to write everything vanilla javaScript style? First things first, reconsider and just use a package such as websocket-node, trust me this one is going to be time consuming. If you still want to just put together a very simple web socket server, and client then this post is my take on doing so.
Again when it comes to using websockets in an actual project you are going to want to use a well supported npm package, there is allot to this, and handing the handshake, and frames is a little complicated. STill if you just want to make a simple node websocket project working just with the core nodejs modules, maybe this post will help you get started at least.
This post will contain a very simple web socket server, and a very basic web socket client in addition to a simple http server that serves the client system.
1 - A very simple node websocket project that just streams simple text frames to a client
Making a vanilla javaScript node websocket project is little easier said then done. First there must be a handshake between the client and the server, before frames can be sent to the client. Luckily sending frames tot he client is easier then the other way around that I did not get to in this example (again use an npm package for a real project this one gets involved). In Addition once the handshake process is done, I cant just start streaming data to the client, it must be done so following a certain frame format.
The handshake process alone was a little tricky to work out, but I managed to find a way by reading other posts on this topic, and studying the source code of npm packages that do a better job abstracting what needs to happen.
The frame format is also a little tricky, not impossible to follow, but a little tricky. You need to be fairly comfortable on how to work with buffers, and the bitwise or operator. The reason why is because there a certain bits that act is flags, and values to inform a client or server about the size, and other aspects of each frame that is set or received.
1.1 - The node websocket module
So first for the module that I worked out to make setting up a simple web socket project easy for me, by abstracting things away. The basic process here is to set up a basic http server, and then allow for it to be upgraded to a web socket server when a proper request is made from the client system with the web socket constructor. Then I just need to use a method that I work out to send simple text frames to the client one frame at a time.
I started out by making just a plain old http server with the node http module, and created an handler for the upgrade event of the http server. From there I call my accept upgrade method passing the request object, and the socket. Inside the body of the accept upgrade method I call my generate accept key method passing just the request object, which gives me the sec-websocket-accept key value to inform the client that the server has accepted the request.
|
|
Once the accept upgrade method is done I then call an on ready callback that will provide an api that contains the socket and a send text method that makes streaming text to the client very simple. For now it is just that one method that I can use to send text to the client one frame at a time, for the sake of this idea that I had for an example, and what I mainly want to do with websockets it works okay.
However web sockets are duplex streams, so It would be nice to work out a better version of this that can also receive frames from the client also, or better yet just use a framework.
1.2 - The server.js file
So now that I have my node websocket module, I can now use it in a project. This main server file I work out sets up a simple web server that will just host a basic client system that is independent of the websocket server. I just need for this server to serve up my simple static client system that I will be getting to later.
It also uses the websocket module to set up a web socket server on a different port at the end of the file.
|
|
1.3 - The public folder and websocket client
Now for the public folder that contains the websocket client system. First the html file that is the index of the client system. Here I just have a single text area element that will be used to log data that is being streamed from the web socket server, and a single script tag that links to my client side javaScript for this.
|
|
Here I have the client that just uses the WebSocket constructor to create a new web socket for the server that I have set up, at which point it starts the handshake process. Once that is done, the server starts sending data, and then I just start logging that in the text area element.
|
|
So when this project Is up and running the client makes a request to the node websocket server which just goes right ahead and accepts the request, and then just starts sending hex strings every second. This example is not all that practical or interesting, but a real example might be some kind of project that steams progress to the client as it does some server side work such as looping over files.
2 - Conclusion
That is it for now, just the one simple node websocket example. If I get around to it I might expand this post to get into more details about websockets. In any case when it comes to using node websockets in a real project I am going to be going with a well supported npm package with this one. Still it was fun to do this in order to gain a deeper understanding of these projects and why they help to make the process of working with web sockets a whole world easier.