Are there any examples of Angular Universal with WebSockets?
Serverside rendering does not know wat a WebSocket object is in my case. And if I use socket.io the node server hangs when trying to make a connections.
Some additional information about the problem:
I downloaded angular-universal-starter from github: https://github.com/angular/universal-starter Which works fine out of the box running 'npm install' and 'npm start'
But after i added the following code to AppComponent
export class AppComponent implements OnInit {
ngOnInit() {
let webSocket = new WebSocket("----server url----")
}
}
I got the following error in my NodeJs server console:
EXCEPTION: WebSocket is not defined
ORIGINAL STACKTRACE:
ReferenceError: WebSocket is not defined
at AppComponent.ngOnInit (/Volumes/Development/cacadu/website/universal-starter-master2/dist
/server/index.js:41725:29)
Both WebSocket vs Socket.io are popular choices in the market; let us discuss some of the major Difference Between WebSocket vs Socket.io: It provides the Connection over TCP, while Socket.io is a library to abstract the WebSocket connections. WebSocket doesn't have fallback options, while Socket.io supports fallback.
To implement server side rendering in your Angular application, you can use the Angular Universal package.
What Socket.IO is Socket.IO is a library that enables low-latency, bidirectional and event-based communication between a client and a server. It is built on top of the WebSocket protocol and provides additional guarantees like fallback to HTTP long-polling or automatic reconnection.
After creating the Angular app, we need to install the Socket. IO-Client package which will help us communicate between our front-end and our server.
Try only calling the websocket on the Client, for example you can detect whether it's the browser or the server with these imports
import { isPlatformBrowser } from '@angular/common';
import { Inject, PLATFORM_ID } from '@angular/core';
Then use them inside your code, this might be able to fix the problem!
@Component({ ... })
export class AppComponent implements OnInit {
private isBrowser: boolean = isPlatformBrowser(this.platformId);
constructor(
@Inject(PLATFORM_ID) private platformId: Object
) {
if (isBrowser) {
let webSocket = new WebSocket("----server url----");
}
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With