Flutter x Socket.IOで行うリアルタイム通信

Flutter x Socket.IOでリアルタイム通信を行った際の備忘録。
サンプルコードは以下。
https://github.com/takashi0602/socket_io_demo
https://github.com/takashi0602/socket-io-server

Transcript

1. Flutter x Socket.IOで行う リアルタイム通信 たかし
2. 目次 - Socket.IOって何？ - そもそもWebSocketって？ - Flutterでどう実装するの？ - おわりに
3. Socket.IOって何？
4. Socket.IOって何？ - Bidirectional and low-latency communication for every platform - 訳) あらゆるプラットフォームに対応する双方向・低遅延通信 - https://socket.io/ 参照 - 特徴 - ほとんどの場合はWebSocketで通信を行う - WebSocketで接続できない場合、 HTTPロングポーリングにフォールバック - 接続が切れたら、自動で再接続を行う - イベントの送受信が簡単に実装できる
5. Socket.IOって何？ - 対応プラットフォーム - クライアント - https://socket.io/docs/v4/#client-implementations - サーバー - https://socket.io/docs/v4/#server-implementations - Dartはクライアントは対応しているが、サーバーは対応していない - 補足 - socket_io というパッケージは存在するが、メンテはされてない
6. そもそもWebSocketって？
7. そもそもWebSocketって？ - WebSocketは、単一のTCPコネクション上に双方向通信のチャンネルを提供する、 コンピュータの通信プロトコルの1つである - WebSocketのハンドシェイクはHTTP/1.1 Upgradeヘッダーを使用し、HTTPプロト コルをWebSocketプロトコルに変更するように実現されている - https://ja.wikipedia.org/wiki/WebSocket 参照
8. Flutterでどう実装するの？
9. 接続
10. 接続 - ioメソッドでセットアップを行う - ※ API_URLの箇所はサーバー側で立てた APIのURLを使用してください - ネイティブアプリの場合は setTransportsでwebsocketのみ使用可能 - disabledAutoConnectで自動接続をしないように - connectメソッドで接続 - onConnectメソッドで接続時に行う処理を記述
11. 切断
12. 切断 - disposeメソッドで切断 - disconnectメソッドも存在するが、 disposeメソッドの場合は登録したイベントも含めて切断してくれる - onDisconnectメソッドで切断時に行う処理を記述
13. 受信
14. 受信 - onメソッドを使用してサーバーからのイベントを受信
15. 送信
16. 送信 - emitメソッドを使用してイベントをサーバーに送信
17. サンプル - 私が作成したデモアプリのサンプルコードは以下より確認できます - クライアント - https://github.com/takashi0602/socket_io_demo - サーバー - https://github.com/takashi0602/socket-io-server
18. おわりに
19. おわりに - リアルタイム通信を簡単に実装できるのでおすすめ - ハッカソンで使いやすい - チャットはもちろんのこと、Flutterでのゲーム作りにも活用できそう