【5分でわかる】Websocketの実装方法 |
您所在的位置：网站首页 › websocket封装flutter › 【5分でわかる】Websocketの実装方法 |
【5分でわかる】Websocketの実装方法
|
本記事はFlutterにおけるWebsocketの使い方について解説していきます。 これからチャットツールやオンライン会議システムといったWebsocketを活用したアプリケーションを作りたい方は是非参考ください。 【筆者のスペック】 本業はペイメント系データサイエンティスト 副業でFlutterを使ったアプリ開発（3年目） 目次 Websocketとは？FlutterでWebsocketを実装する方法web_socket_channelを導入するmain.dartを変更するweb_socket_channelの使い方WebSocket serverへの接続サーバーの情報をlistenするサーバーへ情報を送るWebSocketサーバーとの通信を切断するまとめWebsocketとは？Websocketは双方向通信を低コストで行うための仕組みです。 主に、チャットツールやオンライン会議システムといったリアルタイムにデータ通信を行いたい場合に活用されます。 【お役立ちリンク】  とほほのWebSocket入門 - とほほのWWW入門
FlutterでWebsocketを実装する方法
FlutterでもWebsocketを扱うための機能が用意されています。 それが「 web_socket_channel 」というパッケージです。 こちらのパッケージはFlutterの公式ドキュメントでも紹介されており、FlutterでWebsocketを実装するのであれば、まず最初の選択肢となるでしょう。 今回はこのweb_socket_channel を使った実装方法についてご紹介します。 最終的には以下のようなチャットツールを作成していきます。 
web_socket_channelを導入する
pubspec.yamlに以下を追記してください。 dependencies: flutter: sdk: flutter io: ^0.3.4 #追加 html: ^0.14.0+4 #追加 web_socket_channel: ^2.2.0 #追加 main.dartを変更するmain.dartを以下のように変更してください。（こちらのソースは公式ドキュメントのソースコードを最新のFlutterのバージョンに合わせて書き換えています。） import 'package:flutter/material.dart'; import 'package:web_socket_channel/web_socket_channel.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { const title = 'WebSocket Demo'; return const MaterialApp( title: title, home: MyHomePage( title: title, ), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({ Key? key, required this.title, }) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State { final TextEditingController _controller = TextEditingController(); final _channel = WebSocketChannel.connect( Uri.parse('wss://echo.websocket.events'), ); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Padding( padding: const EdgeInsets.all(20.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Form( child: TextFormField( controller: _controller, decoration: const InputDecoration(labelText: 'メッセージを送る'), ), ), const SizedBox(height: 24), StreamBuilder( stream: _channel.stream, builder: (context, snapshot) { return Text(snapshot.hasData ? '${snapshot.data}' : ''); }, ) ], ), ), floatingActionButton: FloatingActionButton( onPressed: _sendMessage, tooltip: 'Send message', child: const Icon(Icons.send), ), ); } void _sendMessage() { if (_controller.text.isNotEmpty) { _channel.sink.add(_controller.text); } } @override void dispose() { _channel.sink.close(); _controller.dispose(); super.dispose(); } }以上で実装自体は終わりです！ web_socket_channelの使い方ここからは上記ソースコードの解説をしながらweb_socket_channelの使い方を紹介します。 WebSocket serverへの接続本来データを双方向でやり取りする際にはWebSocket サーバーを準備する必要があります。(今回の例ではLob.comが提供する無料のWebSocket サーバーを設定しています。) final _channel = WebSocketChannel.connect( Uri.parse('wss://echo.websocket.events'), );そのため、もしWebSocket サーバーを自前で用意する場合こちらのURLを変更しましょう。 サーバーの情報をlistenするサーバーとの接続が確立されたら常時、WebSocket サーバーを監視しつつ変更があれば取得できるようにします。 StreamBuilderを使ってText形式に変換し、画面に取得した内容を表示します。 StreamBuilder( stream: _channel.stream, builder: (context, snapshot) { return Text(snapshot.hasData ? '${snapshot.data}' : ''); }, ) サーバーへ情報を送るWebSocket サーバーへ情報を送りたい場合は、channel.sink.add()を利用します。 今回の例ではボタンが押された際のファンクションとして設定しています。 void _sendMessage() { if (_controller.text.isNotEmpty) { _channel.sink.add(_controller.text); } } WebSocketサーバーとの通信を切断するWebSocketサーバーとの通信を切断する場合は、channel.sink.close()でできます。 void dispose() { _channel.sink.close(); _controller.dispose(); super.dispose(); } まとめなんだかとっつきにくいWebSocketですが、実装自体は非常に簡単です。 是非この機会に習得してみてください！ 最新のFlutterの勉強方法 まとめFlutterを入門から実践レベルまで一通り学習できる方法をまとめました。 Flutterの勉強方法を知る 2022年 Flutterの学習方法(学習サイト5選)
ども、木村です。本業はデータサイエンティスト。副業でアプリ開発をしています。
本記事では、効率的なFlutterの学習方法につい...
Flutterを動画で学習する
 2022年 Flutterの入門学習におすすめのUdemy教材 7選
ども木村です。本業ではデータサイエンティスト、副業でアプリ開発をしています。
本記事では、Flutterの入門学習におすすめのU...
Flutterを書籍で学習する
 【厳選】Flutterに入門できる書籍 3選
ども、木村です。本業ではデータサイエンティスト。副業で個人でアプリ開発をしています。
いまやクロスプラットフォームの主力となりつ...
スポンサーリンク
|
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |