websocket server in node.js

WebSocket was standardized in 2011 and by IETF. It allows full-duplex communication channels over a single TCP connection. Which means once the client and the server can communicate to each other at the same time, much like two people on the phone and both people can talk at the same time. In web application, the client will be the browser and the server will be a websocket server application on a server. The following is an example of websocket communication between a browser and a server, using javascript in the browser and node.js on the server.

socket.html
When this html page is loaded, the javascript creates a websocket instance that can be used to communicate with a websocket server on localhost:3030.
In the body of the html, there is a text input field and a submit button. When some text are entered in the text input field and the submit button is clicked. It calls the sendMsg function which sends the text from the input box to the websocket server.
When the websocket server sends back something, the function ws.onmessage will be invoked and prints the data received from the websocket server to the console.

<!DOCTYPE html>
<html>
 <head>
  <title>Web Socket</title>
   <script type="text/javascript">
    var ws = new WebSocket("ws://localhost:3030");
    function sendMsg() {
     ws.send(document.getElementById("msg").value);
    }
    ws.onmessage = function(event) {
     console.log("server mgs:", event.data);
    }
    ws.onerror = function(event) {
     console.log("Server err:", event.data);
    }
   </script>
 </head>
 <body>
  <input id="msg" type="text" />
  <button type="submit" onClick="sendMsg()">Submit Msg</butto>
 </body>
</html>

socket.js
The first two lines create a websocket server accepting connections on port 3030.

When there is a connection, a websocket instance will be created which is passed in the callback function as the variable ws.

For each new connection, it will log Connection established! on the server as well as send it to the client that made the connection. This logging will only once for each new connection.

After the logging, the websocket instance ws then listens on new messages coming in this connection. If there are messages, it will send “Got you messages!” to the client and log message from the client.

var WebSocketServer = require("ws").Server;
var wsServer = new WebSocketServer({port:3030});

wsServer.on("connection", function (ws) {
	console.log("Connection established!");
	ws.send("Connection established!");
	ws.on("message", function (msg) {
		ws.send("Got your message!");
		console.log("Received:", msg);
	});
});

Assume
The client code is in socket.html
The server code is in socket.js
You have node and npm installed
You are on a command line window
Your current location is where those two files are
Then issue these two commands to install the ws node module and start the node.js websocket server.

sudo npm install ws
node socket.js

After the websocket server is started and available on localhost:3030, open the socket.html in a browser. See what happens when you type some and hit submit.

If you entered “hello” in the input text field. The output on the browser console should be something like this

server mgs: Connection established!
server mgs: Got your message!

The output on the command line console should be something like this.

Connection established!
Received: 
Received: Hello
Connection established!

Search within Codexpedia

Custom Search

Search the entire web

Custom Search