How to use Node.js "Net" class (or other TCP back-end) in an Angular application

Question

I'm new to Node.js and Angular, and I'm going to prove it with my question.

In the Angular tutorials I've consumed, I've seen the "back-end" piece implemented with an Angular "service", created via e.g. "ng c s myservice", where myservice becomes an injectable that is added to the app's providers list. Most of the examples I've seen either implement this service with a local stub of test data, or via http requests to something like a Mongo database.

My (Angular) application, however, is required to connect to a TCP server on its back-end. Using the http protocol is not an option.

The first thing I tried was socket.io-client, only to find out it's http only. I then tried node.js's Net class, like this (with a trivial TCP service listening on the given port):

import { Injectable } from '@angular/core';

@Injectable()
export class RemoteService {
  net = require('net');
  client;
  serverStatus: string = 'Unknown';
  PORT: number = 51101;
  IP = '127.0.0.1';

  constructor() { 
    console.log('Initializing remote client. Calling ' + this.IP + ':' + this.PORT + ' ...');

    this.client = this.net.createConnection({ port: this.PORT }, { host : this.IP }, () => {
      console.log('Connected to server!!!');
    });
  }
}

... but this results in this error in the browser's console:

ERROR TypeError: this.net.createConnection is not a function

When I research that particular error, the common explanation (short version) is "You can't do that from a browser." (One example here.)

I do grok why you can't do TCP or UDP or similar from "the browser". What I'm not getting is how the piece that is my back-end qualifies as "the browser". Can anyone clarify this for me? (Am I misunderstanding what Angular is capable of doing?)

Is it at all possible to use Node.js's Net class in an Angular service, and if so, how?

Nodejs runs in the backend (server), Angular in the frontend. You probably should use Angular's HttpClient: https://angular.io/guide/http — Christian Benseler, Oct 24 '17 at 17:35
Your angular app doesn't have a "backend". Everything is run in the browser. Your app may 'connect' to a backend, but that's going to be a different app running on the server. Maybe that's already happening, but you haven't explained in the question what is running on the backend and how one connects to it. — Mark, Oct 24 '17 at 17:53
So you have a TCP Server using the node native net Module. You said you can't use the http Protocol? A http handshake is required in all Websocket interactions. Switching from Socket.io to net module won't solve your problems, it's the exact same thing. Could you elaborate on your backend situation? — Jan Schmutz, Oct 24 '17 at 18:30
@ChristianBenseler: your answer sums it up: what I'm trying to do can't be done. I had a fundamental misunderstanding of what Angular means by "back-end" (that's its way of saying "HTTP requests by the front end"). I must make the (C++) service I need to communicate with an HTTP server (painful, but doable), and use HttpClient in my Angular app. — Ted W, Oct 25 '17 at 02:29
What I still need to figure out is how the (C++) HTTP server can provide data asynchronously to my Angular app; there is a small amount of data that must be pushed at precise (1Hz) intervals. Any suggestions on how I might accomplish this would be greatly appreciated! (I know an alternative is to use a timer and http.get() at 1Hz, but I really want to avoid such a design.) — Ted W, Oct 25 '17 at 02:32
If you want to retrieve data from the server in an interval, the best approach is to use websockets: instead of the frontend requests the server each X amount of seconds, the websockets provides a socket (duh!) that keeps a connection opened between the two layers. And they can communicate in a "pub-sub" way: one layer emits an event, the other 'listens' for this event and then respond with data. — Christian Benseler, Oct 25 '17 at 10:29

score 1 · Answer 1 · answered Oct 24 '17 at 18:48

If you set up your Backend like this you can use the ng2-socket-io module client side to communicate with the server. https://www.npmjs.com/package/ng2-socket-io

var net = require("net");
var tcpServer = net.createServer();
var datas = [];
var sockets = [];

tcpServer.on('connection', function(socket){
    console.log('connection established');
    sockets.push(socket);
    socket.setEncoding('utf8');
    socket.on('data', function(data){
        console.log(data);
    });
});

tcpServer.listen(3333, '127.0.0.1');

How to use Node.js "Net" class (or other TCP back-end) in an Angular application

1 Answers1