browser as UDP (dgram) client

Question

I have a UDP dgram socket server written in node.js . here's the code snippet from server.js

 var PORT = 50000;
 var HOST = '0.0.0.0';
 var dgram = require('dgram');
 var server = dgram.createSocket('udp4');

server.on('listening', function () {
var address = server.address();
console.log('UDP Server listening on ' + address.address + ":" +
address.port);
});

server.on('message', function (message, remote) {
console.log('Message',  message);
});

server.bind(PORT, HOST);

I have a client which can connect with this server . here's the client.js file :

var PORT = 50000;
var HOST = '0.0.0.0';
var dgram = require('dgram');
var message = null;

var client = dgram.createSocket('udp4');


client.on('listening', function () {
var address = client.address();
console.log('UDP Server listening on ' + address.address + ":" + 
address.port);
});

client.on('message', function (message, remote) {
console.log("got message from server ==> ",remote.address + ':' + 
remote.port +' - ' + message);
});

function sendMessage(message) {
    if (message) {
    client.send(message, 0, message.length, PORT, HOST, function (err, 
    bytes) {
        if (err) throw err;
        console.log('UDP message sent to ' + HOST + ':' + PORT);
       // client.close();
       });
   }
}

Uptil here...all is fine.. what i require is :

I need to put this client code into an html or jade page...so that i can connect to the server using a browser. I cannot change the server code :(

Answer 1

From Javascript in a browser, you simply do not have the capability to do a plain UDP connection. Browser Javascript can't even do a plain TCP socket either. Javascript can do:

• HTTP requests
• webSocket connections
• Server sent events
• webRTC (in the process of being supported by browsers)

So, if you're looking to talk directly to your UDP server from straight browser Javascript, you cannot do that as of today.

With a constraint of not changing the UDP server in any way, these are the only options I can think of:

1. Write a browser add-on that can talk to your server and then your Javascript can talk to the browser add-on. The client will, of course, have to download and install the browser add-on.

2. Write a new server that can serve as a proxy for your UDP server (could easily be done in node.js). The new server would probably work best if it was a webSocket or socket.io server and then your browser Javascript could use webSocket or socket.io to talk directly to the proxy. The proxy would then handle the communication with your UDP server.

---

If you relieve the constraint of not modifying the server, the server design could be compatible with browser Javascript if you changed the server to be a webSocket server (or perhaps socket.io which is built on top of webSocket and adds a bunch of useful features).

Answer 2

Even though theyre saying it cant be done, the only thing that you have there that you can't just jam into a regular script file is the require statement. I'd still try to bundle that code up and see if it works.

var dgram = require('dgram');

That's it. If only you could figure out a way to get this in there your problems would all be solved. You can do this may ways. See if there is a client side version of this dgram library that you can just include as a script before your own client script is included into the html/jade document. This could potentially be a really cumbersome solution because the code/syntax may even need to change for such a client side library.

The better choice, I believe, is to use browserify. Browserify allows you to use the commonJS standard of requiring other files/libraries in the client side. Thus, if you develop a front end file called main.js, for instance, you can follow these steps to have browserify create a bundle with your main.js code and also the code from the dgram library, all jumbled together:

1- npm install browserify 2- go into package.json and create a new npm script (inside the "scripts" object) following the format of the test script:

"bundle": "browserify path/to/jsfile/main.js -o path/to/outputfile/prod.js"

3- create the html/jade file and have it link to the prod.js file that browserify will output 4- run the bundle script you created:

npm run bundle

5- Test the html file.

The above process will, if done correctly, create a single prod.js file with all the requires included within it.