From 6e4fbccbcc2da8df7a919fcb8d99c54f7499b440 Mon Sep 17 00:00:00 2001 From: "fryorcraken.eth" Date: Fri, 2 Sep 2022 15:23:59 +1000 Subject: [PATCH] feat(angular): replace protons with protobufjs As latest protons version needs to use a prot file which is not very practical for a quick example. --- relay-angular-chat/README.md | 4 +- relay-angular-chat/package.json | 2 +- relay-angular-chat/pnpm-lock.yaml | 27 +-------- .../src/app/messages/messages.component.ts | 58 ++++++++++--------- 4 files changed, 35 insertions(+), 56 deletions(-) diff --git a/relay-angular-chat/README.md b/relay-angular-chat/README.md index 8a7f972..dafb68f 100644 --- a/relay-angular-chat/README.md +++ b/relay-angular-chat/README.md @@ -3,9 +3,9 @@ **Demonstrates**: - Group messaging -- Angular/JavaScript +- Angular - Waku Relay -- Protobuf using `protons` +- Protobuf using `protobufjs` - No async/await syntax A barebones messaging app to illustrate the [Angular Relay guide](https://docs.wakuconnect.dev/docs/guides/10_angular_relay/). diff --git a/relay-angular-chat/package.json b/relay-angular-chat/package.json index e9f2772..0f95d5a 100644 --- a/relay-angular-chat/package.json +++ b/relay-angular-chat/package.json @@ -22,7 +22,7 @@ "@angular/platform-browser-dynamic": "~13.2.0", "@angular/router": "~13.2.0", "js-waku": "0.24.0-f52dd9e", - "protons": "^2.0.3", + "protobufjs": "^7.1.0", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" diff --git a/relay-angular-chat/pnpm-lock.yaml b/relay-angular-chat/pnpm-lock.yaml index c3404bb..39e4f03 100644 --- a/relay-angular-chat/pnpm-lock.yaml +++ b/relay-angular-chat/pnpm-lock.yaml @@ -23,7 +23,7 @@ specifiers: karma-coverage: ~2.1.0 karma-jasmine: ~4.0.0 karma-jasmine-html-reporter: ~1.7.0 - protons: ^2.0.3 + protobufjs: ^7.1.0 rxjs: ~7.5.0 tslib: ^2.3.0 typescript: ~4.5.2 @@ -39,7 +39,7 @@ dependencies: '@angular/platform-browser-dynamic': 13.2.7_vkbm4mesp4vzs4r6epm7k663dq '@angular/router': 13.2.7_uouthnyvqoiyqb2ogpzzqrqwhi js-waku: 0.24.0-f52dd9e_adbj7bocxelisufu5fxaajl5fa - protons: 2.0.3 + protobufjs: 7.1.0 rxjs: 7.5.6 tslib: 2.4.0 zone.js: 0.11.7 @@ -7584,10 +7584,6 @@ packages: long: 5.2.0 dev: false - /protocol-buffers-schema/3.6.0: - resolution: {integrity: sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==} - dev: false - /protons-runtime/1.0.4: resolution: {integrity: sha512-DSKWjAgwaXhtYO5Jo/MrU8n/75I/P2IhxU0Fk/lSrXx6Gxl5DH+I6cHcbGAYFmAlOBmU4QRa0mvVme8VXlDeUg==} engines: {node: '>=16.0.0', npm: '>=7.0.0'} @@ -7615,15 +7611,6 @@ packages: uint8arraylist: 2.3.2 dev: false - /protons/2.0.3: - resolution: {integrity: sha512-j6JikP/H7gNybNinZhAHMN07Vjr1i4lVupg598l4I9gSTjJqOvKnwjzYX2PzvBTSVf2eZ2nWv4vG+mtW8L6tpA==} - dependencies: - protocol-buffers-schema: 3.6.0 - signed-varint: 2.0.1 - uint8arrays: 3.1.0 - varint: 5.0.2 - dev: false - /proxy-addr/2.0.7: resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==} engines: {node: '>= 0.10'} @@ -8123,12 +8110,6 @@ packages: /signal-exit/3.0.7: resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==} - /signed-varint/2.0.1: - resolution: {integrity: sha512-abgDPg1106vuZZOvw7cFwdCABddfJRz5akcCcchzTbhyhYnsG31y4AlZEgp315T7W3nQq5P4xeOm186ZiPVFzw==} - dependencies: - varint: 5.0.2 - dev: false - /slash/3.0.0: resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==} engines: {node: '>=8'} @@ -8819,10 +8800,6 @@ packages: builtins: 1.0.3 dev: true - /varint/5.0.2: - resolution: {integrity: sha512-lKxKYG6H03yCZUpAGOPOsMcGxd1RHCu1iKvEHYDPmTyq2HueGhD73ssNBqqQWfvYs04G9iUFRvmAVLW20Jw6ow==} - dev: false - /varint/6.0.0: resolution: {integrity: sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==} dev: false diff --git a/relay-angular-chat/src/app/messages/messages.component.ts b/relay-angular-chat/src/app/messages/messages.component.ts index d96b9dc..8f4c8b7 100644 --- a/relay-angular-chat/src/app/messages/messages.component.ts +++ b/relay-angular-chat/src/app/messages/messages.component.ts @@ -1,61 +1,63 @@ -import { Component, OnInit } from '@angular/core'; -import { WakuService } from '../waku.service'; -import { Waku, WakuMessage } from 'js-waku'; -import protons from 'protons'; +import { Component, OnInit } from "@angular/core"; +import { WakuService } from "../waku.service"; +import { Waku, WakuMessage } from "js-waku"; +import protobuf from "protobufjs"; -const proto = protons(` -message SimpleChatMessage { - uint64 timestamp = 1; - string text = 2; -} -`); +const ProtoChatMessage = new protobuf.Type("ChatMessage") + .add(new protobuf.Field("timestamp", 1, "uint32")) + .add(new protobuf.Field("text", 2, "string")); interface MessageInterface { - timestamp: Date, - text: string + timestamp: Date; + text: string; } @Component({ - selector: 'app-messages', - templateUrl: './messages.component.html', - styleUrls: ['./messages.component.css'] + selector: "app-messages", + templateUrl: "./messages.component.html", + styleUrls: ["./messages.component.css"], }) export class MessagesComponent implements OnInit { - contentTopic: string = `/relay-angular-chat/1/chat/proto`; messages: MessageInterface[] = []; messageCount: number = 0; waku!: Waku; wakuStatus!: string; - constructor(private wakuService: WakuService) { } + constructor(private wakuService: WakuService) {} ngOnInit(): void { - this.wakuService.wakuStatus.subscribe(wakuStatus => { + this.wakuService.wakuStatus.subscribe((wakuStatus) => { this.wakuStatus = wakuStatus; }); - - this.wakuService.waku.subscribe(waku => { + + this.wakuService.waku.subscribe((waku) => { this.waku = waku; - this.waku.relay.addObserver(this.processIncomingMessages, [this.contentTopic]); + this.waku.relay.addObserver(this.processIncomingMessages, [ + this.contentTopic, + ]); }); window.onbeforeunload = () => this.ngOnDestroy(); } ngOnDestroy(): void { - this.waku.relay.deleteObserver(this.processIncomingMessages, [this.contentTopic]); + this.waku.relay.deleteObserver(this.processIncomingMessages, [ + this.contentTopic, + ]); } sendMessage(): void { const time = new Date().getTime(); - const payload = proto.SimpleChatMessage.encode({ + const protoMsg = ProtoChatMessage.create({ timestamp: time, text: `Here is a message #${this.messageCount}`, }); - WakuMessage.fromBytes(payload, this.contentTopic).then(wakuMessage => { + const payload = ProtoChatMessage.encode(protoMsg).finish(); + + WakuMessage.fromBytes(payload, this.contentTopic).then((wakuMessage) => { this.waku.relay.send(wakuMessage).then(() => { console.log(`Message #${this.messageCount} sent`); this.messageCount += 1; @@ -66,13 +68,13 @@ export class MessagesComponent implements OnInit { processIncomingMessages = (wakuMessage: WakuMessage) => { if (!wakuMessage.payload) return; - const { timestamp, text } = proto.SimpleChatMessage.decode( + const { text, timestamp } = ProtoChatMessage.decode( wakuMessage.payload - ); + ) as unknown as { text: string; timestamp: bigint }; const time = new Date(); - time.setTime(timestamp); + time.setTime(Number(timestamp)); const message = { text, timestamp: time }; this.messages.push(message); - } + }; }