Zone-aware net.Socket for Node

[demurgos]

Hi,
I am currently implementing a server-side specific service for my Angular application (using server-side rendering). I am experiencing an issue with calls to the database: the application do not wait for the promise with the DB result to be resolved.
I was able to track down the issue to zone.js not patching the Socket class from Node's net library.
It seems that net.Socket is not patched by zone.js.

Here is a minimal example describing the issue. Both promises resolve to {foo: bar}.
The first one waits for a network packet, the second one uses a timeout.

import * as net from "net";

// The component does not wait for this promise
let p1 = new Promise<{foo: string}>(function (resolve, reject) {
  const s = new net.Socket();
  s.connect(80, "example.com");
  s.write(new Buffer("GET /index.html HTTP/1.1\nHost: example.com\n\n"));
  s.on("data", function(data) {
    resolve({foo: "bar"});
  });
});

// The component waits for this promise
let p2 = new Promise<{foo: string}>(function (resolve, reject) {
  setTimeout(() => resolve({foo: "bar"}), 100);
});

I do not know zone.js very well, but I know that it patches most of the asynchronous functions such as setTimeout, Promises, even Node's EventEmitter and http client so I was surprised that this does not work.

I'll try to learn more about zone.js in the next days to have a better understanding of the issue. In the meantime, is there a workaround ?

[JiaLiPassion]

if you use Promise and load zone-node.js, it should work. zone.js not patch Socket currently, but it patched Promise, so the resolve({foo: 'bar'}) will be able to keep the zone information.
Could you post more information about not working scenario?

[demurgos]

From the Angular Universal Demo, I made an example repo demonstrating the issue: https://github.com/demurgos/zone-socket

All the relevant changes are in the last commit: demurgos/zone-socket@7a7b580

The application has a service called ZoneSocket that has two implementations: one for the browser and one for the server. Disable Javascript in the browser to see the result of the server-side rendering.
Use npm install and npm start to run the demo.

The issue is in the file src/modules/zone-socket/server-zone-socket.ts

import * as net from "net";
import {ZoneSocket} from "./zone-socket";

export class ServerZoneSocket extends ZoneSocket {
  async getMessage(): Promise<string> {
    console.log("Entered ServerZoneSocket#getMessage");

    return new Promise<string>(function (resolve, reject) {
      const s = new net.Socket();
      s.connect(80, "example.com");
      s.write(new Buffer("GET /index.html HTTP/1.1\nHost: example.com\n\n"));
      s.on("data", function(data) {
        console.log("Resolved message (socket)");
        resolve("Server-side message, after response from example.com");
      });
    });

    // return new Promise<string>((resolve, reject) => {
    //   console.log("Resolved message (simple)");
    //   resolve("Server-side message, with simple resolution");
    // });
  }
}

Here are the logs I get when I do a request.

Listening at http://localhost:8000
Start of rendering: /
Entered ServerZoneSocket#getMessage
GET / 200 341.990 ms - 687
Resolved message (socket)

The app only displays the default message: "Loading message..." instead of "Server-side message, after response from example.com"

If I use the other promise (currently commented), I get:

Listening at http://localhost:8000
Start of rendering: /
Entered ServerZoneSocket#getMessage
Resolved message (simple)
GET / 200 330.926 ms - -

Everything works fine and the app displays: "Server-side message, with simple resolution".

I expect the app to wait for the resolution of the promise in both cases. As you can see in the logs, the response is sent before the promise is resolved in the first case.

[JiaLiPassion]

@demurgos , thank you for the sample, I think we need to patch Socket later.

[demurgos]

Is there a workaround that I can use until Socket is patched ?

[JiaLiPassion]

@demurgos , it is a little tricky to make a walk around, I will make a patch soon.

[JiaLiPassion]

@demurgos , sorry for the late reply, I tried to patch socket, and I just realized that in this case, patch socket will not resolve the issue, because in your case, what you want it to resolve the promise after get data from socket, so you can do it like this.

import * as net from "net";
import {ZoneSocket} from "./zone-socket";

declare let Zone: any;

export class ServerZoneSocket extends ZoneSocket {
  async getMessage(): Promise<string> {
    console.log("Entered ServerZoneSocket#getMessage");

   return new Promise<string>(function (resolve, reject) {
      const s = new net.Socket();
      s.connect(80, "example.com");
      console.log('Socket')
      s.write(new Buffer("GET /index.html HTTP/1.1\nHost: example.com\n\n"));
      const task = Zone.current.scheduleMacroTask('getSocketMessage', () => {
        resolve("Server-side message, after response from example.com" + task.data);
      }, {}, () => {}, () => {});
      s.on("data", function(data) {
        console.log("Resolved message (socket)");
        task.data = data;
        task.invoke();
      });
    });

    /* return new Promise<string>((resolve, reject) => {
       console.log("Resolved message (simple)");
       resolve("Server-side message, with simple resolution");
     });*/
  }
}

[demurgos]

Thank you, I was able to use this solution to wait for results from the database during server-side rendering of my application.

[demurgos]

I still have an issue with a large slowdown. The server-side rendering of the application with a hard-coded value takes 30ms and an HTTP request to the API (call to the DB and JSON output) takes 8ms. By perfoming the DB call during the rendering (and avoiding superfluous HTTP requests), I expected a complete server-side rendering with data from the DB between 30 and 38ms but I measure times between 1000 and 2000ms. I'll keep you updated if I find the issue.

[JiaLiPassion]

@demurgos , sure , please tell me when you find more information.