我正在尝试在我的 Angular 17 项目中实现 Azure Web pubsub 来发送和接收推送通知。
我已完成以下操作:
npm i @azure/web-pubsub
npm i ws
这是我的 app.component.js
import { Component, Inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { NavbarComponent } from './navbar/navbar.component';
import { HomepageComponent } from './homepage/homepage.component';
import { AzureKeyCredential, WebPubSubServiceClient } from '@azure/web-pubsub';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, NavbarComponent, HomepageComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
ngOnInit(): void {
this.subscribeNotification();
}
cred = new AzureKeyCredential(<AccessKey>);
endpoint = Endpoint
async subscribeNotification() {
const serviceClient = new WebPubSubServiceClient(this.endpoint, this.cred, 'pubsub');
let token = await serviceClient.getClientAccessToken();
let ws = new WebSocket(token.url);
ws.onmessage = function (e) {
var server_message = e.data;
}
};
}
当我启动项目时,我得到一个空白页面,屏幕截图中出现错误控制台错误
当我尝试构建时出现此错误
X [ERROR] Could not resolve "crypto"
node_modules/jsonwebtoken/node_modules/jwa/index.js:3:21:
3 │ var crypto = require('crypto');
╵ ~~~~~~~~
The package "crypto" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
X [ERROR] Could not resolve "stream"
node_modules/jsonwebtoken/node_modules/jws/lib/data-stream.js:3:21:
3 │ var Stream = require('stream');
╵ ~~~~~~~~
The package "stream" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
X [ERROR] Could not resolve "stream"
node_modules/jsonwebtoken/node_modules/jws/lib/sign-stream.js:5:21:
5 │ var Stream = require('stream');
╵ ~~~~~~~~
The package "stream" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
X [ERROR] Could not resolve "stream"
node_modules/jsonwebtoken/node_modules/jws/lib/verify-stream.js:5:21:
5 │ var Stream = require('stream');
╵ ~~~~~~~~
The package "stream" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
X [ERROR] Could not resolve "crypto"
node_modules/jsonwebtoken/sign.js:12:65:
12 │ ...KeyObject, createSecretKey, createPrivateKey } = require('crypto')
╵ ~~~~~~~~
The package "crypto" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
X [ERROR] Could not resolve "crypto"
node_modules/jsonwebtoken/verify.js:9:62:
9 │ ... {KeyObject, createSecretKey, createPublicKey} = require("crypto");
╵ ~~~~~~~~
The package "crypto" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
如果我删除上面的所有代码,我就不会收到错误并且工作正常。
我已经遵循了本教程https://madhuwanthiaah.medium.com/send-angular-web-push-notification-with-azure-web-pub-sub-6eb38cf4b44f但是帖子末尾的脚本不不适合我。路径不存在:node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js
我也尝试过这个答案https://stackoverflow.com/questions/67572355/webpack-5-angular-polyfill-for-node-js-crypto-js/69212673但它是针对角度12端的不为我工作。我也遇到同样的错误。
知道如何解决这个问题吗?
我尝试了以下代码,使用 Angular 17 从 Azure Webpubsub 发送和接收推送通知。
代码:
publish.component.ts:
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { WebPubSubService } from '../../services/web-pubsub.service';
@Component({
selector: 'app-publish',
templateUrl: './publish.component.html',
standalone: true,
imports: [CommonModule, FormsModule]
})
export class PublishComponent {
message: string = '';
constructor(private webPubSubService: WebPubSubService) {}
async publish(): Promise<void> {
await this.webPubSubService.publishMessage(this.message);
}
}
publish.component.html:
<div>
<input [(ngModel)]="message" placeholder="Enter your message">
<button (click)="publish()">Publish</button>
</div>
订阅.component.ts:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { WebSocketService } from '../../services/websocket.service';
import { WebPubSubService } from '../../services/web-pubsub.service';
@Component({
selector: 'app-subscribe',
templateUrl: './subscribe.component.html',
standalone: true,
imports: [CommonModule]
})
export class SubscribeComponent implements OnInit, OnDestroy {
constructor(
private webSocketService: WebSocketService,
private webPubSubService: WebPubSubService
) {}
async ngOnInit(): Promise<void> {
const url = await this.webPubSubService.getClientAccessToken();
this.webSocketService.connect(url);
}
ngOnDestroy(): void {
this.webSocketService.disconnect();
}
}
subscribe.component.html:
<div>
<p>Subscribed to Web PubSub and received messages.</p>
</div>
app.component.ts:
import { Component } from '@angular/core';
import { PublishComponent } from './components/publish/publish.component';
import { SubscribeComponent } from './components/subscribe/subscribe.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [PublishComponent, SubscribeComponent]
})
export class AppComponent {
title = 'angular-web-pubsub';
}
app.component.html:
<div style="text-align:center">
<h1>
Welcome to Angular Web PubSub!
</h1>
</div>
<app-publish></app-publish>
<app-subscribe></app-subscribe>
环境.ts:
export const environment = {
production: false,
webPubSubConnectionString: '<WebPubSub_conne_string>' };
package.json:
"dependencies": {
"@angular/animations": "^17.3.0",
"@angular/common": "^17.3.0",
"@angular/compiler": "^17.3.0",
"@angular/core": "^17.3.0",
"@angular/forms": "^17.3.0",
"@angular/platform-browser": "^17.3.0",
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/platform-server": "^17.3.0",
"@angular/router": "^17.3.0",
"@angular/ssr": "^17.3.7",
"@azure/web-pubsub": "^1.1.1",
"express": "^4.18.2",
"ngx-websocket": "^0.4.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"ws": "^8.17.0",
"zone.js": "~0.14.3"
},
输出: