Wire up Angular 9 with Phoenix.js

Question

I'm trying to wire up Angular 9 as a client with phoenix.js to connect to existing phoenix channel.

First, I created an angular app via cli command and I downloaded phoenix via npm install phoenix. Then I added phoenix path in angular.json

 "scripts": [
              "./node_modules/phoenix/priv/static/phoenix.js"
            ]

Then I created a service

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

declare var Socket: any;  // there is no typescript version of the package available so we cannot use a compile time import
declare var Phoenix: any;

@Injectable({
  providedIn: 'root'
})
export class PhoenixService {

  socket: any;

  constructor() {
    let socket = new Phoenix.Socket("wss://api.catalx.io/markets", {params: {}})
    socket.connect()

    let channel = socket.channel("updates:CAD-BTC", {})
    channel.on("new_msg", msg => console.log("Got message", msg) )
    channel.join()
      .receive("ok", ({messages}) => console.log("catching up", messages) )
      .receive("error", ({reason}) => console.log("failed join", reason) )
      .receive("timeout", () => console.log("Networking issue. Still waiting..."))
    channel.push("fetch", "market_state")
  }
}

Lastly, called this service in AppComponent

export class AppComponent {

  constructor(private phoenixService: PhoenixService) {
    phoenixService.socket.connect();
  }
}

As a result I'm getting

core.js:6237 ERROR TypeError: Cannot read property 'connect' of undefined at new AppComponent (app.component.ts:14)

phoenix.js:1 WebSocket connection to 'wss://api.catalx.io/markets/websocket?vsn=2.0.0' failed: Error during WebSocket handshake: Unexpected response code: 403

I guess I'm encountering these errors because PhoenixService can't grab phoenix.js? Little help is appreciated!

Answer 1

i think should be like this and you no need add js into "scripts" if you install it with "npm i -S phoenix"

have no access to test it with catalx

import { Injectable } from '@angular/core';
import { Socket as PhoenixSocket } from 'phoenix';

export const WEBSOCKET_SERVER_URI = 'wss://api.catalx.io/markets';

@Injectable({
  providedIn: 'root'
})
export class PhoenixService {
  phoenixSocket: PhoenixSocket;

  constructor() {
    this.phoenixSocket = new PhoenixSocket(
      WEBSOCKET_SERVER_URI,
      {
        params: {},
      }
    );
    this.phoenixSocket.connect();
  }
}