grpc
/
grpc-dart
mirror of https://github.com/grpc/grpc-dart.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: Updates the grpc-web example to avoid dart:html (#748) 

* update: Migrate off legacy JS/HTML apis

* update: use dart.library.js_interop in place of dart.library.html

* update: dart format xhr_transport.dart and update dart sdk to v3.4.0 in workflows

* update: use if instead of switch case in xhr_transport.dart

* update: upgrade web package to v1.1.0

* refactor: use Uint8List for sending data over XHR rather than Int8List

* refactor: eta-reduction of call to request.setRequestHeader

* Convert grpc-web example to package:web

---------

Co-authored-by: minoic <minoic2020@gmail.com>
Co-authored-by: Moritz <mosum@google.com>
This commit is contained in:
Aran Donohue 2025-02-21 05:11:03 -08:00 committed by GitHub
parent 5ba28e3a1c
commit 6dfb4b43f3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
example/grpc-web/lib/app.dart
View File

@ -14,9 +14,7 @@
// limitations under the License. // limitations under the License.
import 'dart:async'; import 'dart:async';
// ignore: deprecated_member_use (#756) import 'package:web/web.dart';
import 'dart:html';
import 'src/generated/echo.pbgrpc.dart'; import 'src/generated/echo.pbgrpc.dart';
class EchoApp { class EchoApp {
@ -57,13 +55,23 @@ class EchoApp {
} }
void _addMessage(String message, String cssClass) { void _addMessage(String message, String cssClass) {
final classes = cssClass.split(' '); document.querySelector('#first')!.after(HTMLDivElement()
querySelector('#first')!.after(DivElement() ..classList.add('row')
..classes.add('row') ..append(HTMLHeadingElement.h2()
..append(Element.tag('h2') ..append(HTMLSpanElement()
..append(SpanElement() ..classList.add('label')
..classes.add('label') ..classList.addAll(cssClass)
..classes.addAll(classes)
..text = message))); ..text = message)));
} }
} }
// The documentation of DOMTokenList.add implies it can handle multiple classes,
// but in Chrome at least it does not.
extension AddAll on DOMTokenList {
void addAll(String cssClass) {
final classes = cssClass.split(' ');
for (final c in classes) {
add(c);
}
}
}

1
example/grpc-web/pubspec.yaml
View File

@ -9,6 +9,7 @@ dependencies:
grpc: grpc:
path: ../../ path: ../../
protobuf: ^3.0.0 protobuf: ^3.0.0
web: ^1.1.0
dev_dependencies: dev_dependencies:
build_runner: ^2.4.13 build_runner: ^2.4.13

11
example/grpc-web/web/main.dart
View File

@ -12,23 +12,20 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
// ignore: deprecated_member_use (#756)
import 'dart:html';
import 'package:grpc/grpc_web.dart'; import 'package:grpc/grpc_web.dart';
import 'package:grpc_web/app.dart'; import 'package:grpc_web/app.dart';
import 'package:grpc_web/src/generated/echo.pbgrpc.dart'; import 'package:grpc_web/src/generated/echo.pbgrpc.dart';
import 'package:web/web.dart';
void main() { void main() {
final channel = GrpcWebClientChannel.xhr(Uri.parse('http://localhost:8080')); final channel = GrpcWebClientChannel.xhr(Uri.parse('http://localhost:8080'));
final service = EchoServiceClient(channel); final service = EchoServiceClient(channel);
final app = EchoApp(service); final app = EchoApp(service);
final button = querySelector('#send') as ButtonElement; final button = document.querySelector('#send') as HTMLButtonElement;
button.onClick.listen((e) async { button.onClick.listen((e) async {
final msg = querySelector('#msg') as TextInputElement; final msg = document.querySelector('#msg') as HTMLInputElement;
final value = msg.value!.trim(); final value = msg.value.trim();
msg.value = ''; msg.value = '';
if (value.isEmpty) return; if (value.isEmpty) return;