Wire up Angular 9 with Phoenix.js

Question

我正试图将Angular 9作为客户端与phoenix.js连接，以连接到现有的phoenix通道。

首先，我通过cli命令创建了一个angular应用程序，并通过npm install phoenix下载了phoenix。然后我在angular.json中添加了phoenix路径

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

然后我创建了一个服务

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")
}
}

最后，在AppComponent中调用了此服务

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

结果我得到了

core.js:6237错误类型错误：无法读取未定义的属性"connect"在新的AppComponent(app.component.ts:14(

phoenix.js:1 WebSocket连接到wss://api.catalx.io/markets/websocket?vsn=2.0.0'失败：WebSocket握手期间出错：意外的响应代码：403

我想我遇到这些错误是因为PhoenixService无法获取phoenix.js？感谢您的帮助！

Answer 1

我认为应该是这样的如果你用"npm i-S phoenix"安装js，就不需要在"脚本"中添加js

无法使用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();
}
}