init with default examples
This commit is contained in:
Sasha
commit
ae2ded0cce
|
|
@ -0,0 +1,15 @@
|
||||||
|
{
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"commonjs": true,
|
||||||
|
"es2021": true,
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": "next/core-web-vitals",
|
||||||
|
"overrides": [],
|
||||||
|
"parser": "@typescript-eslint/parser",
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaVersion": "latest"
|
||||||
|
},
|
||||||
|
"rules": {}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
* @waku-org/js-waku-developers
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
name: Add new issues to Waku project board
|
||||||
|
|
||||||
|
on:
|
||||||
|
issues:
|
||||||
|
types: [opened]
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
add-to-project:
|
||||||
|
name: Add issue to project
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/add-to-project@v0.3.0
|
||||||
|
with:
|
||||||
|
project-url: https://github.com/orgs/waku-org/projects/2
|
||||||
|
github-token: ${{ secrets.ADD_TO_PROJECT_PAT }}
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
name: CI
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- "master"
|
||||||
|
pull_request:
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
examples_build_and_test:
|
||||||
|
strategy:
|
||||||
|
fail-fast: false
|
||||||
|
matrix:
|
||||||
|
example:
|
||||||
|
[
|
||||||
|
relay-angular-chat,
|
||||||
|
relay-reactjs-chat,
|
||||||
|
web-chat,
|
||||||
|
noise-js,
|
||||||
|
noise-rtc,
|
||||||
|
relay-direct-rtc
|
||||||
|
]
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- name: Checkout code
|
||||||
|
uses: actions/checkout@v2
|
||||||
|
|
||||||
|
- name: Install NodeJS
|
||||||
|
uses: actions/setup-node@v2
|
||||||
|
with:
|
||||||
|
node-version: "18"
|
||||||
|
cache: "npm"
|
||||||
|
cache-dependency-path: "*/package-lock.json"
|
||||||
|
|
||||||
|
- name: install
|
||||||
|
run: npm install
|
||||||
|
working-directory: "examples/${{ matrix.example }}"
|
||||||
|
|
||||||
|
- name: build
|
||||||
|
run: npm run build
|
||||||
|
working-directory: "examples/${{ matrix.example }}"
|
||||||
|
|
||||||
|
- name: test
|
||||||
|
run: npm run test --if-present
|
||||||
|
working-directory: "examples/${{ matrix.example }}"
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
dist
|
||||||
|
build
|
||||||
|
node_modules
|
||||||
|
yarn.lock
|
||||||
|
.DS_Store
|
||||||
|
|
@ -0,0 +1,202 @@
|
||||||
|
|
||||||
|
Apache License
|
||||||
|
Version 2.0, January 2004
|
||||||
|
http://www.apache.org/licenses/
|
||||||
|
|
||||||
|
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||||
|
|
||||||
|
1. Definitions.
|
||||||
|
|
||||||
|
"License" shall mean the terms and conditions for use, reproduction,
|
||||||
|
and distribution as defined by Sections 1 through 9 of this document.
|
||||||
|
|
||||||
|
"Licensor" shall mean the copyright owner or entity authorized by
|
||||||
|
the copyright owner that is granting the License.
|
||||||
|
|
||||||
|
"Legal Entity" shall mean the union of the acting entity and all
|
||||||
|
other entities that control, are controlled by, or are under common
|
||||||
|
control with that entity. For the purposes of this definition,
|
||||||
|
"control" means (i) the power, direct or indirect, to cause the
|
||||||
|
direction or management of such entity, whether by contract or
|
||||||
|
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||||
|
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||||
|
|
||||||
|
"You" (or "Your") shall mean an individual or Legal Entity
|
||||||
|
exercising permissions granted by this License.
|
||||||
|
|
||||||
|
"Source" form shall mean the preferred form for making modifications,
|
||||||
|
including but not limited to software source code, documentation
|
||||||
|
source, and configuration files.
|
||||||
|
|
||||||
|
"Object" form shall mean any form resulting from mechanical
|
||||||
|
transformation or translation of a Source form, including but
|
||||||
|
not limited to compiled object code, generated documentation,
|
||||||
|
and conversions to other media types.
|
||||||
|
|
||||||
|
"Work" shall mean the work of authorship, whether in Source or
|
||||||
|
Object form, made available under the License, as indicated by a
|
||||||
|
copyright notice that is included in or attached to the work
|
||||||
|
(an example is provided in the Appendix below).
|
||||||
|
|
||||||
|
"Derivative Works" shall mean any work, whether in Source or Object
|
||||||
|
form, that is based on (or derived from) the Work and for which the
|
||||||
|
editorial revisions, annotations, elaborations, or other modifications
|
||||||
|
represent, as a whole, an original work of authorship. For the purposes
|
||||||
|
of this License, Derivative Works shall not include works that remain
|
||||||
|
separable from, or merely link (or bind by name) to the interfaces of,
|
||||||
|
the Work and Derivative Works thereof.
|
||||||
|
|
||||||
|
"Contribution" shall mean any work of authorship, including
|
||||||
|
the original version of the Work and any modifications or additions
|
||||||
|
to that Work or Derivative Works thereof, that is intentionally
|
||||||
|
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||||
|
or by an individual or Legal Entity authorized to submit on behalf of
|
||||||
|
the copyright owner. For the purposes of this definition, "submitted"
|
||||||
|
means any form of electronic, verbal, or written communication sent
|
||||||
|
to the Licensor or its representatives, including but not limited to
|
||||||
|
communication on electronic mailing lists, source code control systems,
|
||||||
|
and issue tracking systems that are managed by, or on behalf of, the
|
||||||
|
Licensor for the purpose of discussing and improving the Work, but
|
||||||
|
excluding communication that is conspicuously marked or otherwise
|
||||||
|
designated in writing by the copyright owner as "Not a Contribution."
|
||||||
|
|
||||||
|
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||||
|
on behalf of whom a Contribution has been received by Licensor and
|
||||||
|
subsequently incorporated within the Work.
|
||||||
|
|
||||||
|
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||||
|
this License, each Contributor hereby grants to You a perpetual,
|
||||||
|
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||||
|
copyright license to reproduce, prepare Derivative Works of,
|
||||||
|
publicly display, publicly perform, sublicense, and distribute the
|
||||||
|
Work and such Derivative Works in Source or Object form.
|
||||||
|
|
||||||
|
3. Grant of Patent License. Subject to the terms and conditions of
|
||||||
|
this License, each Contributor hereby grants to You a perpetual,
|
||||||
|
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||||
|
(except as stated in this section) patent license to make, have made,
|
||||||
|
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||||
|
where such license applies only to those patent claims licensable
|
||||||
|
by such Contributor that are necessarily infringed by their
|
||||||
|
Contribution(s) alone or by combination of their Contribution(s)
|
||||||
|
with the Work to which such Contribution(s) was submitted. If You
|
||||||
|
institute patent litigation against any entity (including a
|
||||||
|
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||||
|
or a Contribution incorporated within the Work constitutes direct
|
||||||
|
or contributory patent infringement, then any patent licenses
|
||||||
|
granted to You under this License for that Work shall terminate
|
||||||
|
as of the date such litigation is filed.
|
||||||
|
|
||||||
|
4. Redistribution. You may reproduce and distribute copies of the
|
||||||
|
Work or Derivative Works thereof in any medium, with or without
|
||||||
|
modifications, and in Source or Object form, provided that You
|
||||||
|
meet the following conditions:
|
||||||
|
|
||||||
|
(a) You must give any other recipients of the Work or
|
||||||
|
Derivative Works a copy of this License; and
|
||||||
|
|
||||||
|
(b) You must cause any modified files to carry prominent notices
|
||||||
|
stating that You changed the files; and
|
||||||
|
|
||||||
|
(c) You must retain, in the Source form of any Derivative Works
|
||||||
|
that You distribute, all copyright, patent, trademark, and
|
||||||
|
attribution notices from the Source form of the Work,
|
||||||
|
excluding those notices that do not pertain to any part of
|
||||||
|
the Derivative Works; and
|
||||||
|
|
||||||
|
(d) If the Work includes a "NOTICE" text file as part of its
|
||||||
|
distribution, then any Derivative Works that You distribute must
|
||||||
|
include a readable copy of the attribution notices contained
|
||||||
|
within such NOTICE file, excluding those notices that do not
|
||||||
|
pertain to any part of the Derivative Works, in at least one
|
||||||
|
of the following places: within a NOTICE text file distributed
|
||||||
|
as part of the Derivative Works; within the Source form or
|
||||||
|
documentation, if provided along with the Derivative Works; or,
|
||||||
|
within a display generated by the Derivative Works, if and
|
||||||
|
wherever such third-party notices normally appear. The contents
|
||||||
|
of the NOTICE file are for informational purposes only and
|
||||||
|
do not modify the License. You may add Your own attribution
|
||||||
|
notices within Derivative Works that You distribute, alongside
|
||||||
|
or as an addendum to the NOTICE text from the Work, provided
|
||||||
|
that such additional attribution notices cannot be construed
|
||||||
|
as modifying the License.
|
||||||
|
|
||||||
|
You may add Your own copyright statement to Your modifications and
|
||||||
|
may provide additional or different license terms and conditions
|
||||||
|
for use, reproduction, or distribution of Your modifications, or
|
||||||
|
for any such Derivative Works as a whole, provided Your use,
|
||||||
|
reproduction, and distribution of the Work otherwise complies with
|
||||||
|
the conditions stated in this License.
|
||||||
|
|
||||||
|
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||||
|
any Contribution intentionally submitted for inclusion in the Work
|
||||||
|
by You to the Licensor shall be under the terms and conditions of
|
||||||
|
this License, without any additional terms or conditions.
|
||||||
|
Notwithstanding the above, nothing herein shall supersede or modify
|
||||||
|
the terms of any separate license agreement you may have executed
|
||||||
|
with Licensor regarding such Contributions.
|
||||||
|
|
||||||
|
6. Trademarks. This License does not grant permission to use the trade
|
||||||
|
names, trademarks, service marks, or product names of the Licensor,
|
||||||
|
except as required for reasonable and customary use in describing the
|
||||||
|
origin of the Work and reproducing the content of the NOTICE file.
|
||||||
|
|
||||||
|
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||||
|
agreed to in writing, Licensor provides the Work (and each
|
||||||
|
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||||
|
implied, including, without limitation, any warranties or conditions
|
||||||
|
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||||
|
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||||
|
appropriateness of using or redistributing the Work and assume any
|
||||||
|
risks associated with Your exercise of permissions under this License.
|
||||||
|
|
||||||
|
8. Limitation of Liability. In no event and under no legal theory,
|
||||||
|
whether in tort (including negligence), contract, or otherwise,
|
||||||
|
unless required by applicable law (such as deliberate and grossly
|
||||||
|
negligent acts) or agreed to in writing, shall any Contributor be
|
||||||
|
liable to You for damages, including any direct, indirect, special,
|
||||||
|
incidental, or consequential damages of any character arising as a
|
||||||
|
result of this License or out of the use or inability to use the
|
||||||
|
Work (including but not limited to damages for loss of goodwill,
|
||||||
|
work stoppage, computer failure or malfunction, or any and all
|
||||||
|
other commercial damages or losses), even if such Contributor
|
||||||
|
has been advised of the possibility of such damages.
|
||||||
|
|
||||||
|
9. Accepting Warranty or Additional Liability. While redistributing
|
||||||
|
the Work or Derivative Works thereof, You may choose to offer,
|
||||||
|
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||||
|
or other liability obligations and/or rights consistent with this
|
||||||
|
License. However, in accepting such obligations, You may act only
|
||||||
|
on Your own behalf and on Your sole responsibility, not on behalf
|
||||||
|
of any other Contributor, and only if You agree to indemnify,
|
||||||
|
defend, and hold each Contributor harmless for any liability
|
||||||
|
incurred by, or claims asserted against, such Contributor by reason
|
||||||
|
of your accepting any such warranty or additional liability.
|
||||||
|
|
||||||
|
END OF TERMS AND CONDITIONS
|
||||||
|
|
||||||
|
APPENDIX: How to apply the Apache License to your work.
|
||||||
|
|
||||||
|
To apply the Apache License to your work, attach the following
|
||||||
|
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||||
|
replaced with your own identifying information. (Don't include
|
||||||
|
the brackets!) The text should be enclosed in the appropriate
|
||||||
|
comment syntax for the file format. We also recommend that a
|
||||||
|
file or class name and description of purpose be included on the
|
||||||
|
same "printed page" as the copyright notice for easier
|
||||||
|
identification within third-party archives.
|
||||||
|
|
||||||
|
Copyright 2018 Status Research & Development GmbH
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2021 Status Research & Development GmbH
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
# Waku Lab
|
||||||
|
|
||||||
|
## Description
|
||||||
|
|
||||||
|
This repository is dedicated for proof of concepts, examples and research done around core Waku libraries.
|
||||||
|
|
||||||
|
See https://examples.waku.org/ for more examples.
|
||||||
|
|
||||||
|
### Web Chat App
|
||||||
|
|
||||||
|
- [code](examples/web-chat)
|
||||||
|
- [website](https://lab.waku.org/web-chat)
|
||||||
|
- Demonstrates: Group chat, React/TypeScript, Relay, Store.
|
||||||
|
|
||||||
|
### Waku Light Client in JavaScript
|
||||||
|
|
||||||
|
Send messages between several users (or just one) using light client targetted protocols.
|
||||||
|
|
||||||
|
- [code](examples/light-js)
|
||||||
|
- [website](https://lab.waku.org/light-js)
|
||||||
|
- Demonstrates: Waku Light node: Filter + Light Push, Pure Javascript/HTML using ESM/unpkg bundle.
|
||||||
|
|
||||||
|
### Minimal Angular (v13) Waku Relay
|
||||||
|
|
||||||
|
A barebone messaging app to illustrate the seamless integration of `js-waku` into AngularJS.
|
||||||
|
|
||||||
|
- [code](examples/relay-angular-chat)
|
||||||
|
- [website](https://lab.waku.org/relay-angular-chat)
|
||||||
|
- Demonstrates: Group messaging, Angular, Waku Relay, Protobuf using `protobufjs`, No async/await syntax.
|
||||||
|
|
||||||
|
### Waku Relay in JavaScript
|
||||||
|
|
||||||
|
This example uses Waku Relay to send and receive simple text messages.
|
||||||
|
|
||||||
|
- [code](examples/relay-js)
|
||||||
|
- [website](https://lab.waku.org/relay-js)
|
||||||
|
- Demonstrates: Waku Relay, Pure Javascript/HTML using ESM/unpkg bundle.
|
||||||
|
|
||||||
|
### Waku Relay in ReactJS
|
||||||
|
|
||||||
|
A barebone chat app to illustrate the seamless integration of `js-waku` into ReactJS.
|
||||||
|
|
||||||
|
- [code](examples/relay-reactjs-chat)
|
||||||
|
- [website](https://lab.waku.org/relay-reactjs-chat)
|
||||||
|
- Demonstrates: Group chat, React/JavaScript, Waku Relay, Protobuf using `protobufjs`.
|
||||||
|
|
||||||
|
### Noise JS
|
||||||
|
|
||||||
|
- [code](examples/noise-js)
|
||||||
|
- [website](https://lab.waku.org/noise-js)
|
||||||
|
- Demonstrates: LightPush, Filter, [Noise encryption](https://rfc.vac.dev/spec/35/).
|
||||||
|
|
||||||
|
### Noise RTC
|
||||||
|
|
||||||
|
- [code](examples/noise-rtc)
|
||||||
|
- [website](https://lab.waku.org/noise-rtc)
|
||||||
|
- Demonstrates: LightPush, Filter, [Noise encryption](https://rfc.vac.dev/spec/35/), WebRTC.
|
||||||
|
|
||||||
|
### Relay Direct RTC
|
||||||
|
|
||||||
|
- [code](examples/relay-direct-rtc)
|
||||||
|
- [website](https://lab.waku.org/relay-direct-rtc)
|
||||||
|
- Demonstrates: Relay over WebRTC.
|
||||||
|
|
||||||
|
|
||||||
|
# Continuous Integration
|
||||||
|
|
||||||
|
The `master` branch is being built by Jenkins CI:
|
||||||
|
https://ci.infra.status.im/job/website/job/lab.waku.org/
|
||||||
|
|
||||||
|
Based on the [`ci/Jenkinsfile`](./ci/Jenkinsfile).
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
FROM node:16-alpine3.16
|
||||||
|
|
||||||
|
LABEL maintainer="jakub@status.im"
|
||||||
|
|
||||||
|
RUN apk --no-cache add openssh git
|
||||||
|
|
||||||
|
# Jenkins user needs a specific UID/GID to work
|
||||||
|
RUN addgroup -g 1001 jenkins \
|
||||||
|
&& adduser -u 1001 -G jenkins -D jenkins
|
||||||
|
USER jenkins
|
||||||
|
ENV HOME="/home/jenkins"
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
pipeline {
|
||||||
|
agent {
|
||||||
|
dockerfile {
|
||||||
|
label 'linux'
|
||||||
|
dir 'ci'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
options {
|
||||||
|
disableConcurrentBuilds()
|
||||||
|
/* manage how many builds we keep */
|
||||||
|
buildDiscarder(logRotator(
|
||||||
|
numToKeepStr: '20',
|
||||||
|
daysToKeepStr: '30',
|
||||||
|
))
|
||||||
|
}
|
||||||
|
|
||||||
|
environment {
|
||||||
|
SITE_DOMAIN = 'examples.waku.org'
|
||||||
|
GIT_AUTHOR_NAME = 'status-im-auto'
|
||||||
|
GIT_AUTHOR_EMAIL = 'auto@status.im'
|
||||||
|
GIT_SSH_COMMAND = 'ssh -o StrictHostKeyChecking=no'
|
||||||
|
PUPPETEER_SKIP_DOWNLOAD = 'true'
|
||||||
|
}
|
||||||
|
|
||||||
|
stages {
|
||||||
|
stage('Pre') {
|
||||||
|
steps {
|
||||||
|
sh 'npm install --silent'
|
||||||
|
/* TODO: Build the main page. */
|
||||||
|
sh 'mkdir -p build/docs'
|
||||||
|
sh 'cp index.html build/docs/'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stage('Examples') {
|
||||||
|
parallel {
|
||||||
|
stage('relay-angular-chat') { steps { script { buildExample() } } }
|
||||||
|
stage('relay-reactjs-chat') { steps { script { buildExample() } } }
|
||||||
|
stage('web-chat') { steps { script { buildExample() } } }
|
||||||
|
stage('noise-js') { steps { script { buildExample() } } }
|
||||||
|
stage('noise-rtc') { steps { script { buildExample() } } }
|
||||||
|
stage('relay-direct-rtc') { steps { script { buildExample() } } }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stage('HTML Examples') {
|
||||||
|
parallel {
|
||||||
|
stage('relay-js') { steps { script { copyExample() } } }
|
||||||
|
stage('light-js') { steps { script { copyExample() } } }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stage('Publish') {
|
||||||
|
steps { script {
|
||||||
|
sh "echo ${SITE_DOMAIN} > build/docs/CNAME"
|
||||||
|
sshagent(credentials: ['status-im-auto-ssh']) {
|
||||||
|
sh 'node ci/deploy.js'
|
||||||
|
}
|
||||||
|
} }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
post {
|
||||||
|
always { cleanWs() }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
def buildExample(example=STAGE_NAME) {
|
||||||
|
def dest = "${WORKSPACE}/build/docs/${example}"
|
||||||
|
dir("examples/${example}") {
|
||||||
|
sh 'npm install --silent'
|
||||||
|
sh 'npm run build'
|
||||||
|
sh "mkdir -p ${dest}"
|
||||||
|
sh "cp -r build/. ${dest}"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
def copyExample(example=STAGE_NAME) {
|
||||||
|
def source = "examples/${example}"
|
||||||
|
def dest = "build/docs/${example}"
|
||||||
|
sh "mkdir -p ${dest}"
|
||||||
|
sh "cp -r ${source}/. ${dest}"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
# Description
|
||||||
|
|
||||||
|
Configuration of CI builds executed under a Jenkins instance at https://ci.status.im/.
|
||||||
|
|
||||||
|
# Website
|
||||||
|
|
||||||
|
The `Jenkinsfile.gh-pages` file builds the documentation site with this job:
|
||||||
|
https://ci.infra.status.im/job/website/job/lab.waku.org/
|
||||||
|
|
||||||
|
And deploys it via `gh-pages` branch and [GitHub Pages](https://pages.github.com/) to:
|
||||||
|
https://lab.waku.org/
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
const { promisify } = require("util");
|
||||||
|
const { publish } = require("gh-pages");
|
||||||
|
const ghpublish = promisify(publish);
|
||||||
|
|
||||||
|
/* fix for "Unhandled promise rejections" */
|
||||||
|
process.on("unhandledRejection", (err) => {
|
||||||
|
throw err;
|
||||||
|
});
|
||||||
|
|
||||||
|
const Args = process.argv.slice(2);
|
||||||
|
const USE_HTTPS = Args[0] && Args[0].toUpperCase() === "HTTPS";
|
||||||
|
|
||||||
|
const branch = "gh-pages";
|
||||||
|
const org = "waku-org";
|
||||||
|
const repo = "waku-lab";
|
||||||
|
/* use SSH auth by default */
|
||||||
|
let repoUrl = USE_HTTPS
|
||||||
|
? `https://github.com/${org}/${repo}.git`
|
||||||
|
: `git@github.com:${org}/${repo}.git`;
|
||||||
|
|
||||||
|
/* alternative auth using GitHub user and API token */
|
||||||
|
if (process.env.GH_USER != undefined) {
|
||||||
|
repoUrl =
|
||||||
|
"https://" +
|
||||||
|
process.env.GH_USER +
|
||||||
|
":" +
|
||||||
|
process.env.GH_TOKEN +
|
||||||
|
"@" +
|
||||||
|
`github.com/${org}/${repo}.git`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const main = async (url, branch) => {
|
||||||
|
console.log(`Pushing to: ${url}`);
|
||||||
|
console.log(`On branch: ${branch}`);
|
||||||
|
await ghpublish("build/docs", {
|
||||||
|
repo: url,
|
||||||
|
branch: branch,
|
||||||
|
dotfiles: true,
|
||||||
|
silent: false,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
main(repoUrl, branch);
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
# Using Waku Light Push and Filter in JavaScript
|
||||||
|
|
||||||
|
**Demonstrates**:
|
||||||
|
|
||||||
|
- Waku Light node: Waku Filter + Waku Light Push
|
||||||
|
- Pure Javascript/HTML.
|
||||||
|
- Use minified bundle of js from unpkg.com, no import, no package manager.
|
||||||
|
|
||||||
|
This example uses Waku Filter to listen to messages and Waku Light Push to send messages.
|
||||||
|
|
||||||
|
To test the example, simply download the `index.html` file from this folder and open it in a browser.
|
||||||
|
|
||||||
|
The `master` branch's HEAD is deployed at https://examples.waku.org/light-js/.
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -0,0 +1,280 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||||
|
<title>JS-Waku light node example</title>
|
||||||
|
<link rel="apple-touch-icon" href="./favicon.png" />
|
||||||
|
<link rel="manifest" href="./manifest.json" />
|
||||||
|
<link rel="icon" href="./favicon.ico" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<h2>Status</h2>
|
||||||
|
</div>
|
||||||
|
<div id="status"></div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2>Local Peer Id</h2>
|
||||||
|
</div>
|
||||||
|
<div id="peer-id"></div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2>Select Peer</h2>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button id="getPeersButton" type="button">Refresh Peers</button>
|
||||||
|
<select id="peer-select">
|
||||||
|
<option value=""></option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="remote-multiaddr">Remote peer's multiaddr</label>
|
||||||
|
</div>
|
||||||
|
<div style="margin-right: 1em">
|
||||||
|
<input
|
||||||
|
id="remote-multiaddr"
|
||||||
|
type="text"
|
||||||
|
value=""
|
||||||
|
style="width: 100%; max-width: 900px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button disabled id="dial" type="button">Dial</button>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2>Remote Peers</h2>
|
||||||
|
</div>
|
||||||
|
<div id="remote-peer-id"></div>
|
||||||
|
<br />
|
||||||
|
<button disabled id="subscribe" type="button">Subscribe with Filter</button>
|
||||||
|
<button disabled id="unsubscribe" type="button">
|
||||||
|
Unsubscribe with Filter
|
||||||
|
</button>
|
||||||
|
<br />
|
||||||
|
<label for="textInput">Message text</label>
|
||||||
|
<input id="textInput" placeholder="Type your message here" type="text" />
|
||||||
|
<button disabled id="sendButton" type="button">
|
||||||
|
Send message using Light Push
|
||||||
|
</button>
|
||||||
|
<br />
|
||||||
|
<div id="messages"></div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2>Store</h2>
|
||||||
|
</div>
|
||||||
|
<button disabled id="queryStoreButton" type="button">
|
||||||
|
Retrieve past messages
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/@multiformats/multiaddr@12.1.1/dist/index.min.js"></script>
|
||||||
|
<script type="module">
|
||||||
|
import {
|
||||||
|
createLightNode,
|
||||||
|
waitForRemotePeer,
|
||||||
|
createEncoder,
|
||||||
|
createDecoder,
|
||||||
|
utf8ToBytes,
|
||||||
|
bytesToUtf8,
|
||||||
|
} from "https://unpkg.com/@waku/sdk@0.0.20/bundle/index.js";
|
||||||
|
import {
|
||||||
|
enrTree,
|
||||||
|
DnsNodeDiscovery,
|
||||||
|
} from "https://unpkg.com/@waku/dns-discovery@0.0.16/bundle/index.js";
|
||||||
|
import { messageHash } from "https://unpkg.com/@waku/message-hash@0.1.8/bundle/index.js";
|
||||||
|
|
||||||
|
const peerIdDiv = document.getElementById("peer-id");
|
||||||
|
const remotePeerIdDiv = document.getElementById("remote-peer-id");
|
||||||
|
const statusDiv = document.getElementById("status");
|
||||||
|
const remoteMultiAddrDiv = document.getElementById("remote-multiaddr");
|
||||||
|
const dialButton = document.getElementById("dial");
|
||||||
|
const subscribeButton = document.getElementById("subscribe");
|
||||||
|
const unsubscribeButton = document.getElementById("unsubscribe");
|
||||||
|
const queryStoreButton = document.getElementById("queryStoreButton");
|
||||||
|
const messagesDiv = document.getElementById("messages");
|
||||||
|
const textInput = document.getElementById("textInput");
|
||||||
|
const sendButton = document.getElementById("sendButton");
|
||||||
|
const getPeersButton = document.getElementById("getPeersButton");
|
||||||
|
const peersSelector = document.getElementById("peer-select");
|
||||||
|
|
||||||
|
const ContentTopic = "/js-waku-examples/1/chat/utf8";
|
||||||
|
const decoder = createDecoder(ContentTopic);
|
||||||
|
const encoder = createEncoder({ contentTopic: ContentTopic });
|
||||||
|
// Each key is a unique identifier for the message. Each value is an obj { text, timestamp }
|
||||||
|
let messages = {};
|
||||||
|
let unsubscribe;
|
||||||
|
|
||||||
|
const updateMessages = (msgs, div) => {
|
||||||
|
div.innerHTML = "<ul>";
|
||||||
|
Object.values(msgs)
|
||||||
|
.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime())
|
||||||
|
.forEach(
|
||||||
|
(msg) =>
|
||||||
|
(div.innerHTML +=
|
||||||
|
"<li>" + `${msg.text} - ${msg.timestamp}` + "</li>")
|
||||||
|
);
|
||||||
|
div.innerHTML += "</ul>";
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
await getPeers();
|
||||||
|
} catch (e) {
|
||||||
|
console.log("Failed to find a peer", e);
|
||||||
|
remoteMultiAddrDiv.value =
|
||||||
|
"/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/8000/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm";
|
||||||
|
}
|
||||||
|
|
||||||
|
statusDiv.innerHTML = "<p>Creating Waku node.</p>";
|
||||||
|
const node = await createLightNode();
|
||||||
|
|
||||||
|
statusDiv.innerHTML = "<p>Starting Waku node.</p>";
|
||||||
|
await node.start();
|
||||||
|
|
||||||
|
window.waku = node;
|
||||||
|
console.info(
|
||||||
|
"Use window.waku to access the waku node running in the browser directly through the console."
|
||||||
|
);
|
||||||
|
|
||||||
|
// Queries all peers from libp2p peer store and updates list of connected peers
|
||||||
|
const updatePeersList = async () => {
|
||||||
|
// Generate <p> element with connection string from each peer
|
||||||
|
const peers = await node.libp2p.peerStore.all();
|
||||||
|
const peerIdElements = peers.map((peer) => {
|
||||||
|
const element = document.createElement("p");
|
||||||
|
element.textContent = `${peer.addresses[1].multiaddr}/p2p/${peer.id}`;
|
||||||
|
return element;
|
||||||
|
});
|
||||||
|
// Update elements displaying list of peers
|
||||||
|
remotePeerIdDiv.replaceChildren(...peerIdElements);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Refreshes list of connected peers each time a new one is detected
|
||||||
|
node.store.addLibp2pEventListener("peer:connect", async (event) => {
|
||||||
|
const peerId = event.detail;
|
||||||
|
console.log(`Peer connected with peer id: ${peerId}`);
|
||||||
|
// Wait half a second after receiving event for peer to show up in peer store
|
||||||
|
setTimeout(async () => {
|
||||||
|
updatePeersList();
|
||||||
|
}, 500);
|
||||||
|
|
||||||
|
// Update status
|
||||||
|
statusDiv.innerHTML = `<p>Peer dialed: ${peerId}</p>`;
|
||||||
|
// Enable send and subscribe inputs as we are now connected to a peer
|
||||||
|
textInput.disabled = false;
|
||||||
|
sendButton.disabled = false;
|
||||||
|
subscribeButton.disabled = false;
|
||||||
|
queryStoreButton.disabled = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
statusDiv.innerHTML = "<p>Waku node started.</p>";
|
||||||
|
peerIdDiv.innerHTML = "<p>" + node.libp2p.peerId.toString() + "</p>";
|
||||||
|
dialButton.disabled = false;
|
||||||
|
|
||||||
|
dialButton.onclick = async () => {
|
||||||
|
const ma = remoteMultiAddrDiv.value;
|
||||||
|
if (!ma) {
|
||||||
|
statusDiv.innerHTML = "<p>Error: No multiaddr provided.</p>";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
statusDiv.innerHTML = "<p>Dialing peer.</p>";
|
||||||
|
let multiaddr;
|
||||||
|
try {
|
||||||
|
multiaddr = MultiformatsMultiaddr.multiaddr(ma);
|
||||||
|
} catch (err) {
|
||||||
|
statusDiv.innerHTML = "<p>Error: invalid multiaddr provided</p>";
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
await node.dial(multiaddr, ["filter", "lightpush", "store"]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const messageReceivedCallback = (wakuMessage) => {
|
||||||
|
// create a unique key for the message
|
||||||
|
const msgHash =
|
||||||
|
bytesToUtf8(messageHash(ContentTopic, wakuMessage)) +
|
||||||
|
wakuMessage.proto.timestamp;
|
||||||
|
const text = bytesToUtf8(wakuMessage.payload);
|
||||||
|
// store message by its key
|
||||||
|
messages[msgHash + wakuMessage.proto.timestamp] = {
|
||||||
|
text,
|
||||||
|
timestamp: wakuMessage.timestamp,
|
||||||
|
};
|
||||||
|
// call function to refresh display of messages
|
||||||
|
updateMessages(messages, messagesDiv);
|
||||||
|
};
|
||||||
|
|
||||||
|
subscribeButton.onclick = async () => {
|
||||||
|
unsubscribe = await node.filter.subscribe(
|
||||||
|
[decoder],
|
||||||
|
messageReceivedCallback
|
||||||
|
);
|
||||||
|
unsubscribeButton.disabled = false;
|
||||||
|
subscribeButton.disabled = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
queryStoreButton.onclick = async () => {
|
||||||
|
await node.store.queryWithOrderedCallback(
|
||||||
|
[decoder],
|
||||||
|
messageReceivedCallback
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
unsubscribeButton.onclick = async () => {
|
||||||
|
await unsubscribe();
|
||||||
|
unsubscribe = undefined;
|
||||||
|
unsubscribeButton.disabled = true;
|
||||||
|
subscribeButton.disabled = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
sendButton.onclick = async () => {
|
||||||
|
const text = textInput.value;
|
||||||
|
|
||||||
|
await node.lightPush.send(encoder, {
|
||||||
|
payload: utf8ToBytes(text),
|
||||||
|
});
|
||||||
|
console.log("Message sent!");
|
||||||
|
textInput.value = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
getPeersButton.onclick = async () => {
|
||||||
|
await getPeers(statusDiv, remoteMultiAddrDiv);
|
||||||
|
};
|
||||||
|
|
||||||
|
peersSelector.addEventListener("change", function (event) {
|
||||||
|
remoteMultiAddrDiv.value = event.target.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
async function getPeers() {
|
||||||
|
// Display status
|
||||||
|
statusDiv.innerHTML = "<p>Discovering peers</p>";
|
||||||
|
|
||||||
|
// Clear all options in select element
|
||||||
|
peersSelector.innerHTML = "";
|
||||||
|
|
||||||
|
// Get peers using DNS discovery
|
||||||
|
const defaultNodeCount = 5;
|
||||||
|
const dnsDiscovery = await DnsNodeDiscovery.dnsOverHttp();
|
||||||
|
const peers = await dnsDiscovery.getPeers([enrTree["TEST"]], {
|
||||||
|
relay: defaultNodeCount,
|
||||||
|
store: defaultNodeCount,
|
||||||
|
filter: defaultNodeCount,
|
||||||
|
lightPush: defaultNodeCount,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create an option element for each peer's multiaddr and append to select element
|
||||||
|
const optionElements = peers.map((peer) => {
|
||||||
|
const optionElement = document.createElement("option");
|
||||||
|
optionElement.value = `${peer.multiaddrs[1]}/p2p/${peer.peerId}`;
|
||||||
|
optionElement.text = `${peer.multiaddrs[1]}/p2p/${peer.peerId}`;
|
||||||
|
return optionElement;
|
||||||
|
});
|
||||||
|
peersSelector.append(...optionElements);
|
||||||
|
|
||||||
|
// Set first peer as selected
|
||||||
|
peersSelector.options[0].selected = true;
|
||||||
|
remoteMultiAddrDiv.value = peersSelector.options[0].value;
|
||||||
|
|
||||||
|
statusDiv.innerHTML = "<p>Peers discovered</p>";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"name": "Light JS",
|
||||||
|
"description": "Send messages between several users (or just one) using light client targeted protocols.",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "favicon.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "192x192"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#ffffff",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
# Waku Noise Pairing Example App
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
Browse to http://localhost:8080
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -0,0 +1,200 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||||
|
<title>Waku Noise</title>
|
||||||
|
<link rel="apple-touch-icon" href="./favicon.png" />
|
||||||
|
<link rel="manifest" href="./manifest.json" />
|
||||||
|
<link rel="icon" href="./favicon.ico" />
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
word-wrap: break-word;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 300px;
|
||||||
|
max-width: 800px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3:last-of-type {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 span,
|
||||||
|
h3 span {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
color: #9ea13b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success {
|
||||||
|
color: #3ba183;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
color: #c84740;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.progress {
|
||||||
|
color: white;
|
||||||
|
background-color: #9ea13b;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.success {
|
||||||
|
color: white;
|
||||||
|
background-color: #3ba183;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.error {
|
||||||
|
color: white;
|
||||||
|
background-color: #c84740;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pairingInfo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pairingInfo input {
|
||||||
|
display: block;
|
||||||
|
min-width: 250px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
padding: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pairingInfo button {
|
||||||
|
flex-grow: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pairingInfo button + button {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatArea {
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatArea ul {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatArea ul li + li {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatArea div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatArea div > * {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
padding: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="status">
|
||||||
|
<h3>
|
||||||
|
<b>Waku Node Status:</b> <span id="waku-status">connecting...</span>
|
||||||
|
</h3>
|
||||||
|
<h3 id="handshake-span">
|
||||||
|
<b>Handshake Status:</b>
|
||||||
|
<span id="handshake-status" class="progress">waiting for waku</span>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pairingInfo" id="qr-url-container" style="display: none">
|
||||||
|
<h2>Pairing information</h2>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="qr-url"
|
||||||
|
readonly
|
||||||
|
placeholder="generating URL..."
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<button id="copy-url" style="width: 100px">Copy URL</button>
|
||||||
|
<button id="open-tab" style="width: 150px">Open in new tab</button>
|
||||||
|
</div>
|
||||||
|
<canvas id="qr-canvas"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chatArea" id="chat-area" style="display: none">
|
||||||
|
<h2>Chat</h2>
|
||||||
|
<ul id="messages"></ul>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<input id="nick-input" placeholder="Choose a nickname" type="text" />
|
||||||
|
<textarea
|
||||||
|
id="text-input"
|
||||||
|
placeholder="Type your message here"
|
||||||
|
type="text"
|
||||||
|
></textarea>
|
||||||
|
<button id="send-btn" type="button" disabled>Send message</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
NOTICE: you can try also try to pair your browser with a
|
||||||
|
<a href="https://github.com/waku-org/go-waku/tree/master/examples/noise"
|
||||||
|
>go-waku based node</a
|
||||||
|
>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="./index.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,274 @@
|
||||||
|
import { createLightNode, waitForRemotePeer } from "@waku/sdk";
|
||||||
|
import * as utils from "@waku/utils/bytes";
|
||||||
|
import * as noise from "@waku/noise";
|
||||||
|
import protobuf from "protobufjs";
|
||||||
|
import QRCode from "qrcode";
|
||||||
|
|
||||||
|
// Protobuf
|
||||||
|
const ProtoChatMessage = new protobuf.Type("ChatMessage")
|
||||||
|
.add(new protobuf.Field("timestamp", 1, "uint64"))
|
||||||
|
.add(new protobuf.Field("nick", 2, "string"))
|
||||||
|
.add(new protobuf.Field("text", 3, "bytes"));
|
||||||
|
|
||||||
|
main();
|
||||||
|
|
||||||
|
async function main() {
|
||||||
|
const ui = initUI();
|
||||||
|
ui.waku.connecting();
|
||||||
|
|
||||||
|
// Starting the node
|
||||||
|
const node = await createLightNode({
|
||||||
|
defaultBootstrap: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
try {
|
||||||
|
await node.start();
|
||||||
|
await waitForRemotePeer(node, ["filter", "lightpush"]);
|
||||||
|
|
||||||
|
ui.waku.connected();
|
||||||
|
|
||||||
|
const myStaticKey = noise.generateX25519KeyPair();
|
||||||
|
const urlPairingInfo = getPairingInfoFromURL();
|
||||||
|
|
||||||
|
const pairingObj = new noise.WakuPairing(
|
||||||
|
node.lightPush,
|
||||||
|
node.filter,
|
||||||
|
myStaticKey,
|
||||||
|
urlPairingInfo || new noise.ResponderParameters()
|
||||||
|
);
|
||||||
|
const pExecute = pairingObj.execute(120000); // timeout after 2m
|
||||||
|
|
||||||
|
scheduleHandshakeAuthConfirmation(pairingObj, ui);
|
||||||
|
|
||||||
|
let encoder;
|
||||||
|
let decoder;
|
||||||
|
|
||||||
|
try {
|
||||||
|
ui.handshake.waiting();
|
||||||
|
|
||||||
|
if (!urlPairingInfo) {
|
||||||
|
const pairingURL = buildPairingURLFromObj(pairingObj);
|
||||||
|
ui.shareInfo.setURL(pairingURL);
|
||||||
|
ui.shareInfo.renderQR(pairingURL);
|
||||||
|
ui.shareInfo.show();
|
||||||
|
}
|
||||||
|
|
||||||
|
[encoder, decoder] = await pExecute;
|
||||||
|
|
||||||
|
ui.handshake.connected();
|
||||||
|
ui.shareInfo.hide();
|
||||||
|
} catch (err) {
|
||||||
|
ui.handshake.error(err.message);
|
||||||
|
ui.hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
ui.message.display();
|
||||||
|
|
||||||
|
await node.filter.subscribe(
|
||||||
|
[decoder],
|
||||||
|
ui.message.onReceive.bind(ui.message)
|
||||||
|
);
|
||||||
|
|
||||||
|
ui.message.onSend(async (text, nick) => {
|
||||||
|
const timestamp = Math.floor(Date.now() / 1000);
|
||||||
|
const message = ProtoChatMessage.create({
|
||||||
|
nick,
|
||||||
|
timestamp,
|
||||||
|
text: utils.utf8ToBytes(text),
|
||||||
|
});
|
||||||
|
const payload = ProtoChatMessage.encode(message).finish();
|
||||||
|
|
||||||
|
await node.lightPush.send(encoder, { payload, timestamp });
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
ui.waku.error(err.message);
|
||||||
|
ui.hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildPairingURLFromObj(pairingObj) {
|
||||||
|
const pInfo = pairingObj.getPairingInfo();
|
||||||
|
|
||||||
|
// Data to encode in the QR code. The qrMessageNametag too to the QR string (separated by )
|
||||||
|
const messageNameTagParam = `messageNameTag=${utils.bytesToHex(
|
||||||
|
pInfo.qrMessageNameTag
|
||||||
|
)}`;
|
||||||
|
const qrCodeParam = `qrCode=${encodeURIComponent(pInfo.qrCode)}`;
|
||||||
|
|
||||||
|
return `${window.location.href}?${messageNameTagParam}&${qrCodeParam}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPairingInfoFromURL() {
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
|
||||||
|
const messageNameTag = urlParams.get("messageNameTag");
|
||||||
|
const qrCodeString = urlParams.get("qrCode");
|
||||||
|
|
||||||
|
if (!(messageNameTag && qrCodeString)) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
return new noise.InitiatorParameters(
|
||||||
|
decodeURIComponent(qrCodeString),
|
||||||
|
utils.hexToBytes(messageNameTag)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function scheduleHandshakeAuthConfirmation(pairingObj, ui) {
|
||||||
|
const authCode = await pairingObj.getAuthCode();
|
||||||
|
ui.handshake.connecting();
|
||||||
|
pairingObj.validateAuthCode(confirm("Confirm that authcode is: " + authCode));
|
||||||
|
}
|
||||||
|
|
||||||
|
function initUI() {
|
||||||
|
const messagesList = document.getElementById("messages");
|
||||||
|
const nicknameInput = document.getElementById("nick-input");
|
||||||
|
const textInput = document.getElementById("text-input");
|
||||||
|
const sendButton = document.getElementById("send-btn");
|
||||||
|
const chatArea = document.getElementById("chat-area");
|
||||||
|
const wakuStatusSpan = document.getElementById("waku-status");
|
||||||
|
const handshakeStatusSpan = document.getElementById("handshake-status");
|
||||||
|
|
||||||
|
const qrCanvas = document.getElementById("qr-canvas");
|
||||||
|
const qrUrlContainer = document.getElementById("qr-url-container");
|
||||||
|
const qrUrl = document.getElementById("qr-url");
|
||||||
|
const copyURLButton = document.getElementById("copy-url");
|
||||||
|
const openTabButton = document.getElementById("open-tab");
|
||||||
|
|
||||||
|
copyURLButton.onclick = () => {
|
||||||
|
const copyText = document.getElementById("qr-url"); // need to get it each time otherwise copying does not work
|
||||||
|
copyText.select();
|
||||||
|
copyText.setSelectionRange(0, 99999);
|
||||||
|
navigator.clipboard.writeText(copyText.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
openTabButton.onclick = () => {
|
||||||
|
window.open(qrUrl.value, "_blank");
|
||||||
|
};
|
||||||
|
|
||||||
|
const disableChatUIStateIfNeeded = () => {
|
||||||
|
const readyToSend = nicknameInput.value !== "";
|
||||||
|
textInput.disabled = !readyToSend;
|
||||||
|
sendButton.disabled = !readyToSend;
|
||||||
|
};
|
||||||
|
nicknameInput.onchange = disableChatUIStateIfNeeded;
|
||||||
|
nicknameInput.onblur = disableChatUIStateIfNeeded;
|
||||||
|
|
||||||
|
return {
|
||||||
|
shareInfo: {
|
||||||
|
setURL(url) {
|
||||||
|
qrUrl.value = url;
|
||||||
|
},
|
||||||
|
hide() {
|
||||||
|
qrUrlContainer.style.display = "none";
|
||||||
|
},
|
||||||
|
show() {
|
||||||
|
qrUrlContainer.style.display = "flex";
|
||||||
|
},
|
||||||
|
renderQR(url) {
|
||||||
|
QRCode.toCanvas(qrCanvas, url, (err) => {
|
||||||
|
if (err) {
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
waku: {
|
||||||
|
_val(msg) {
|
||||||
|
wakuStatusSpan.innerText = msg;
|
||||||
|
},
|
||||||
|
_class(name) {
|
||||||
|
wakuStatusSpan.className = name;
|
||||||
|
},
|
||||||
|
connecting() {
|
||||||
|
this._val("connecting...");
|
||||||
|
this._class("progress");
|
||||||
|
},
|
||||||
|
connected() {
|
||||||
|
this._val("connected");
|
||||||
|
this._class("success");
|
||||||
|
},
|
||||||
|
error(msg) {
|
||||||
|
this._val(msg);
|
||||||
|
this._class("error");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
handshake: {
|
||||||
|
_val(val) {
|
||||||
|
handshakeStatusSpan.innerText = val;
|
||||||
|
},
|
||||||
|
_class(name) {
|
||||||
|
handshakeStatusSpan.className = name;
|
||||||
|
},
|
||||||
|
error(msg) {
|
||||||
|
this._val(msg);
|
||||||
|
this._class("error");
|
||||||
|
},
|
||||||
|
waiting() {
|
||||||
|
this._val("waiting for handshake...");
|
||||||
|
this._class("progress");
|
||||||
|
},
|
||||||
|
generating() {
|
||||||
|
this._val("generating QR code...");
|
||||||
|
this._class("progress");
|
||||||
|
},
|
||||||
|
connecting() {
|
||||||
|
this._val("executing handshake...");
|
||||||
|
this._class("progress");
|
||||||
|
},
|
||||||
|
connected() {
|
||||||
|
this._val("handshake completed!");
|
||||||
|
this._class("success");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
message: {
|
||||||
|
_render({ time, text, nick }) {
|
||||||
|
messagesList.innerHTML += `
|
||||||
|
<li>
|
||||||
|
(${nick})
|
||||||
|
<strong>${text}</strong>
|
||||||
|
<i>[${new Date(time).toISOString()}]</i>
|
||||||
|
</li>
|
||||||
|
`;
|
||||||
|
},
|
||||||
|
_status(text, className) {
|
||||||
|
sendButton.className = className;
|
||||||
|
},
|
||||||
|
onReceive({ payload }) {
|
||||||
|
const { timestamp, nick, text } = ProtoChatMessage.decode(payload);
|
||||||
|
|
||||||
|
this._render({
|
||||||
|
nick,
|
||||||
|
time: timestamp * 1000,
|
||||||
|
text: utils.bytesToUtf8(text),
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onSend(cb) {
|
||||||
|
sendButton.addEventListener("click", async () => {
|
||||||
|
try {
|
||||||
|
this._status("sending...", "progress");
|
||||||
|
await cb(textInput.value, nicknameInput.value);
|
||||||
|
this._status("sent", "success");
|
||||||
|
|
||||||
|
this._render({
|
||||||
|
time: Date.now(), // a bit different from what receiver will see but for the matter of example is good enough
|
||||||
|
text: textInput.value,
|
||||||
|
nick: nicknameInput.value,
|
||||||
|
});
|
||||||
|
textInput.value = "";
|
||||||
|
} catch (e) {
|
||||||
|
this._status(`error: ${e.message}`, "error");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
display() {
|
||||||
|
chatArea.style.display = "block";
|
||||||
|
this._status("waiting for input", "progress");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
hide() {
|
||||||
|
this.shareInfo.hide();
|
||||||
|
chatArea.style.display = "none";
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"name": "Waku Noise",
|
||||||
|
"description": "Example showing Waku noise capabilities.",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "favicon.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "192x192"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#ffffff",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"name": "@waku/noise-example",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.1.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"build": "webpack --config webpack.config.js",
|
||||||
|
"start": "webpack-dev-server"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@waku/sdk": "0.0.18",
|
||||||
|
"@waku/noise": "0.0.3-31510da",
|
||||||
|
"@waku/utils": "0.0.10",
|
||||||
|
"protobufjs": "^7.1.2",
|
||||||
|
"qrcode": "^1.5.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"copy-webpack-plugin": "^11.0.0",
|
||||||
|
"webpack": "^5.74.0",
|
||||||
|
"webpack-cli": "^4.10.0",
|
||||||
|
"webpack-dev-server": "^4.11.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
const CopyWebpackPlugin = require("copy-webpack-plugin");
|
||||||
|
const path = require("path");
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: "./index.js",
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, "build"),
|
||||||
|
filename: "index.js",
|
||||||
|
},
|
||||||
|
experiments: {
|
||||||
|
asyncWebAssembly: true,
|
||||||
|
},
|
||||||
|
mode: "development",
|
||||||
|
plugins: [
|
||||||
|
new CopyWebpackPlugin({
|
||||||
|
patterns: ["index.html", "favicon.ico", "favicon.png", "manifest.json"],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
State of this example: **work in progress**
|
||||||
|
|
||||||
|
What's done:
|
||||||
|
- By using `js-noise` users can establish secure communication channel.
|
||||||
|
- This channel is used to exchange `offer/answer` to initiate direct WebRTC connection.
|
||||||
|
|
||||||
|
What should be done:
|
||||||
|
- `STUN` server: in order not to loose benefits of peer-to-peer protocols used underneath we should find a way to be able to retrieve coordinates of a user to build `offer/answer` by not involving one `STUN` server for it;
|
||||||
|
- `TURN` server: similarly to prev point we should be able to cover a need to create WebRTC connection for users who are behind secure `NAT` and are not able to communicated just as it is.
|
||||||
|
|
||||||
|
Additional reading that explains why `STUN/TURN` is not easily removable from the equation: https://github.com/libp2p/specs/pull/497/files#diff-2cb0b0dcc282bd123b21f5a0610e8a01b516fc453b95c655cf7e16734f2f7b11R48-R53
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -0,0 +1,198 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||||
|
<title>Waku NoiseRTC</title>
|
||||||
|
<link rel="apple-touch-icon" href="./favicon.png" />
|
||||||
|
<link rel="manifest" href="./manifest.json" />
|
||||||
|
<link rel="icon" href="./favicon.ico" />
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
word-wrap: break-word;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 300px;
|
||||||
|
max-width: 800px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3:last-of-type {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 span,
|
||||||
|
h3 span {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
color: #9ea13b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success {
|
||||||
|
color: #3ba183;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
color: #c84740;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.progress {
|
||||||
|
color: white;
|
||||||
|
background-color: #9ea13b;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.success {
|
||||||
|
color: white;
|
||||||
|
background-color: #3ba183;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.error {
|
||||||
|
color: white;
|
||||||
|
background-color: #c84740;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pairingInfo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pairingInfo input {
|
||||||
|
display: block;
|
||||||
|
min-width: 250px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
padding: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pairingInfo button {
|
||||||
|
flex-grow: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pairingInfo button + button {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatArea {
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatArea ul {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatArea ul li + li {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatArea div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatArea div > * {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
padding: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="status">
|
||||||
|
<h3>
|
||||||
|
<b>Waku Node Status:</b>
|
||||||
|
<span id="waku-status" class="progress">connecting...</span>
|
||||||
|
</h3>
|
||||||
|
<h3 id="handshake-span">
|
||||||
|
<b>Handshake Status:</b>
|
||||||
|
<span id="handshake-status" class="progress">waiting for waku</span>
|
||||||
|
</h3>
|
||||||
|
<h3>
|
||||||
|
<b>RTC Status:</b>
|
||||||
|
<span id="rtc-status" class="progress"
|
||||||
|
>waiting for noise to be established</span
|
||||||
|
>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pairingInfo" id="qr-url-container" style="display: none">
|
||||||
|
<h2>Pairing information</h2>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="qr-url"
|
||||||
|
readonly
|
||||||
|
placeholder="generating URL..."
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<button id="copy-url" style="width: 100px">Copy URL</button>
|
||||||
|
<button id="open-tab" style="width: 100px">Open in new</button>
|
||||||
|
</div>
|
||||||
|
<canvas id="qr-canvas"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chatArea" id="chat-area" style="display: none">
|
||||||
|
<h2>Chat</h2>
|
||||||
|
<ul id="messages"></ul>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<input id="nick-input" placeholder="Choose a nickname" type="text" />
|
||||||
|
<textarea
|
||||||
|
id="text-input"
|
||||||
|
placeholder="Type your message here"
|
||||||
|
type="text"
|
||||||
|
></textarea>
|
||||||
|
<button id="send-btn" type="button" disabled>Send message</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="./index.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,464 @@
|
||||||
|
import { createLightNode, waitForRemotePeer } from "@waku/sdk";
|
||||||
|
import * as utils from "@waku/utils/bytes";
|
||||||
|
import * as noise from "@waku/noise";
|
||||||
|
import protobuf from "protobufjs";
|
||||||
|
import QRCode from "qrcode";
|
||||||
|
|
||||||
|
// Protobuf
|
||||||
|
const ProtoMessage = new protobuf.Type("Message").add(
|
||||||
|
new protobuf.Field("data", 3, "string")
|
||||||
|
);
|
||||||
|
|
||||||
|
main();
|
||||||
|
|
||||||
|
async function main() {
|
||||||
|
const ui = initUI();
|
||||||
|
ui.waku.connecting();
|
||||||
|
|
||||||
|
// Starting the node
|
||||||
|
const node = await createLightNode({ defaultBootstrap: true });
|
||||||
|
|
||||||
|
try {
|
||||||
|
await node.start();
|
||||||
|
await waitForRemotePeer(node, ["filter", "lightpush"]);
|
||||||
|
|
||||||
|
ui.waku.connected();
|
||||||
|
|
||||||
|
const myStaticKey = noise.generateX25519KeyPair();
|
||||||
|
const urlPairingInfo = getPairingInfoFromURL();
|
||||||
|
|
||||||
|
const pairingObj = new noise.WakuPairing(
|
||||||
|
node.lightPush,
|
||||||
|
node.filter,
|
||||||
|
myStaticKey,
|
||||||
|
urlPairingInfo || new noise.ResponderParameters()
|
||||||
|
);
|
||||||
|
const pExecute = pairingObj.execute(120000); // timeout after 2m
|
||||||
|
|
||||||
|
scheduleHandshakeAuthConfirmation(pairingObj, ui);
|
||||||
|
|
||||||
|
let sendWakuMessage;
|
||||||
|
let listenToWakuMessages;
|
||||||
|
|
||||||
|
try {
|
||||||
|
ui.handshake.waiting();
|
||||||
|
|
||||||
|
if (!urlPairingInfo) {
|
||||||
|
const pairingURL = buildPairingURLFromObj(pairingObj);
|
||||||
|
ui.shareInfo.setURL(pairingURL);
|
||||||
|
ui.shareInfo.renderQR(pairingURL);
|
||||||
|
ui.shareInfo.show();
|
||||||
|
}
|
||||||
|
|
||||||
|
[sendWakuMessage, listenToWakuMessages] = await buildWakuMessage(
|
||||||
|
node,
|
||||||
|
pExecute
|
||||||
|
);
|
||||||
|
|
||||||
|
ui.handshake.connected();
|
||||||
|
ui.shareInfo.hide();
|
||||||
|
} catch (err) {
|
||||||
|
ui.handshake.error(err.message);
|
||||||
|
ui.hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
ui.message.display();
|
||||||
|
|
||||||
|
const { peerConnection, sendMessage: sendRTCMessage } = initRTC({
|
||||||
|
ui,
|
||||||
|
onReceive: ui.message.onReceive.bind(ui.message),
|
||||||
|
});
|
||||||
|
|
||||||
|
peerConnection.onicecandidate = async (event) => {
|
||||||
|
if (event.candidate) {
|
||||||
|
console.log("candidate sent");
|
||||||
|
try {
|
||||||
|
ui.rtc.sendingCandidate();
|
||||||
|
await sendWakuMessage({
|
||||||
|
type: "candidate",
|
||||||
|
candidate: event.candidate,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
ui.rtc.error(error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const sendOffer = async () => {
|
||||||
|
console.log("offer sent");
|
||||||
|
ui.rtc.sendingOffer();
|
||||||
|
|
||||||
|
try {
|
||||||
|
const offer = await peerConnection.createOffer();
|
||||||
|
await peerConnection.setLocalDescription(offer);
|
||||||
|
|
||||||
|
await sendWakuMessage({
|
||||||
|
type: "offer",
|
||||||
|
offer,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
ui.rtc.error(error.message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const sendAnswer = async (data) => {
|
||||||
|
console.log("answer sent");
|
||||||
|
ui.rtc.sendingAnswer();
|
||||||
|
try {
|
||||||
|
await peerConnection.setRemoteDescription(
|
||||||
|
new RTCSessionDescription(data.offer)
|
||||||
|
);
|
||||||
|
|
||||||
|
const answer = await peerConnection.createAnswer();
|
||||||
|
peerConnection.setLocalDescription(answer);
|
||||||
|
|
||||||
|
await sendWakuMessage({
|
||||||
|
type: "answer",
|
||||||
|
answer,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
ui.rtc.error(error.message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const receiveAnswer = async (data) => {
|
||||||
|
try {
|
||||||
|
console.log("answer received");
|
||||||
|
await peerConnection.setRemoteDescription(
|
||||||
|
new RTCSessionDescription(data.answer)
|
||||||
|
);
|
||||||
|
console.log("answer saved");
|
||||||
|
|
||||||
|
await sendWakuMessage({
|
||||||
|
type: "ready",
|
||||||
|
text: "received answer",
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
ui.rtc.error(error.message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const receiveCandidate = async (data) => {
|
||||||
|
try {
|
||||||
|
console.log("candidate saved");
|
||||||
|
await peerConnection.addIceCandidate(
|
||||||
|
new RTCIceCandidate(data.candidate)
|
||||||
|
);
|
||||||
|
} catch (error) {
|
||||||
|
ui.rtc.error(error.message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleWakuMessages = async (data) => {
|
||||||
|
if (data.type === "offer") {
|
||||||
|
await sendAnswer(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.type === "answer") {
|
||||||
|
await receiveAnswer(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.type === "ready") {
|
||||||
|
console.log("RTC: partner is", data.text);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.type === "candidate") {
|
||||||
|
await receiveCandidate(data);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
await listenToWakuMessages(handleWakuMessages);
|
||||||
|
ui.message.onSend(sendRTCMessage);
|
||||||
|
|
||||||
|
// if we are initiator of Noise handshake
|
||||||
|
// let's initiate Web RTC as well
|
||||||
|
if (!urlPairingInfo) {
|
||||||
|
await sendOffer();
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
ui.waku.error(err.message);
|
||||||
|
ui.hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildPairingURLFromObj(pairingObj) {
|
||||||
|
const pInfo = pairingObj.getPairingInfo();
|
||||||
|
|
||||||
|
// Data to encode in the QR code. The qrMessageNametag too to the QR string (separated by )
|
||||||
|
const messageNameTagParam = `messageNameTag=${utils.bytesToHex(
|
||||||
|
pInfo.qrMessageNameTag
|
||||||
|
)}`;
|
||||||
|
const qrCodeParam = `qrCode=${encodeURIComponent(pInfo.qrCode)}`;
|
||||||
|
|
||||||
|
return `${window.location.href}?${messageNameTagParam}&${qrCodeParam}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPairingInfoFromURL() {
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
|
||||||
|
const messageNameTag = urlParams.get("messageNameTag");
|
||||||
|
const qrCodeString = urlParams.get("qrCode");
|
||||||
|
|
||||||
|
if (!(messageNameTag && qrCodeString)) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
return new noise.InitiatorParameters(
|
||||||
|
decodeURIComponent(qrCodeString),
|
||||||
|
utils.hexToBytes(messageNameTag)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function scheduleHandshakeAuthConfirmation(pairingObj, ui) {
|
||||||
|
const authCode = await pairingObj.getAuthCode();
|
||||||
|
ui.handshake.connecting();
|
||||||
|
pairingObj.validateAuthCode(confirm("Confirm that authcode is: " + authCode));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function buildWakuMessage(node, noiseExecute) {
|
||||||
|
const [encoder, decoder] = await noiseExecute;
|
||||||
|
|
||||||
|
const sendMessage = async (message) => {
|
||||||
|
let payload = ProtoMessage.create({
|
||||||
|
data: JSON.stringify(message),
|
||||||
|
});
|
||||||
|
payload = ProtoMessage.encode(payload).finish();
|
||||||
|
|
||||||
|
return node.lightPush.send(encoder, { payload });
|
||||||
|
};
|
||||||
|
|
||||||
|
const listenToMessages = async (fn) => {
|
||||||
|
return node.filter.subscribe([decoder], ({ payload }) => {
|
||||||
|
const { data } = ProtoMessage.decode(payload);
|
||||||
|
fn(JSON.parse(data));
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return [sendMessage, listenToMessages];
|
||||||
|
}
|
||||||
|
|
||||||
|
function initRTC({ ui, onReceive }) {
|
||||||
|
const configuration = {
|
||||||
|
iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
|
||||||
|
};
|
||||||
|
const peerConnection = new RTCPeerConnection(configuration);
|
||||||
|
const sendChannel = peerConnection.createDataChannel("chat");
|
||||||
|
|
||||||
|
let receiveChannel;
|
||||||
|
|
||||||
|
sendChannel.onopen = (event) => {
|
||||||
|
ui.rtc.ready();
|
||||||
|
console.log("onopen send", event);
|
||||||
|
};
|
||||||
|
|
||||||
|
peerConnection.ondatachannel = (event) => {
|
||||||
|
receiveChannel = event.channel;
|
||||||
|
|
||||||
|
receiveChannel.onmessage = (event) => {
|
||||||
|
onReceive(JSON.parse(event.data));
|
||||||
|
};
|
||||||
|
|
||||||
|
receiveChannel.onopen = (event) => {
|
||||||
|
ui.rtc.ready();
|
||||||
|
console.log("onopen receive", event);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const sendMessage = (text, nick) => {
|
||||||
|
sendChannel.send(JSON.stringify({ text, nick, timestamp: Date.now() }));
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
peerConnection,
|
||||||
|
sendChannel,
|
||||||
|
receiveChannel,
|
||||||
|
sendMessage,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function initUI() {
|
||||||
|
const messagesList = document.getElementById("messages");
|
||||||
|
const nicknameInput = document.getElementById("nick-input");
|
||||||
|
const textInput = document.getElementById("text-input");
|
||||||
|
const sendButton = document.getElementById("send-btn");
|
||||||
|
const chatArea = document.getElementById("chat-area");
|
||||||
|
const wakuStatusSpan = document.getElementById("waku-status");
|
||||||
|
const handshakeStatusSpan = document.getElementById("handshake-status");
|
||||||
|
|
||||||
|
const qrCanvas = document.getElementById("qr-canvas");
|
||||||
|
const qrUrlContainer = document.getElementById("qr-url-container");
|
||||||
|
const qrUrl = document.getElementById("qr-url");
|
||||||
|
const copyURLButton = document.getElementById("copy-url");
|
||||||
|
const openTabButton = document.getElementById("open-tab");
|
||||||
|
|
||||||
|
const rtcStatus = document.getElementById("rtc-status");
|
||||||
|
const connectChat = document.getElementById("connect-chat-btn");
|
||||||
|
|
||||||
|
copyURLButton.onclick = () => {
|
||||||
|
const copyText = document.getElementById("qr-url"); // need to get it each time otherwise copying does not work
|
||||||
|
copyText.select();
|
||||||
|
copyText.setSelectionRange(0, 99999);
|
||||||
|
navigator.clipboard.writeText(copyText.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
openTabButton.onclick = () => {
|
||||||
|
window.open(qrUrl.value, "_blank");
|
||||||
|
};
|
||||||
|
|
||||||
|
const disableChatUIStateIfNeeded = () => {
|
||||||
|
const readyToSend = nicknameInput.value !== "";
|
||||||
|
textInput.disabled = !readyToSend;
|
||||||
|
sendButton.disabled = !readyToSend;
|
||||||
|
};
|
||||||
|
nicknameInput.onchange = disableChatUIStateIfNeeded;
|
||||||
|
nicknameInput.onblur = disableChatUIStateIfNeeded;
|
||||||
|
|
||||||
|
return {
|
||||||
|
shareInfo: {
|
||||||
|
setURL(url) {
|
||||||
|
qrUrl.value = url;
|
||||||
|
},
|
||||||
|
hide() {
|
||||||
|
qrUrlContainer.style.display = "none";
|
||||||
|
},
|
||||||
|
show() {
|
||||||
|
qrUrlContainer.style.display = "flex";
|
||||||
|
},
|
||||||
|
renderQR(url) {
|
||||||
|
QRCode.toCanvas(qrCanvas, url, (err) => {
|
||||||
|
if (err) {
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
waku: {
|
||||||
|
_val(msg) {
|
||||||
|
wakuStatusSpan.innerText = msg;
|
||||||
|
},
|
||||||
|
_class(name) {
|
||||||
|
wakuStatusSpan.className = name;
|
||||||
|
},
|
||||||
|
connecting() {
|
||||||
|
this._val("connecting...");
|
||||||
|
this._class("progress");
|
||||||
|
},
|
||||||
|
connected() {
|
||||||
|
this._val("connected");
|
||||||
|
this._class("success");
|
||||||
|
},
|
||||||
|
error(msg) {
|
||||||
|
this._val(msg);
|
||||||
|
this._class("error");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
handshake: {
|
||||||
|
_val(val) {
|
||||||
|
handshakeStatusSpan.innerText = val;
|
||||||
|
},
|
||||||
|
_class(name) {
|
||||||
|
handshakeStatusSpan.className = name;
|
||||||
|
},
|
||||||
|
error(msg) {
|
||||||
|
this._val(msg);
|
||||||
|
this._class("error");
|
||||||
|
},
|
||||||
|
waiting() {
|
||||||
|
this._val("waiting for handshake...");
|
||||||
|
this._class("progress");
|
||||||
|
},
|
||||||
|
generating() {
|
||||||
|
this._val("generating QR code...");
|
||||||
|
this._class("progress");
|
||||||
|
},
|
||||||
|
connecting() {
|
||||||
|
this._val("executing handshake...");
|
||||||
|
this._class("progress");
|
||||||
|
},
|
||||||
|
connected() {
|
||||||
|
this._val("handshake completed!");
|
||||||
|
this._class("success");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
message: {
|
||||||
|
_render({ time, text, nick }) {
|
||||||
|
messagesList.innerHTML += `
|
||||||
|
<li>
|
||||||
|
(${nick})
|
||||||
|
<strong>${text}</strong>
|
||||||
|
<i>[${new Date(time).toISOString()}]</i>
|
||||||
|
</li>
|
||||||
|
`;
|
||||||
|
},
|
||||||
|
_status(text, className) {
|
||||||
|
sendButton.className = className;
|
||||||
|
},
|
||||||
|
onReceive(data) {
|
||||||
|
const { timestamp, nick, text } = data;
|
||||||
|
|
||||||
|
this._render({
|
||||||
|
nick,
|
||||||
|
time: timestamp,
|
||||||
|
text,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onSend(cb) {
|
||||||
|
sendButton.addEventListener("click", async () => {
|
||||||
|
try {
|
||||||
|
this._status("sending...", "progress");
|
||||||
|
await cb(textInput.value, nicknameInput.value);
|
||||||
|
this._status("sent", "success");
|
||||||
|
|
||||||
|
this._render({
|
||||||
|
time: Date.now(), // a bit different from what receiver will see but for the matter of example is good enough
|
||||||
|
text: textInput.value,
|
||||||
|
nick: nicknameInput.value,
|
||||||
|
});
|
||||||
|
textInput.value = "";
|
||||||
|
} catch (e) {
|
||||||
|
this._status(`error: ${e.message}`, "error");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
display() {
|
||||||
|
chatArea.style.display = "block";
|
||||||
|
this._status("waiting for input", "progress");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rtc: {
|
||||||
|
_val(msg) {
|
||||||
|
rtcStatus.innerText = msg;
|
||||||
|
},
|
||||||
|
_class(name) {
|
||||||
|
rtcStatus.className = name;
|
||||||
|
},
|
||||||
|
sendingOffer() {
|
||||||
|
this._val("sending offer");
|
||||||
|
this._class("progress");
|
||||||
|
},
|
||||||
|
sendingAnswer() {
|
||||||
|
this._val("sending answer");
|
||||||
|
this._class("progress");
|
||||||
|
},
|
||||||
|
sendingCandidate() {
|
||||||
|
this._val("sending ice candidate");
|
||||||
|
this._class("progress");
|
||||||
|
},
|
||||||
|
ready() {
|
||||||
|
this._val("ready");
|
||||||
|
this._class("success");
|
||||||
|
},
|
||||||
|
error(msg) {
|
||||||
|
this._val(msg);
|
||||||
|
this._class("error");
|
||||||
|
},
|
||||||
|
onConnect(cb) {
|
||||||
|
connectChat.addEventListener("click", cb);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
hide() {
|
||||||
|
this.shareInfo.hide();
|
||||||
|
chatArea.style.display = "none";
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"name": "Waku NoiseRTC",
|
||||||
|
"description": "Example showing WebRTC with Waku Noise.",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "favicon.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "192x192"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#ffffff",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"name": "@waku/noise-rtc",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.1.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"build": "webpack --config webpack.config.js",
|
||||||
|
"start": "webpack-dev-server"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@waku/sdk": "0.0.18",
|
||||||
|
"@waku/noise": "0.0.3-31510da",
|
||||||
|
"@waku/utils": "0.0.10",
|
||||||
|
"protobufjs": "^7.1.2",
|
||||||
|
"qrcode": "^1.5.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"copy-webpack-plugin": "^11.0.0",
|
||||||
|
"webpack": "^5.74.0",
|
||||||
|
"webpack-cli": "^4.10.0",
|
||||||
|
"webpack-dev-server": "^4.11.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
const CopyWebpackPlugin = require("copy-webpack-plugin");
|
||||||
|
const path = require("path");
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: "./index.js",
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, "build"),
|
||||||
|
filename: "index.js",
|
||||||
|
},
|
||||||
|
experiments: {
|
||||||
|
asyncWebAssembly: true,
|
||||||
|
},
|
||||||
|
mode: "development",
|
||||||
|
plugins: [
|
||||||
|
new CopyWebpackPlugin({
|
||||||
|
patterns: ["index.html", "favicon.ico", "favicon.png", "manifest.json"],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
/.angular/cache
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
# Minimal Angular (v13) Waku Relay App
|
||||||
|
|
||||||
|
**Demonstrates**:
|
||||||
|
|
||||||
|
- Group messaging
|
||||||
|
- Angular
|
||||||
|
- Waku Relay
|
||||||
|
- Protobuf using `protobufjs`
|
||||||
|
- No async/await syntax
|
||||||
|
|
||||||
|
A barebone messaging app to illustrate the seamless integration of `js-waku` into AngularJS.
|
||||||
|
|
||||||
|
The `master` branch's HEAD is deployed at https://examples.waku.org/relay-angular-chat/.
|
||||||
|
|
||||||
|
To run a development version locally, do:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
git clone https://github.com/waku-org/js-waku-examples
|
||||||
|
cd js-waku-examples/examples/relay-angular-chat
|
||||||
|
npm install
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
### Known issues
|
||||||
|
|
||||||
|
There is a problem when using `npm` to install/run the Angular app.
|
||||||
|
|
@ -0,0 +1,97 @@
|
||||||
|
{
|
||||||
|
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||||
|
"version": 1,
|
||||||
|
"newProjectRoot": "projects",
|
||||||
|
"projects": {
|
||||||
|
"relay-angular-chat": {
|
||||||
|
"projectType": "application",
|
||||||
|
"schematics": {
|
||||||
|
"@schematics/angular:application": {
|
||||||
|
"strict": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"root": "",
|
||||||
|
"sourceRoot": "src",
|
||||||
|
"prefix": "app",
|
||||||
|
"architect": {
|
||||||
|
"build": {
|
||||||
|
"builder": "@angular-devkit/build-angular:browser",
|
||||||
|
"options": {
|
||||||
|
"outputPath": "build",
|
||||||
|
"index": "src/index.html",
|
||||||
|
"main": "src/main.ts",
|
||||||
|
"tsConfig": "tsconfig.app.json",
|
||||||
|
"assets": ["src/favicon.ico", "src/assets"],
|
||||||
|
"styles": ["src/styles.css"],
|
||||||
|
"scripts": []
|
||||||
|
},
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"budgets": [
|
||||||
|
{
|
||||||
|
"type": "initial",
|
||||||
|
"maximumWarning": "500kb",
|
||||||
|
"maximumError": "2mb"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "anyComponentStyle",
|
||||||
|
"maximumWarning": "2kb",
|
||||||
|
"maximumError": "4kb"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"fileReplacements": [
|
||||||
|
{
|
||||||
|
"replace": "src/environments/environment.ts",
|
||||||
|
"with": "src/environments/environment.prod.ts"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"outputHashing": "all"
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"buildOptimizer": false,
|
||||||
|
"optimization": false,
|
||||||
|
"vendorChunk": true,
|
||||||
|
"extractLicenses": false,
|
||||||
|
"sourceMap": true,
|
||||||
|
"namedChunks": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaultConfiguration": "production"
|
||||||
|
},
|
||||||
|
"serve": {
|
||||||
|
"builder": "@angular-devkit/build-angular:dev-server",
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"browserTarget": "relay-angular-chat:build:production"
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"browserTarget": "relay-angular-chat:build:development"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaultConfiguration": "development"
|
||||||
|
},
|
||||||
|
"extract-i18n": {
|
||||||
|
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||||
|
"options": {
|
||||||
|
"browserTarget": "relay-angular-chat:build"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"test": {
|
||||||
|
"builder": "@angular-devkit/build-angular:karma",
|
||||||
|
"options": {
|
||||||
|
"main": "src/test.ts",
|
||||||
|
"tsConfig": "tsconfig.spec.json",
|
||||||
|
"karmaConfig": "karma.conf.js",
|
||||||
|
"assets": ["src/favicon.ico", "src/assets"],
|
||||||
|
"styles": ["src/styles.css"],
|
||||||
|
"scripts": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaultProject": "relay-angular-chat",
|
||||||
|
"cli": {
|
||||||
|
"analytics": false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
// Karma configuration file, see link for more information
|
||||||
|
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
||||||
|
|
||||||
|
module.exports = function (config) {
|
||||||
|
config.set({
|
||||||
|
basePath: "",
|
||||||
|
frameworks: ["jasmine", "@angular-devkit/build-angular"],
|
||||||
|
plugins: [
|
||||||
|
require("karma-jasmine"),
|
||||||
|
require("karma-chrome-launcher"),
|
||||||
|
require("karma-jasmine-html-reporter"),
|
||||||
|
require("karma-coverage"),
|
||||||
|
require("@angular-devkit/build-angular/plugins/karma"),
|
||||||
|
],
|
||||||
|
client: {
|
||||||
|
jasmine: {
|
||||||
|
// you can add configuration options for Jasmine here
|
||||||
|
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
|
||||||
|
// for example, you can disable the random execution with `random: false`
|
||||||
|
// or set a specific seed with `seed: 4321`
|
||||||
|
},
|
||||||
|
clearContext: false, // leave Jasmine Spec Runner output visible in browser
|
||||||
|
},
|
||||||
|
jasmineHtmlReporter: {
|
||||||
|
suppressAll: true, // removes the duplicated traces
|
||||||
|
},
|
||||||
|
coverageReporter: {
|
||||||
|
dir: require("path").join(__dirname, "./coverage/relay-angular-chat"),
|
||||||
|
subdir: ".",
|
||||||
|
reporters: [{ type: "html" }, { type: "text-summary" }],
|
||||||
|
},
|
||||||
|
reporters: ["progress", "kjhtml"],
|
||||||
|
port: 9876,
|
||||||
|
colors: true,
|
||||||
|
logLevel: config.LOG_INFO,
|
||||||
|
autoWatch: true,
|
||||||
|
browsers: ["Chrome"],
|
||||||
|
singleRun: false,
|
||||||
|
restartOnFileChange: true,
|
||||||
|
});
|
||||||
|
};
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,50 @@
|
||||||
|
{
|
||||||
|
"name": "@waku/relay-angular-chat",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"homepage": "/relay-angular-chat",
|
||||||
|
"scripts": {
|
||||||
|
"ng": "ng",
|
||||||
|
"start": "ng serve",
|
||||||
|
"build": "ng build --base-href /relay-angular-chat --deploy-url /relay-angular-chat/",
|
||||||
|
"watch": "ng build --watch --configuration development",
|
||||||
|
"test": "exit 0",
|
||||||
|
"test:local": "ng test",
|
||||||
|
"test:ci": "ng test --watch=false --browsers=ChromeHeadless"
|
||||||
|
},
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@angular/animations": "~14.2.11",
|
||||||
|
"@angular/common": "~14.2.11",
|
||||||
|
"@angular/compiler": "~14.2.11",
|
||||||
|
"@angular/core": "~14.2.11",
|
||||||
|
"@angular/forms": "~14.2.11",
|
||||||
|
"@angular/platform-browser": "~14.2.11",
|
||||||
|
"@angular/platform-browser-dynamic": "~14.2.11",
|
||||||
|
"@angular/router": "~14.2.11",
|
||||||
|
"@waku/core": "^0.0.6",
|
||||||
|
"@waku/create": "^0.0.4",
|
||||||
|
"@waku/interfaces": "^0.0.5",
|
||||||
|
"protobufjs": "^7.1.2",
|
||||||
|
"rxjs": "~7.5.7",
|
||||||
|
"tslib": "^2.4.1",
|
||||||
|
"zone.js": "~0.11.8"
|
||||||
|
},
|
||||||
|
"browser": {
|
||||||
|
"util": false
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@angular-devkit/build-angular": "~14.2.10",
|
||||||
|
"@angular/cli": "~14.2.10",
|
||||||
|
"@angular/compiler-cli": "~14.2.11",
|
||||||
|
"@types/jasmine": "~4.3.0",
|
||||||
|
"@types/node": "^17.0.45",
|
||||||
|
"is-ci-cli": "^2.2.0",
|
||||||
|
"jasmine-core": "~4.3.0",
|
||||||
|
"karma": "~6.4.1",
|
||||||
|
"karma-chrome-launcher": "~3.1.1",
|
||||||
|
"karma-coverage": "~2.2.0",
|
||||||
|
"karma-jasmine": "~5.1.0",
|
||||||
|
"karma-jasmine-html-reporter": "~2.0.0",
|
||||||
|
"typescript": "~4.7.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
declare module "protons";
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
declare module "time-cache" {
|
||||||
|
interface ITimeCache {
|
||||||
|
put(key: string, value: any, validity: number): void;
|
||||||
|
get(key: string): any;
|
||||||
|
has(key: string): boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
type TimeCache = ITimeCache;
|
||||||
|
|
||||||
|
function TimeCache(options: object): TimeCache;
|
||||||
|
|
||||||
|
export = TimeCache;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
/* Application-wide Styles */
|
||||||
|
h1 {
|
||||||
|
color: #369;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 250%;
|
||||||
|
}
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
color: #444;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
font-weight: lighter;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 2em;
|
||||||
|
}
|
||||||
|
body,
|
||||||
|
input[type="text"],
|
||||||
|
button {
|
||||||
|
color: #333;
|
||||||
|
font-family: Cambria, Georgia, serif;
|
||||||
|
}
|
||||||
|
/* everywhere else */
|
||||||
|
* {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<h1>{{ title }}</h1>
|
||||||
|
<p>Waku node's status: {{ wakuStatus }}</p>
|
||||||
|
<app-messages></app-messages>
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
import { TestBed } from "@angular/core/testing";
|
||||||
|
import { AppComponent } from "./app.component";
|
||||||
|
import { MessagesComponent } from "./messages/messages.component";
|
||||||
|
|
||||||
|
describe("AppComponent", () => {
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [AppComponent, MessagesComponent],
|
||||||
|
}).compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
xit("should create the app", () => {
|
||||||
|
const fixture = TestBed.createComponent(AppComponent);
|
||||||
|
const app = fixture.componentInstance;
|
||||||
|
expect(app).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
xit(`should have as title 'relay-angular-chat'`, () => {
|
||||||
|
const fixture = TestBed.createComponent(AppComponent);
|
||||||
|
const app = fixture.componentInstance;
|
||||||
|
expect(app.title).toEqual("relay-angular-chat");
|
||||||
|
});
|
||||||
|
|
||||||
|
xit("should render title", () => {
|
||||||
|
const fixture = TestBed.createComponent(AppComponent);
|
||||||
|
fixture.detectChanges();
|
||||||
|
const compiled = fixture.nativeElement as HTMLElement;
|
||||||
|
expect(compiled.querySelector(".h1")?.textContent).toContain(
|
||||||
|
"relay-angular-chat"
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { Component } from "@angular/core";
|
||||||
|
import { WakuService } from "./waku.service";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "app-root",
|
||||||
|
templateUrl: "./app.component.html",
|
||||||
|
styleUrls: ["./app.component.css"],
|
||||||
|
})
|
||||||
|
export class AppComponent {
|
||||||
|
title: string = "relay-angular-chat";
|
||||||
|
wakuStatus!: string;
|
||||||
|
|
||||||
|
constructor(private wakuService: WakuService) {}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.wakuService.init();
|
||||||
|
this.wakuService.wakuStatus.subscribe((wakuStatus) => {
|
||||||
|
this.wakuStatus = wakuStatus;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { NgModule } from "@angular/core";
|
||||||
|
import { BrowserModule } from "@angular/platform-browser";
|
||||||
|
import { AppComponent } from "./app.component";
|
||||||
|
import { MessagesComponent } from "./messages/messages.component";
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [AppComponent, MessagesComponent],
|
||||||
|
imports: [BrowserModule],
|
||||||
|
providers: [],
|
||||||
|
bootstrap: [AppComponent],
|
||||||
|
})
|
||||||
|
export class AppModule {}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<button (click)="sendMessage()" [disabled]="wakuStatus !== 'Connected'">
|
||||||
|
Send Message
|
||||||
|
</button>
|
||||||
|
<h2>Messages</h2>
|
||||||
|
<ul class="messages">
|
||||||
|
<li *ngFor="let message of messages">
|
||||||
|
<span>{{ message.timestamp }} {{ message.text }}</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { ComponentFixture, TestBed } from "@angular/core/testing";
|
||||||
|
import { MessagesComponent } from "./messages.component";
|
||||||
|
|
||||||
|
describe("MessagesComponent", () => {
|
||||||
|
let component: MessagesComponent;
|
||||||
|
let fixture: ComponentFixture<MessagesComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [MessagesComponent],
|
||||||
|
}).compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(MessagesComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
xit("should create", () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
import { Component, OnInit } from "@angular/core";
|
||||||
|
import { WakuService } from "../waku.service";
|
||||||
|
import type { WakuPrivacy } from "@waku/interfaces";
|
||||||
|
import protobuf from "protobufjs";
|
||||||
|
import { DecoderV0, EncoderV0 } from "@waku/core/lib/waku_message/version_0";
|
||||||
|
import type { MessageV0 } from "@waku/core/lib/waku_message/version_0";
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "app-messages",
|
||||||
|
templateUrl: "./messages.component.html",
|
||||||
|
styleUrls: ["./messages.component.css"],
|
||||||
|
})
|
||||||
|
export class MessagesComponent implements OnInit {
|
||||||
|
contentTopic: string = `/js-waku-examples/1/chat/proto`;
|
||||||
|
decoder: DecoderV0;
|
||||||
|
encoder: EncoderV0;
|
||||||
|
messages: MessageInterface[] = [];
|
||||||
|
messageCount: number = 0;
|
||||||
|
waku!: WakuPrivacy;
|
||||||
|
wakuStatus!: string;
|
||||||
|
deleteObserver?: () => void;
|
||||||
|
|
||||||
|
constructor(private wakuService: WakuService) {
|
||||||
|
this.decoder = new DecoderV0(this.contentTopic);
|
||||||
|
this.encoder = new EncoderV0(this.contentTopic);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.wakuService.wakuStatus.subscribe((wakuStatus) => {
|
||||||
|
this.wakuStatus = wakuStatus;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.wakuService.waku.subscribe((waku) => {
|
||||||
|
this.waku = waku;
|
||||||
|
this.deleteObserver = this.waku.relay.addObserver(
|
||||||
|
this.decoder,
|
||||||
|
this.processIncomingMessages
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
window.onbeforeunload = () => this.ngOnDestroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy(): void {
|
||||||
|
if (this.deleteObserver) this.deleteObserver();
|
||||||
|
}
|
||||||
|
|
||||||
|
sendMessage(): void {
|
||||||
|
const time = new Date().getTime();
|
||||||
|
|
||||||
|
const protoMsg = ProtoChatMessage.create({
|
||||||
|
timestamp: time,
|
||||||
|
text: `Here is a message #${this.messageCount}`,
|
||||||
|
});
|
||||||
|
|
||||||
|
const payload = ProtoChatMessage.encode(protoMsg).finish();
|
||||||
|
this.waku.relay.send(this.encoder, { payload }).then(() => {
|
||||||
|
console.log(`Message #${this.messageCount} sent`);
|
||||||
|
this.messageCount += 1;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
processIncomingMessages = (wakuMessage: MessageV0) => {
|
||||||
|
if (!wakuMessage.payload) return;
|
||||||
|
|
||||||
|
const { text, timestamp } = ProtoChatMessage.decode(
|
||||||
|
wakuMessage.payload
|
||||||
|
) as unknown as { text: string; timestamp: bigint };
|
||||||
|
const time = new Date();
|
||||||
|
time.setTime(Number(timestamp));
|
||||||
|
const message = { text, timestamp: time };
|
||||||
|
|
||||||
|
this.messages.push(message);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { TestBed } from "@angular/core/testing";
|
||||||
|
|
||||||
|
import { WakuService } from "./waku.service";
|
||||||
|
|
||||||
|
describe("WakuService", () => {
|
||||||
|
let service: WakuService;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
TestBed.configureTestingModule({});
|
||||||
|
service = TestBed.inject(WakuService);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should be created", () => {
|
||||||
|
expect(service).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
import { Injectable } from "@angular/core";
|
||||||
|
import { BehaviorSubject, Subject } from "rxjs";
|
||||||
|
import { createPrivacyNode } from "@waku/create";
|
||||||
|
import { waitForRemotePeer } from "@waku/core/lib/wait_for_remote_peer";
|
||||||
|
import type { WakuPrivacy } from "@waku/interfaces";
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: "root",
|
||||||
|
})
|
||||||
|
export class WakuService {
|
||||||
|
private wakuSubject = new Subject<WakuPrivacy>();
|
||||||
|
public waku = this.wakuSubject.asObservable();
|
||||||
|
|
||||||
|
private wakuStatusSubject = new BehaviorSubject("");
|
||||||
|
public wakuStatus = this.wakuStatusSubject.asObservable();
|
||||||
|
|
||||||
|
constructor() {}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
createPrivacyNode({ defaultBootstrap: true }).then((waku) => {
|
||||||
|
waku.start().then(() => {
|
||||||
|
this.wakuSubject.next(waku);
|
||||||
|
this.wakuStatusSubject.next("Connecting...");
|
||||||
|
|
||||||
|
waitForRemotePeer(waku).then(() => {
|
||||||
|
this.wakuStatusSubject.next("Connected");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
export const environment = {
|
||||||
|
production: true,
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
// This file can be replaced during build by using the `fileReplacements` array.
|
||||||
|
// `ng build` replaces `environment.ts` with `environment.prod.ts`.
|
||||||
|
// The list of file replacements can be found in `angular.json`.
|
||||||
|
|
||||||
|
export const environment = {
|
||||||
|
production: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* For easier debugging in development mode, you can import the following file
|
||||||
|
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
|
||||||
|
*
|
||||||
|
* This import should be commented out in production mode because it will have a negative impact
|
||||||
|
* on performance if an error is thrown.
|
||||||
|
*/
|
||||||
|
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -0,0 +1,15 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>RelayAngularChat</title>
|
||||||
|
<base href="/" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link rel="apple-touch-icon" href="./favicon.png" />
|
||||||
|
<link rel="manifest" href="./manifest.json" />
|
||||||
|
<link rel="icon" href="./favicon.ico" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<app-root></app-root>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { enableProdMode } from "@angular/core";
|
||||||
|
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
|
||||||
|
|
||||||
|
import { AppModule } from "./app/app.module";
|
||||||
|
import { environment } from "./environments/environment";
|
||||||
|
|
||||||
|
import "zone.js";
|
||||||
|
|
||||||
|
if (environment.production) {
|
||||||
|
enableProdMode();
|
||||||
|
}
|
||||||
|
|
||||||
|
platformBrowserDynamic()
|
||||||
|
.bootstrapModule(AppModule)
|
||||||
|
.catch((err) => console.error(err));
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"name": "Relay Chat",
|
||||||
|
"description": "A barebone messaging app to illustrate the Angular Relay guide.",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "favicon.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "192x192"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#ffffff",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
/* You can add global styles to this file, and also import other style files */
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||||
|
|
||||||
|
import "zone.js/testing";
|
||||||
|
import { getTestBed } from "@angular/core/testing";
|
||||||
|
import {
|
||||||
|
BrowserDynamicTestingModule,
|
||||||
|
platformBrowserDynamicTesting,
|
||||||
|
} from "@angular/platform-browser-dynamic/testing";
|
||||||
|
|
||||||
|
declare const require: {
|
||||||
|
context(
|
||||||
|
path: string,
|
||||||
|
deep?: boolean,
|
||||||
|
filter?: RegExp
|
||||||
|
): {
|
||||||
|
<T>(id: string): T;
|
||||||
|
keys(): string[];
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// First, initialize the Angular testing environment.
|
||||||
|
getTestBed().initTestEnvironment(
|
||||||
|
BrowserDynamicTestingModule,
|
||||||
|
platformBrowserDynamicTesting()
|
||||||
|
);
|
||||||
|
|
||||||
|
// Then we find all the tests.
|
||||||
|
const context = require.context("./", true, /\.spec\.ts$/);
|
||||||
|
// And load the modules.
|
||||||
|
context.keys().map(context);
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||||
|
{
|
||||||
|
"extends": "./tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "./out-tsc/app",
|
||||||
|
"types": []
|
||||||
|
},
|
||||||
|
"files": ["src/main.ts"],
|
||||||
|
"include": ["src/**/*.d.ts"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||||
|
{
|
||||||
|
"compileOnSave": false,
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": "./",
|
||||||
|
"outDir": "./dist/out-tsc",
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"strict": true,
|
||||||
|
"noImplicitOverride": true,
|
||||||
|
"noPropertyAccessFromIndexSignature": true,
|
||||||
|
"noImplicitReturns": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"declaration": false,
|
||||||
|
"downlevelIteration": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"importHelpers": true,
|
||||||
|
"target": "es2020",
|
||||||
|
"module": "es2020",
|
||||||
|
"lib": ["es2020", "dom"],
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"angularCompilerOptions": {
|
||||||
|
"enableI18nLegacyMessageIdFormat": false,
|
||||||
|
"strictInjectionParameters": true,
|
||||||
|
"strictInputAccessModifiers": true,
|
||||||
|
"strictTemplates": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||||
|
{
|
||||||
|
"extends": "./tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "./out-tsc/spec",
|
||||||
|
"types": ["jasmine"]
|
||||||
|
},
|
||||||
|
"files": ["src/test.ts"],
|
||||||
|
"include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
# Direct WebRTC connection for Waku Relay
|
||||||
|
|
||||||
|
**Demonstrates**:
|
||||||
|
|
||||||
|
- Waku Relay node with direct WebRTC connection
|
||||||
|
- Pure Javascript/HTML.
|
||||||
|
|
||||||
|
This example uses WebRTC transport and Waku Relay to exchange messages.
|
||||||
|
|
||||||
|
To test the example run `npm install` and then `npm start`.
|
||||||
|
|
||||||
|
The `master` branch's HEAD is deployed at https://examples.waku.org/relay-direct-chat/.
|
||||||
|
|
||||||
|
### Steps to run an example:
|
||||||
|
1. Get a Waku node that implements `/libp2p/circuit/relay/0.2.0/hop` and `/libp2p/circuit/relay/0.2.0/stop`
|
||||||
|
1.1. Find `go-waku` node or
|
||||||
|
1.2. Build and then run `go-waku` node with following command: `./build/waku --ws true --relay true --circuit-relay true`
|
||||||
|
2. Copy node's multiaddr (e.g `/ip4/192.168.0.101/tcp/60001/ws/p2p/16Uiu2HAm9w2xeDWFJm5eeGLZfJdaPtkNatQD1xrzK5EFWSeXdFvu`)
|
||||||
|
3. In `relay-chat` example's folder run `npm install` and then `npm start`
|
||||||
|
4. Use `go-waku`'s multiaddr for **Remote node multiaddr** and press dial. Repeat in two more tabs.
|
||||||
|
5. In `tab2` copy **Local Peer Id** and use as **WebRTC Peer** in `tab1` and press dial.
|
||||||
|
6. In `tab1` or `tab2` press **Ensure WebRTC Relay connection**
|
||||||
|
7. In `tab1` press **Drop non WebRTC connections**
|
||||||
|
8. In `tab1` enter **Nickname** and **Message** and send.
|
||||||
|
9. See the message in `tab3` which was connected only to `go-waku` node.
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -0,0 +1,73 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||||
|
<title>Relay direct chat</title>
|
||||||
|
<link rel="stylesheet" href="./style.css" />
|
||||||
|
<link rel="apple-touch-icon" href="./favicon.png" />
|
||||||
|
<link rel="manifest" href="./manifest.json" />
|
||||||
|
<link rel="icon" href="./favicon.ico" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="content">
|
||||||
|
<div class="header">
|
||||||
|
<h3>Status: <span id="status"></span></h3>
|
||||||
|
|
||||||
|
<h4><label for="remoteNode">Remote node multiaddr</label></h4>
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
id="remoteNode"
|
||||||
|
value="/dns4/node-01.ac-cn-hongkong-c.go-waku.prod.statusim.net/tcp/443/wss/p2p/16Uiu2HAm1fVVprL9EaDpDw4frNX3CPfZu5cBqhtk9Ncm6WCvprpv"
|
||||||
|
/>
|
||||||
|
<button id="connectRemoteNode">Dial</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4><label for="webrtcPeer">WebRTC Peer</label></h4>
|
||||||
|
<div>
|
||||||
|
<input id="webrtcPeer" />
|
||||||
|
<button id="connectWebrtcPeer">Dial</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button id="relayWebRTC">Ensure WebRTC Relay connection</button>
|
||||||
|
<button id="dropNonWebRTC">Drop non WebRTC connections</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<details open>
|
||||||
|
<summary>Peer's information</summary>
|
||||||
|
|
||||||
|
<h4>Content topic</h4>
|
||||||
|
<p id="contentTopic"></p>
|
||||||
|
|
||||||
|
<h4>Local Peer Id</h4>
|
||||||
|
<p id="localPeerId"></p>
|
||||||
|
|
||||||
|
<h4>Remote Peer Id</h4>
|
||||||
|
<p id="remotePeerId"></p>
|
||||||
|
|
||||||
|
<h4>Relay mesh's protocols</h4>
|
||||||
|
<p id="relayMeshInfo"></p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="messages"></div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<div class="inputArea">
|
||||||
|
<input type="text" id="nickText" placeholder="Nickname" />
|
||||||
|
<textarea id="messageText" placeholder="Message"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="controls">
|
||||||
|
<button id="send">Send</button>
|
||||||
|
<button id="exit">Exit chat</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="//cdn.jsdelivr.net/npm/protobufjs@7.X.X/dist/protobuf.min.js"></script>
|
||||||
|
<script type="module" src="./index.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,340 @@
|
||||||
|
import {
|
||||||
|
createRelayNode,
|
||||||
|
bytesToUtf8,
|
||||||
|
utf8ToBytes,
|
||||||
|
createDecoder,
|
||||||
|
createEncoder,
|
||||||
|
} from "@waku/sdk";
|
||||||
|
|
||||||
|
import { webSockets } from "@libp2p/websockets";
|
||||||
|
import { all as filterAll } from "@libp2p/websockets/filters";
|
||||||
|
|
||||||
|
import { webRTC } from "@libp2p/webrtc";
|
||||||
|
import { circuitRelayTransport } from "libp2p/circuit-relay";
|
||||||
|
|
||||||
|
const CONTENT_TOPIC = "/toy-chat/2/huilong/proto";
|
||||||
|
|
||||||
|
const ui = initUI();
|
||||||
|
runApp(ui).catch((err) => {
|
||||||
|
console.error(err);
|
||||||
|
ui.setStatus(`error: ${err.message}`, "error");
|
||||||
|
});
|
||||||
|
|
||||||
|
async function runApp(ui) {
|
||||||
|
const {
|
||||||
|
info,
|
||||||
|
sendMessage,
|
||||||
|
unsubscribeFromMessages,
|
||||||
|
dial,
|
||||||
|
dialWebRTCpeer,
|
||||||
|
dropNetworkConnections,
|
||||||
|
ensureWebRTCconnectionInRelayMesh,
|
||||||
|
} = await initWakuContext({
|
||||||
|
ui,
|
||||||
|
contentTopic: CONTENT_TOPIC,
|
||||||
|
});
|
||||||
|
|
||||||
|
ui.setLocalPeer(info.localPeerId);
|
||||||
|
ui.setContentTopic(info.contentTopic);
|
||||||
|
|
||||||
|
ui.onSendMessage(sendMessage);
|
||||||
|
ui.onRemoteNodeConnect(dial);
|
||||||
|
ui.onWebrtcConnect(dialWebRTCpeer);
|
||||||
|
ui.onRelayWebRTC(ensureWebRTCconnectionInRelayMesh);
|
||||||
|
ui.onDropNonWebRTC(dropNetworkConnections);
|
||||||
|
|
||||||
|
ui.onExit(async () => {
|
||||||
|
ui.setStatus("disconnecting...", "progress");
|
||||||
|
await unsubscribeFromMessages();
|
||||||
|
ui.setStatus("disconnected", "terminated");
|
||||||
|
ui.resetMessages();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function initWakuContext({ ui, contentTopic }) {
|
||||||
|
const Decoder = createDecoder(contentTopic);
|
||||||
|
const Encoder = createEncoder({ contentTopic });
|
||||||
|
|
||||||
|
const ChatMessage = new protobuf.Type("ChatMessage")
|
||||||
|
.add(new protobuf.Field("timestamp", 1, "uint64"))
|
||||||
|
.add(new protobuf.Field("nick", 2, "string"))
|
||||||
|
.add(new protobuf.Field("text", 3, "bytes"));
|
||||||
|
|
||||||
|
ui.setStatus("starting...", "progress");
|
||||||
|
|
||||||
|
const node = await createRelayNode({
|
||||||
|
libp2p: {
|
||||||
|
addresses: {
|
||||||
|
listen: ["/webrtc"],
|
||||||
|
},
|
||||||
|
connectionGater: {
|
||||||
|
denyDialMultiaddr: () => {
|
||||||
|
// refuse to deny localhost addresses
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
transports: [
|
||||||
|
webRTC({}),
|
||||||
|
circuitRelayTransport({
|
||||||
|
discoverRelays: 1,
|
||||||
|
}),
|
||||||
|
webSockets({ filter: filterAll }),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await node.start();
|
||||||
|
|
||||||
|
// Set a filter by using Decoder for a given ContentTopic
|
||||||
|
const unsubscribeFromMessages = await node.relay.subscribe(
|
||||||
|
[Decoder],
|
||||||
|
(wakuMessage) => {
|
||||||
|
const messageObj = ChatMessage.decode(wakuMessage.payload);
|
||||||
|
ui.renderMessage({
|
||||||
|
...messageObj,
|
||||||
|
text: bytesToUtf8(messageObj.text),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
ui.setStatus("started", "success");
|
||||||
|
|
||||||
|
const localPeerId = node.libp2p.peerId.toString();
|
||||||
|
|
||||||
|
const remotePeers = await node.libp2p.peerStore.all();
|
||||||
|
const remotePeerIds = new Set(remotePeers.map((peer) => peer.id.toString()));
|
||||||
|
|
||||||
|
ui.setRemotePeer(Array.from(remotePeerIds.keys()));
|
||||||
|
|
||||||
|
node.libp2p.addEventListener("peer:connect", async (event) => {
|
||||||
|
remotePeerIds.add(event.detail.toString());
|
||||||
|
ui.setRemotePeer(Array.from(remotePeerIds.keys()));
|
||||||
|
ui.setRelayMeshInfo(node.relay.gossipSub);
|
||||||
|
});
|
||||||
|
|
||||||
|
node.libp2p.addEventListener("peer:disconnect", (event) => {
|
||||||
|
remotePeerIds.delete(event.detail.toString());
|
||||||
|
ui.setRemotePeer(Array.from(remotePeerIds.keys()));
|
||||||
|
ui.setRelayMeshInfo(node.relay.gossipSub);
|
||||||
|
});
|
||||||
|
|
||||||
|
node.libp2p.addEventListener("peer:identify", (event) => {
|
||||||
|
const peer = event.detail;
|
||||||
|
|
||||||
|
if (!peer.protocols.includes("/webrtc-signaling/0.0.1")) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
ui.setWebrtcPeer(peer.peerId.toString());
|
||||||
|
ui.setRelayMeshInfo(node.relay.gossipSub);
|
||||||
|
});
|
||||||
|
|
||||||
|
window.node = node;
|
||||||
|
|
||||||
|
return {
|
||||||
|
unsubscribeFromMessages,
|
||||||
|
info: {
|
||||||
|
contentTopic,
|
||||||
|
localPeerId,
|
||||||
|
},
|
||||||
|
sendMessage: async ({ text, nick }) => {
|
||||||
|
if (!text || !nick) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const protoMessage = ChatMessage.create({
|
||||||
|
nick,
|
||||||
|
timestamp: Date.now(),
|
||||||
|
text: utf8ToBytes(text),
|
||||||
|
});
|
||||||
|
|
||||||
|
await node.relay.send(Encoder, {
|
||||||
|
payload: ChatMessage.encode(protoMessage).finish(),
|
||||||
|
});
|
||||||
|
},
|
||||||
|
dial: async (multiaddr) => {
|
||||||
|
ui.setStatus("connecting...", "progress");
|
||||||
|
await node.dial(multiaddr);
|
||||||
|
ui.setStatus("connected", "success");
|
||||||
|
},
|
||||||
|
dialWebRTCpeer: async (peerId) => {
|
||||||
|
const peers = await node.libp2p.peerStore.all();
|
||||||
|
const circuitPeer = peers.filter(
|
||||||
|
(p) =>
|
||||||
|
p.protocols.includes("/libp2p/circuit/relay/0.2.0/hop") &&
|
||||||
|
p.protocols.includes("/libp2p/circuit/relay/0.2.0/stop")
|
||||||
|
)[0];
|
||||||
|
|
||||||
|
if (!circuitPeer) {
|
||||||
|
throw Error("No Circuit peer is found");
|
||||||
|
}
|
||||||
|
|
||||||
|
let multiaddr = circuitPeer.addresses.pop().multiaddr;
|
||||||
|
multiaddr = `${multiaddr}/p2p/${circuitPeer.id.toString()}/p2p-circuit/webrtc/p2p/${peerId}`;
|
||||||
|
|
||||||
|
await node.dial(multiaddr);
|
||||||
|
ui.setRelayMeshInfo(node.relay.gossipSub);
|
||||||
|
},
|
||||||
|
ensureWebRTCconnectionInRelayMesh: async () => {
|
||||||
|
const promises = node.libp2p
|
||||||
|
.getConnections()
|
||||||
|
.filter((c) => c.stat.multiplexer === "/webrtc")
|
||||||
|
.map(async (c) => {
|
||||||
|
const outboundStream = node.relay.gossipSub.streamsOutbound.get(
|
||||||
|
c.remotePeer.toString()
|
||||||
|
);
|
||||||
|
const isWebRTCOutbound =
|
||||||
|
outboundStream.rawStream.constructor.name === "WebRTCStream";
|
||||||
|
|
||||||
|
if (isWebRTCOutbound) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
node.relay.gossipSub.streamsOutbound.delete(c.remotePeer.toString());
|
||||||
|
await node.relay.gossipSub.createOutboundStream(
|
||||||
|
c.remotePeer.toString(),
|
||||||
|
c
|
||||||
|
);
|
||||||
|
});
|
||||||
|
await Promise.all(promises);
|
||||||
|
ui.setRelayMeshInfo(node.relay.gossipSub);
|
||||||
|
},
|
||||||
|
dropNetworkConnections: async () => {
|
||||||
|
const promises = node.libp2p
|
||||||
|
.getConnections()
|
||||||
|
.filter((c) => c.stat.multiplexer !== "/webrtc")
|
||||||
|
.map(async (c) => {
|
||||||
|
const peerId = c.remotePeer.toString();
|
||||||
|
|
||||||
|
node.relay.gossipSub.peers.delete(peerId);
|
||||||
|
node.relay.gossipSub.streamsInbound.delete(peerId);
|
||||||
|
node.relay.gossipSub.streamsOutbound.delete(peerId);
|
||||||
|
|
||||||
|
await node.libp2p.peerStore.delete(c.remotePeer);
|
||||||
|
await c.close();
|
||||||
|
});
|
||||||
|
await Promise.all(promises);
|
||||||
|
ui.setRelayMeshInfo(node.relay.gossipSub);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// UI adapter
|
||||||
|
function initUI() {
|
||||||
|
const exitButton = document.getElementById("exit");
|
||||||
|
const sendButton = document.getElementById("send");
|
||||||
|
|
||||||
|
const statusBlock = document.getElementById("status");
|
||||||
|
const localPeerBlock = document.getElementById("localPeerId");
|
||||||
|
const remotePeerId = document.getElementById("remotePeerId");
|
||||||
|
const contentTopicBlock = document.getElementById("contentTopic");
|
||||||
|
|
||||||
|
const messagesBlock = document.getElementById("messages");
|
||||||
|
|
||||||
|
const nickText = document.getElementById("nickText");
|
||||||
|
const messageText = document.getElementById("messageText");
|
||||||
|
|
||||||
|
const remoteNode = document.getElementById("remoteNode");
|
||||||
|
const connectRemoteNode = document.getElementById("connectRemoteNode");
|
||||||
|
|
||||||
|
const webrtcPeer = document.getElementById("webrtcPeer");
|
||||||
|
const connectWebrtcPeer = document.getElementById("connectWebrtcPeer");
|
||||||
|
|
||||||
|
const relayWebRTCbutton = document.getElementById("relayWebRTC");
|
||||||
|
const dropNonWebRTCbutton = document.getElementById("dropNonWebRTC");
|
||||||
|
|
||||||
|
const relayMeshInfo = document.getElementById("relayMeshInfo");
|
||||||
|
|
||||||
|
return {
|
||||||
|
// UI events
|
||||||
|
onExit: (cb) => {
|
||||||
|
exitButton.addEventListener("click", cb);
|
||||||
|
},
|
||||||
|
onSendMessage: (cb) => {
|
||||||
|
sendButton.addEventListener("click", async () => {
|
||||||
|
await cb({
|
||||||
|
nick: nickText.value,
|
||||||
|
text: messageText.value,
|
||||||
|
});
|
||||||
|
messageText.value = "";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// UI renderers
|
||||||
|
setStatus: (value, className) => {
|
||||||
|
statusBlock.innerHTML = `<span class=${className || ""}>${value}</span>`;
|
||||||
|
},
|
||||||
|
setLocalPeer: (id) => {
|
||||||
|
localPeerBlock.innerText = id.toString();
|
||||||
|
},
|
||||||
|
setRemotePeer: (ids) => {
|
||||||
|
remotePeerId.innerText = ids.join("\n");
|
||||||
|
},
|
||||||
|
setContentTopic: (topic) => {
|
||||||
|
contentTopicBlock.innerText = topic.toString();
|
||||||
|
},
|
||||||
|
renderMessage: (messageObj) => {
|
||||||
|
const { nick, text, timestamp } = messageObj;
|
||||||
|
const date = new Date(timestamp);
|
||||||
|
|
||||||
|
// WARNING: XSS vulnerable
|
||||||
|
messagesBlock.innerHTML += `
|
||||||
|
<div class="message">
|
||||||
|
<p>${nick} <span>(${date.toDateString()})</span>:</p>
|
||||||
|
<p>${text}</p>
|
||||||
|
<div>
|
||||||
|
`;
|
||||||
|
},
|
||||||
|
resetMessages: () => {
|
||||||
|
messagesBlock.innerHTML = "";
|
||||||
|
},
|
||||||
|
setWebrtcPeer: (peerId) => {
|
||||||
|
webrtcPeer.value = peerId;
|
||||||
|
},
|
||||||
|
onRemoteNodeConnect: (cb) => {
|
||||||
|
connectRemoteNode.addEventListener("click", () => {
|
||||||
|
const multiaddr = remoteNode.value;
|
||||||
|
|
||||||
|
if (!multiaddr) {
|
||||||
|
throw Error("No multiaddr set to dial");
|
||||||
|
}
|
||||||
|
|
||||||
|
cb(multiaddr);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onWebrtcConnect: (cb) => {
|
||||||
|
connectWebrtcPeer.addEventListener("click", () => {
|
||||||
|
const multiaddr = webrtcPeer.value;
|
||||||
|
|
||||||
|
if (!multiaddr) {
|
||||||
|
throw Error("No multiaddr to dial webrtc");
|
||||||
|
}
|
||||||
|
|
||||||
|
cb(multiaddr);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onRelayWebRTC: (cb) => {
|
||||||
|
relayWebRTCbutton.addEventListener("click", cb);
|
||||||
|
},
|
||||||
|
onDropNonWebRTC: (cb) => {
|
||||||
|
dropNonWebRTCbutton.addEventListener("click", cb);
|
||||||
|
},
|
||||||
|
setRelayMeshInfo: (gossipSub) => {
|
||||||
|
relayMeshInfo.innerHTML = "";
|
||||||
|
|
||||||
|
Array.from(gossipSub.peers)
|
||||||
|
.map((peerId) => {
|
||||||
|
let inbound = gossipSub.streamsInbound.get(peerId);
|
||||||
|
inbound = inbound ? inbound.rawStream.constructor.name : "none";
|
||||||
|
|
||||||
|
let outbound = gossipSub.streamsOutbound.get(peerId);
|
||||||
|
outbound = outbound ? outbound.rawStream.constructor.name : "none";
|
||||||
|
|
||||||
|
return [peerId, inbound, outbound];
|
||||||
|
})
|
||||||
|
.map(([peerId, inbound, outbound]) => {
|
||||||
|
relayMeshInfo.innerHTML += `${peerId}<br /><b>inbound</b>: ${inbound}\t<b>outbound</b>: ${outbound}`;
|
||||||
|
relayMeshInfo.innerHTML += "<br /><br />";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"name": "Relay direct chat",
|
||||||
|
"description": "Send messages between several users (or just one) using Relay with direct WebRTC connection.",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "favicon.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "192x192"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#ffffff",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"name": "light",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "**Demonstrates**:",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"build": "webpack --config webpack.config.js",
|
||||||
|
"start": "webpack-dev-server"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"@libp2p/webrtc": "^2.0.11",
|
||||||
|
"@libp2p/websockets": "^6.0.3",
|
||||||
|
"@waku/dns-discovery": "^0.0.15",
|
||||||
|
"@waku/sdk": "^0.0.17",
|
||||||
|
"libp2p": "^0.45.9"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"copy-webpack-plugin": "^11.0.0",
|
||||||
|
"webpack": "^5.74.0",
|
||||||
|
"webpack-cli": "^4.10.0",
|
||||||
|
"webpack-dev-server": "^4.11.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,185 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
word-wrap: break-word;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 + h4,
|
||||||
|
div + h4,
|
||||||
|
div + details,
|
||||||
|
div + div {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header div {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header div input {
|
||||||
|
min-width: 300px;
|
||||||
|
min-height: 30px;
|
||||||
|
width: 80%;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header div button {
|
||||||
|
min-width: 50px;
|
||||||
|
min-height: 30px;
|
||||||
|
width: 10%;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header div button + button {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
details {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
details p {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
cursor: pointer;
|
||||||
|
max-width: 100%;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
line-height: 1rem;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
min-height: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 800px;
|
||||||
|
min-width: 300px;
|
||||||
|
max-width: 800px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
#messages {
|
||||||
|
overflow-y: scroll;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message + .message {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message :first-child {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message p + p {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message span {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputArea {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls button {
|
||||||
|
flex-grow: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#send {
|
||||||
|
background-color: #32d1a0;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
#send:hover {
|
||||||
|
background-color: #3abd96;
|
||||||
|
}
|
||||||
|
#send:active {
|
||||||
|
background-color: #3ba183;
|
||||||
|
}
|
||||||
|
|
||||||
|
#exit {
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
background-color: #ff3a31;
|
||||||
|
}
|
||||||
|
#exit:hover {
|
||||||
|
background-color: #e4423a;
|
||||||
|
}
|
||||||
|
#exit:active {
|
||||||
|
background-color: #c84740;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success {
|
||||||
|
color: #3ba183;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
color: #9ea13b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminated {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
color: #c84740;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
const CopyWebpackPlugin = require("copy-webpack-plugin");
|
||||||
|
const path = require("path");
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: "./index.js",
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, "build"),
|
||||||
|
filename: "index.js",
|
||||||
|
},
|
||||||
|
experiments: {
|
||||||
|
asyncWebAssembly: true,
|
||||||
|
},
|
||||||
|
mode: "development",
|
||||||
|
plugins: [
|
||||||
|
new CopyWebpackPlugin({
|
||||||
|
patterns: [
|
||||||
|
"index.html",
|
||||||
|
"favicon.ico",
|
||||||
|
"favicon.png",
|
||||||
|
"manifest.json",
|
||||||
|
"style.css",
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
# Using Waku Relay in JavaScript
|
||||||
|
|
||||||
|
**Demonstrates**:
|
||||||
|
|
||||||
|
- Waku Relay: Send and receive messages using Waku Relay.
|
||||||
|
- Pure Javascript/HTML.
|
||||||
|
- Use minified bundle of js from unpkg.com, no import, no package manager.
|
||||||
|
|
||||||
|
This example uses Waku Relay to send and receive simple text messages.
|
||||||
|
|
||||||
|
To test the example, simply download the `index.html` file from this folder and open it in a browser.
|
||||||
|
|
||||||
|
The `master` branch's HEAD is deployed at https://examples.waku.org/relay-js/.
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -0,0 +1,131 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||||
|
<title>JS-Waku Chat</title>
|
||||||
|
<link rel="apple-touch-icon" href="./favicon.png" />
|
||||||
|
<link rel="manifest" href="./manifest.json" />
|
||||||
|
<link rel="icon" href="./favicon.ico" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div><h1>Waku Node Status</h1></div>
|
||||||
|
<div id="status"></div>
|
||||||
|
|
||||||
|
<label for="textInput">Message text</label>
|
||||||
|
<input
|
||||||
|
disabled
|
||||||
|
id="textInput"
|
||||||
|
placeholder="Type your message here"
|
||||||
|
type="text"
|
||||||
|
/>
|
||||||
|
<button disabled id="sendButton" type="button">
|
||||||
|
Send Message using Relay
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div><h1>Messages</h1></div>
|
||||||
|
<div id="messages"></div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
/**
|
||||||
|
* Demonstrate usage of js-waku in the browser. Use relay, gossip sub protocol to send and receive messages.
|
||||||
|
* Recommended payload is protobuf. Using simple utf-8 string for demo purposes only.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {
|
||||||
|
waitForRemotePeer,
|
||||||
|
createDecoder,
|
||||||
|
createEncoder,
|
||||||
|
bytesToUtf8,
|
||||||
|
utf8ToBytes,
|
||||||
|
createRelayNode,
|
||||||
|
} from "https://unpkg.com/@waku/sdk@0.0.18/bundle/index.js";
|
||||||
|
|
||||||
|
const statusDiv = document.getElementById("status");
|
||||||
|
const messagesDiv = document.getElementById("messages");
|
||||||
|
const textInput = document.getElementById("textInput");
|
||||||
|
const sendButton = document.getElementById("sendButton");
|
||||||
|
|
||||||
|
// Every Waku Message has a content topic that categorizes it.
|
||||||
|
// It is always encoded in clear text.
|
||||||
|
// Recommendation: `/dapp-name/version/functionality/codec`
|
||||||
|
// We recommend to use protobuf as codec (`proto`), this demo uses utf-8
|
||||||
|
// for simplicity's sake.
|
||||||
|
const contentTopic = "/js-waku-examples/1/chat/utf8";
|
||||||
|
|
||||||
|
// Prepare encoder and decoder, `V0` for clear text messages.
|
||||||
|
|
||||||
|
const encoder = createEncoder({ contentTopic });
|
||||||
|
const decoder = createDecoder(contentTopic);
|
||||||
|
|
||||||
|
try {
|
||||||
|
statusDiv.innerHTML = "<p>Starting</p>";
|
||||||
|
|
||||||
|
// Create and starts a Waku node.
|
||||||
|
// `defaultBootstrap: true` bootstraps by connecting to pre-defined/hardcoded Waku nodes.
|
||||||
|
// `emitSelf`: emits event of sent message to itself and invokes subscribers by it
|
||||||
|
// We are currently working on migrating this method to DNS Discovery.
|
||||||
|
//
|
||||||
|
// https://js.waku.org/functions/lib_create_waku.createPrivacyNode.html
|
||||||
|
const waku = await createRelayNode({
|
||||||
|
emitSelf: true,
|
||||||
|
defaultBootstrap: true,
|
||||||
|
});
|
||||||
|
await waku.start();
|
||||||
|
|
||||||
|
// Add a hook to process all incoming messages on a specified content topic.
|
||||||
|
//
|
||||||
|
// https://js.waku.org/classes/index.waku_relay.WakuRelay.html#addObserver
|
||||||
|
waku.relay.subscribe(
|
||||||
|
decoder,
|
||||||
|
(message) => {
|
||||||
|
// Checks there is a payload on the message.
|
||||||
|
// Waku Message is encoded in protobuf, in proto v3 fields are always optional.
|
||||||
|
//
|
||||||
|
// https://js.waku.org/interfaces/index.proto_message.WakuMessage-1.html#payload
|
||||||
|
if (!message.payload) return;
|
||||||
|
|
||||||
|
// Helper method to decode the payload to utf-8. A production dApp should
|
||||||
|
// use `wakuMessage.payload` (Uint8Array) which enables encoding a data
|
||||||
|
// structure of their choice.
|
||||||
|
//
|
||||||
|
// https://js.waku.org/functions/index.utils.bytesToUtf8.html
|
||||||
|
const text = bytesToUtf8(message.payload);
|
||||||
|
messagesDiv.innerHTML =
|
||||||
|
`<p>${text}</p><br />` + messagesDiv.innerHTML;
|
||||||
|
},
|
||||||
|
[contentTopic]
|
||||||
|
);
|
||||||
|
|
||||||
|
statusDiv.innerHTML = "<p>Connecting to a peer</p>";
|
||||||
|
|
||||||
|
// Best effort method that waits for the Waku node to be connected to remote
|
||||||
|
// waku nodes (peers) and for appropriate handshakes to be done.
|
||||||
|
//
|
||||||
|
// https://js.waku.org/functions/lib_wait_for_remote_peer.waitForRemotePeer.html
|
||||||
|
await waitForRemotePeer(waku);
|
||||||
|
|
||||||
|
// We are now connected to a remote peer, let's define the `sendMessage`
|
||||||
|
// function that sends the text input over Waku Relay, the gossipsub
|
||||||
|
// protocol.
|
||||||
|
sendButton.onclick = async () => {
|
||||||
|
const payload = utf8ToBytes(textInput.value);
|
||||||
|
await waku.relay.send(encoder, { payload });
|
||||||
|
console.log("Message sent!");
|
||||||
|
|
||||||
|
// Reset the text input.
|
||||||
|
textInput.value = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Ready to send & receive messages, enable text input.
|
||||||
|
textInput.disabled = false;
|
||||||
|
sendButton.disabled = false;
|
||||||
|
statusDiv.innerHTML = "<p>Ready!</p>";
|
||||||
|
} catch (e) {
|
||||||
|
statusDiv.innerHTML = "Failed to start application";
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"name": "Relay JS",
|
||||||
|
"description": "This example uses Waku Relay to send and receive simple text messages.",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "favicon.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "192x192"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#ffffff",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
auto-install-peers=true
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
# Minimal ReactJS Waku Relay App
|
||||||
|
|
||||||
|
**Demonstrates**:
|
||||||
|
|
||||||
|
- Group chat
|
||||||
|
- React/JavaScript
|
||||||
|
- `create-react-app`/`react-scripts` 5.0.0
|
||||||
|
- Waku Relay
|
||||||
|
- Protobuf using `protobufjs`.
|
||||||
|
|
||||||
|
A barebone chat app to illustrate the seamless integration of `js-waku` into ReactJS.
|
||||||
|
|
||||||
|
The `master` branch's HEAD is deployed at https://examples.waku.org/relay-reactjs-chat/.
|
||||||
|
|
||||||
|
To run a development version locally, do:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
git clone https://github.com/waku-org/js-waku-examples
|
||||||
|
cd js-waku-examples/examples/relay-reactjs-chat
|
||||||
|
npm install
|
||||||
|
npm run start
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
const { getLoaders, loaderByName } = require("@craco/craco");
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
webpack: {
|
||||||
|
configure: (webpackConfig) => {
|
||||||
|
const { hasFoundAny, matches } = getLoaders(
|
||||||
|
webpackConfig,
|
||||||
|
loaderByName("babel-loader")
|
||||||
|
);
|
||||||
|
|
||||||
|
if (hasFoundAny) {
|
||||||
|
matches.forEach((c) => {
|
||||||
|
// Modify test to include cjs for @chainsafe/libp2p-gossipsub rpc module
|
||||||
|
if (c.loader.test.toString().includes("mjs")) {
|
||||||
|
// If your project uses typescript then do not forget to include `ts`/`tsx`
|
||||||
|
if (c.loader.test.toString().includes("jsx")) {
|
||||||
|
c.loader.test = /\.(js|cjs|mjs|jsx)$/;
|
||||||
|
} else {
|
||||||
|
c.loader.test = /\.(js|cjs|mjs)$/;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return webpackConfig;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,49 @@
|
||||||
|
{
|
||||||
|
"name": "relay-reactjs-chat",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"homepage": "/relay-reactjs-chat",
|
||||||
|
"dependencies": {
|
||||||
|
"@testing-library/jest-dom": "^5.16.5",
|
||||||
|
"@testing-library/react": "^13.4.0",
|
||||||
|
"@testing-library/user-event": "^13.5.0",
|
||||||
|
"@waku/sdk": "^0.0.18",
|
||||||
|
"protobufjs": "^7.1.2",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-scripts": "5.0.1"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "GENERATE_SOURCEMAP=false PORT=3001 craco start",
|
||||||
|
"build": "GENERATE_SOURCEMAP=false craco build",
|
||||||
|
"test": "exit 0",
|
||||||
|
"eject": "craco eject"
|
||||||
|
},
|
||||||
|
"browser": {
|
||||||
|
"crypto": false
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": [
|
||||||
|
"react-app",
|
||||||
|
"react-app/jest"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not ie <= 99",
|
||||||
|
"not android <= 4.4.4",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@craco/craco": "7.0.0",
|
||||||
|
"eslint": "^8.28.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -0,0 +1,43 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="A barebone chat app to illustrate the ReactJS Relay guide."
|
||||||
|
/>
|
||||||
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png" />
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is installed on a
|
||||||
|
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<title>React Relay</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"name": "Waku Relay",
|
||||||
|
"description": "A barebone chat app to illustrate the ReactJS Relay guide.",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "favicon.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "192x192"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#ffffff",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
# https://www.robotstxt.org/robotstxt.html
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
.App {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-logo {
|
||||||
|
height: 40vmin;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
.App-logo {
|
||||||
|
animation: App-logo-spin infinite 20s linear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-header {
|
||||||
|
background-color: #282c34;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: calc(10px + 2vmin);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-link {
|
||||||
|
color: #61dafb;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes App-logo-spin {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,119 @@
|
||||||
|
import * as React from "react";
|
||||||
|
import protobuf from "protobufjs";
|
||||||
|
import {
|
||||||
|
createRelayNode,
|
||||||
|
createDecoder,
|
||||||
|
createEncoder,
|
||||||
|
waitForRemotePeer,
|
||||||
|
} from "@waku/sdk";
|
||||||
|
|
||||||
|
const ContentTopic = `/js-waku-examples/1/chat/proto`;
|
||||||
|
const Encoder = createEncoder({ contentTopic: ContentTopic });
|
||||||
|
const Decoder = createDecoder(ContentTopic);
|
||||||
|
|
||||||
|
const SimpleChatMessage = new protobuf.Type("SimpleChatMessage")
|
||||||
|
.add(new protobuf.Field("timestamp", 1, "uint32"))
|
||||||
|
.add(new protobuf.Field("text", 2, "string"));
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const [waku, setWaku] = React.useState(undefined);
|
||||||
|
const [wakuStatus, setWakuStatus] = React.useState("None");
|
||||||
|
// Using a counter just for the messages to be different
|
||||||
|
const [sendCounter, setSendCounter] = React.useState(0);
|
||||||
|
const [messages, setMessages] = React.useState([]);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!!waku) return;
|
||||||
|
if (wakuStatus !== "None") return;
|
||||||
|
|
||||||
|
setWakuStatus("Starting");
|
||||||
|
(async () => {
|
||||||
|
const waku = await createRelayNode({ defaultBootstrap: true });
|
||||||
|
|
||||||
|
setWaku(waku);
|
||||||
|
await waku.start();
|
||||||
|
setWakuStatus("Connecting");
|
||||||
|
await waitForRemotePeer(waku, ["relay"]);
|
||||||
|
setWakuStatus("Ready");
|
||||||
|
})();
|
||||||
|
}, [waku, wakuStatus]);
|
||||||
|
|
||||||
|
const processIncomingMessage = React.useCallback((wakuMessage) => {
|
||||||
|
console.log("Message received", wakuMessage);
|
||||||
|
if (!wakuMessage.payload) return;
|
||||||
|
|
||||||
|
const { text, timestamp } = SimpleChatMessage.decode(wakuMessage.payload);
|
||||||
|
|
||||||
|
const time = new Date();
|
||||||
|
|
||||||
|
time.setTime(timestamp);
|
||||||
|
const message = { text, timestamp: time };
|
||||||
|
|
||||||
|
setMessages((messages) => {
|
||||||
|
return [message].concat(messages);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!waku) return;
|
||||||
|
|
||||||
|
// Pass the content topic to only process messages related to your dApp
|
||||||
|
const deleteObserver = waku.relay.subscribe(
|
||||||
|
Decoder,
|
||||||
|
processIncomingMessage
|
||||||
|
);
|
||||||
|
|
||||||
|
// Called when the component is unmounted, see ReactJS doc.
|
||||||
|
return deleteObserver;
|
||||||
|
}, [waku, wakuStatus, processIncomingMessage]);
|
||||||
|
|
||||||
|
const sendMessageOnClick = () => {
|
||||||
|
// Check Waku is started and connected first.
|
||||||
|
if (wakuStatus !== "Ready") return;
|
||||||
|
|
||||||
|
sendMessage(`Here is message #${sendCounter}`, waku, new Date()).then(() =>
|
||||||
|
console.log("Message sent")
|
||||||
|
);
|
||||||
|
|
||||||
|
// For demonstration purposes.
|
||||||
|
setSendCounter(sendCounter + 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="App">
|
||||||
|
<header className="App-header">
|
||||||
|
<p>{wakuStatus}</p>
|
||||||
|
<button onClick={sendMessageOnClick} disabled={wakuStatus !== "Ready"}>
|
||||||
|
Send Message
|
||||||
|
</button>
|
||||||
|
<ul>
|
||||||
|
{messages.map((msg) => {
|
||||||
|
return (
|
||||||
|
<li key={msg.timestamp.valueOf()}>
|
||||||
|
<p>
|
||||||
|
{msg.timestamp.toString()}: {msg.text}
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function sendMessage(message, waku, timestamp) {
|
||||||
|
const time = timestamp.getTime();
|
||||||
|
|
||||||
|
// Encode to protobuf
|
||||||
|
const protoMsg = SimpleChatMessage.create({
|
||||||
|
timestamp: time,
|
||||||
|
text: message,
|
||||||
|
});
|
||||||
|
const payload = SimpleChatMessage.encode(protoMsg).finish();
|
||||||
|
|
||||||
|
// Send over Waku Relay
|
||||||
|
return waku.relay.send(Encoder, { payload });
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
import { render, screen } from "@testing-library/react";
|
||||||
|
import App from "./App";
|
||||||
|
|
||||||
|
test("renders learn react link", () => {
|
||||||
|
render(<App />);
|
||||||
|
const linkElement = screen.getByText(/learn react/i);
|
||||||
|
expect(linkElement).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||||
|
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||||
|
sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
|
||||||
|
monospace;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import React from "react";
|
||||||
|
import ReactDOM from "react-dom/client";
|
||||||
|
import "./index.css";
|
||||||
|
import App from "./App";
|
||||||
|
|
||||||
|
const root = ReactDOM.createRoot(document.getElementById("root"));
|
||||||
|
root.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -0,0 +1,5 @@
|
||||||
|
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||||
|
// allows you to do things like:
|
||||||
|
// expect(element).toHaveTextContent(/react/i)
|
||||||
|
// learn more: https://github.com/testing-library/jest-dom
|
||||||
|
import "@testing-library/jest-dom";
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue